DIV forced to line below

[esport]

Hi Guys,

I have stumbled across a little problem and need some guidance.

 

I have a DIV object that is set a certain width and has a background colour.  The div represents a horizontal graph.

Within the bar, i want to have more bars, I have inner DIV objects inside this container div that are positioned within.

Example

 

<div style="width:20px; height:30px; background-color:#00FFCC">

<div style="height:100%; width:2px; position:relative; left:40px; float:left; background-color:#00660;"> </div>
<div style="height:100%; width:2px; position:relative; left:42px; float:left; background-color:#006600;"> </div>
<div style="height:100%; width:2px; position:relative; left:44px; float:left; background-color:#006600;"> </div>
<div style="height:100%; width:2px; position:relative; left:46px; float:left; background-color:#006600;"> </div>
<div style="height:100%; width:2px; position:relative; left:48px; float:left; background-color:#006600;"> </div>
<div style="height:100%; width:2px; position:relative; left:50px; float:left; background-color:#006600;"> </div>
<div style="height:100%; width:2px; position:relative; left:52px; float:left; background-color:#006600;"> </div>
<div style="height:100%; width:2px; position:relative; left:54px; float:left; background-color:#006600;"> </div>
<div style="height:100%; width:2px; position:relative; left:56px; float:left; background-color:#006600;"> </div>
<div style="height:100%; width:2px; position:relative; left:58px; float:left; background-color:#006600;"> </div>

<!-- This div is being pushed below because the total of widths of the inner divs is greater than container div causing it to be pushed below  -->
<div style="height:100%; width:2px; position:relative; left:60px; float:left; background-color:#006600;"> </div>


</div>

 

The last div is being pushed below because the total of widths of the inner divs is greater than container div causing it to be pushed below to new line.

The reason I need to keep the container div a certain width is because it represents a graph.

Does anyone have any ideas how to maintain the div on the same line without adjusting the width of the container div.

 

Thanks

d

 

[departedmind]

Well you can do it like this too..

 

<style type="text/css">
#main { width:auto; height:30px; }
.first-bar { width:20px; height:30px; background-color:#00FFCC; float:left; display:inline; margin-right:20px;}
.bars { height:100%; width:2px; background-color:#006600; float:left; display:inline; margin-right:2px;}
</style>

 

<div id="main">
<div class="first-bar"></div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
<div class="bars"> </div>
</div>