Forum Moderators: not2easy

Message Too Old, No Replies

getting the 100% stretch on a div

getting a menu div to have the full screen utilized

         

Heavens Martini

4:09 pm on Jun 1, 2005 (gmt 0)

10+ Year Member



Hello,

I have a div with several anchor tags, the list only goes a few 100 px across the screen. in the table days, I could just add a td and stretch the width to 100% and it would take up the remaining space on the screen to continue the background-color of the menu.

How do you pull that off with a div? I keep getting the div to force a horizontal scrollbar to show up (going a true 100%) I have tried making a div of 100% and putting it inside of the topMenu div..

here is the div css.
#topMenu{
position: absolute;
top: 65px;
left: 175px;

height: 22px;
background-color: silver;
color: black;
display: inline;
}
#topMenu a{
color: #55699b;
font-weight: bold;
font-size:12px;

display: inline;
margin-top: 3px;
height: 20px;
padding: 3px;
}

#topMenu a:hover{
color : silver;
font-weight: bold;
font-size:12px;
background-color: #55699b;

padding: 3px;
display: inline;
margin-top: 3px;
height: 20px;
}
thanks for any pointers.

le_gber

10:22 pm on Jun 5, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi,

Here is a working solution:

body{
width: 100%;
padding: 0;
margin:0;
}

#container{
width: 100%;
}

#topMenu{
margin-top: 65px;
margin-left: 175px;
height: 22px;
background-color: silver;
color: black;
width: auto;
}

#topMenu a{
color: #55699b;
font-weight: bold;
font-size:12px;
display: inline;
margin-top: 3px;
height: 20px;
padding: 3px;
}

#topMenu a:hover{
color : silver;
font-weight: bold;
font-size:12px;
background-color: #55699b;
padding: 3px;
display: inline;
margin-top: 3px;
height: 20px;
}

alternatively and because I assumed that the menu will always be 65px from the top and 175px from the left, you could have use the silver bar as part of a background image assigned to the body tag.

Hope this helps

Leo