View Full Version : Div auto-margining itself

11-03-2010, 07:21 PM
I have two adjacent divs in my code.

Normally, they appear joined together, one immediately starts when the other finishes.

<div style="background-color: Red;">Red</div>
<div style="background-color: Blue;">Blue</div>

Now this is what I expect to be normal behaviour, "independent" of what ever is inside the divs.

But if I do the following,

<div style="background-color: Red;">Red</div>
<div style="background-color: Blue;"><ol><li>Blue</li></ol></div>

then the divs automatically insert empty space between them, no matter what I do to format the <ol>. I have tried setting zero margin, zero border and zero padding to both the div as well as the ol, but nothing removes that space?

11-03-2010, 08:17 PM
<div style="background-color: Red;">Red</div>
<div style="background-color: Blue;"><ol><li>Blue</li></ol></div>

try setting the <ol> to display:inline im not sure if that will work.

11-03-2010, 09:46 PM
The empty space is coming from the OL which has 1em top and bottom margin by default.

<div style="background-color: Red;">Red</div>
<div style="background-color: Blue;"><ol style="margin:0;"><li>Blue</li></ol></div>

Setting the OL to display:inline will remove the gap between the red and blue divs, but the top margin of the OL will then cause padding in the blue div. You will need to cancel the top margin if you don't want that gap.

11-04-2010, 04:04 AM
the issue your talkin about is inline versus block.
Look them up.

You can either use the display:inline; or display:block; properties.
Or use float:left; to allow things to line up next to each other.
After your floats you need a clear however.

clear:both; for example.

Fortunately new browsers support display:inline-block; which gives you horizontal stacking as well as height blocks.

If you use display:inline the height property isnt respected and your box simply collapses, this is a great example of the a tag which is display inline by default, as is the span tag.

Where as the div tag is display:block;

The ul or ol tags are probably triggering some block displaying, so make sure your parent divs float or display inline.

Good luck! :)