asked on

CSS horizontal streching of width within a container

I have a container called Navbar which has multiple items called buttons. The number of buttons will varie, depending on the number of times its called. I want the buttons to stretch horizontally to fill up the entire NarBar space (horizontal as well). However, with my current CSS, it will only stay on the left, and the width doesnt change. Please help!

I have this CSS code:

#NavBar {
position:relative;
width: 760px;
height:: 32px;
float:left;
margin: 0 0 1px 0;
line-height: 15px;
background-color: #999999;
text-align:center;
vertical-align:middle;
}
#NavBar .button {
position:relative;
float: left;
width: auto;
/* min-width:107px !important;
min-width:100px; */
padding: 0 0 2px 0 !important; /* firefox */
padding: 1px 12px 1px 12px;
border-left:thin solid #FFFFFF;
text-align:center;
vertical-align:middle;
height: 30px;
line-height:15px;
background-color: #999999;
margin: 0 auto;
}

#NavBar a {
FONT-SIZE: 14px;
COLOR: #FFFFFF;
link="#FFFFFF"
vlink="#FFFFFF"
alink="#FFFFFF";
FONT-FAMILY: Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
font-weight: bold;
line-height: 15px;
position: relative;
color: #FFFFFF;
vertical-align: middle;
text-align:center;
min-width: 107px;
}

the html file with this part would look like:

<div id="NavBar">

<div class="button"><a href="test1.html">Engineering</a></div>
<div class="button"><a href="test1.html">Finance & IT</a></div>
<div class="button"><a href="test1.html">Human<br> Resources</a></div>
<div class="button"><a href="test1.html">Manufacturing<br> Operations</a></div>
</div>

Thogek

Have you tried making the width of your "#NavBar .button" selector a percentage, such as 100%? Block elements' percentage widths are supposed to be taken as percentages of the parents' widths...

paulp75

if you set width:25%; for the .button class it should be ok.
but you would need to change that if theres more buttons needed though

Jeff Geiselman

ASKER

Thog: No luck with your solution

Paul: That would work, but its not the effect I want. I want buttons that would varie its size within the containing folder, depending on the number of "buttons" in that folder.

ASKER CERTIFIED SOLUTION

Thogek

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jeff Geiselman

ASKER

I meant to say container, not folder.

I have 4 buttons that are within a container of a width of 760px. I may add a few more buttons as well, but I want the multiple buttons to fill the entire contents within the container itself.

In my current setup the four button widths do not change and only take up the left half of the container, while I want it to stretch the full length.

Then if I add a button, the overall widthd of each button would go down, making room for the 5th button, and so on....