Can't insert code inbetween 2 <div>

[ankhmor]

Hi

Here's my code:

<style>
ul{
    margin: 0 auto;
}
ul.horizontal_list li{
margin: 0 auto;
    text-align: left;
    float: left;
    list-style: none;
    padding: 3px 10px 3px 10px;
    margin: 5px;
    border: 1px solid #CCC;
}
</style>

<div style="font-size: medium;border-color: #a7e3ff;border-style: solid;border-width: 1px;">
    <ul class="horizontal_list">
        <li>
		hey
		</li>
			        <li>
		hey1
		</li>
			        <li>
		hey2
		</li>
</ul>
</div>

 

And here's my problem.

The UL doesnt want to go into the DIV. The DIV appears as a thin strip and the UL is outside of it.

Here's a screenshot :

 

Could you tell me how to fix this?

Thanks.

 

[JasonLewis]

Hm, you can put this:

 

<div style="clear:both;"></div>

 

Underneath </ul> but inside the parent div.

 

OR you could float the parent div left as well.

[BoltZ]

also you have <style>. Do <style type="text/css">. Man whats with people and not using correct script/style tags these days =/. It helps solve errors people!!! Especially with IE

[ToonMariner]

OR even better you could do this properly by not adding any extra html markup just to attain a PRESENTATIONAL goal.

 

there is the rather lovely and simple method to get browser to make an element recognize it has content that takes up space by simply giving that parent container overflow: hidden;

 

this does have a couple of minor bugs but youi can play with different values of overflow (I have never used anything but hidden to get the result I wanted).

 

If you have problems you can use this method which is a little heavier on the code but is reliable...

 

http://www.positioniseverything.net/easyclearing.html

[BoltZ]

AH Pie. I solved IE8's black box bug on there. Took me a long time