Question

Is it possible to style DIVs so they look like follows:

with simple code

<div class='menubar'><div class='menu'>item1<br/>item2</div>...</div>

This is for menu. I wish just to resize selected DIV.

The features should be follows:

1) DIVs are placed from left to right without specifying absolute positions.

2) DIVs are taller than container DIV but don’t stretch it

UPDATE

Please explain with DIVs or SPANs, I failed to use LEFT with them. I need to learn, not get ready solution.

Answer 1

This is pretty basic stuff.

1) don’t use divs, use a list
2) float the child element

<ul class='menubar'>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

and the according css:

ul.menubar{
   /*some fancy css*/
   height:<x>px; /* is needed since it would collapse otherwise*/
}
ul.menubar > li{
   float:left;
   /* more fancy css */
}

Here you go with a fancy demo.