Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Div auto-margining itself

    I have two adjacent divs in my code.

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

    Code:
    <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,

    Code:
    <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?

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by asifshiraz View Post

    Code:
    <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.
    If i was of any help, dont forget to click the 'thank' button =]

  • Users who have thanked ch4sethe5un for this post:

    asifshiraz (11-04-2010)

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    The empty space is coming from the OL which has 1em top and bottom margin by default.

    Code:
    <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.

  • Users who have thanked kansel for this post:

    asifshiraz (11-04-2010)

  • #4
    New to the CF scene
    Join Date
    Oct 2002
    Location
    Australia
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post

    inline versus block

    Hi,
    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!

  • Users who have thanked Talita for this post:

    asifshiraz (11-04-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •