Forum Moderators: not2easy
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.
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