div displays inline, but should display block

Discussion in 'CSS' started by briligg, May 7, 2010.

  1. #1
    i don't understand why the navbar isn't displaying as a block element.
    http://www.briligg.com/regulate-drugs.html

    i even put 'display:block;' for the 2nd div, the problem one, but it still displays inline in bot chrome and firefox.

    should i paste in the code, or is it easier just to go look? (i figured it would be easier to go.)
     
    briligg, May 7, 2010 IP
  2. briligg

    briligg Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    btw, i know the page looks bad right now - still being written.
    and i'm trying to fix the code, so it's changing.

    .stuff {
    margin: 15px;
    padding: 15px;
    float: left;
    border: 0;
    }

    <div>
    <a href="frailty.html"><img class="stuff" src="http://www.briligg.com/images/frailty.png" height="195px" width="159px" title="human frailty and drugs" alt="human frailty and drugs" /></a>
    <a href="toll.html"><img class="stuff" src="http://www.briligg.com/images/toll.png" height="195px" width="148px" title="the toll of drug prohibition" alt="the toll of drug prohibition" /></a>
    <a href="option.html"><img class="stuff" src="http://www.briligg.com/images/option.png" height="195px" width="190" title="put the beast on a leash" alt="the regulation option" /></a>
    <a href="weighing.html"><img class="stuff" src="http://www.briligg.com/images/weighing.png" height="195px" width="185" title="weighing the pros and cons" alt="weighing the pros and cons" /></a>
    </div>

    i think that's all the relevant code, but i don't know.
     
    briligg, May 7, 2010 IP
  3. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    {float: left;} will make the block elements look like inline. I don't see any problem. Maybe this is what you want.
     
    unigogo, May 8, 2010 IP
  4. briligg

    briligg Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    so, because the images float left, the div also floats left? even though it contains the images, and is not floated itself?
     
    briligg, May 8, 2010 IP
  5. AssistantX

    AssistantX Peon

    Messages:
    173
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #5
    What makes you believe that div is being displayed inline? The div is still displayed as a block, though its collapsed so much that you can't see it. Inline/block is not the issue, but the floats are. Whenever you float an element, it is taken out of the regular flow of the page. Any block element without a height/width set will collapse to "nothing" if all that are inside are floats. There are two ways this can be solved in a way that keeps with what I assume is your original intent. One way is add
    <div style="clear: both;"></div> after the last floated element, but within the collapsed div. Another way (the way I prefer) is to set the collapsed div to CSS "overflow: auto".
     
    AssistantX, May 9, 2010 IP
  6. briligg

    briligg Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks, the "overflow: auto;" fixed it.
     
    briligg, May 10, 2010 IP