CODEWITHSUNDEEP
htmlcss
dev.nikolaz
dev.nikolaz

Reputation: 3184

ul is not inside div container

Why my container is not background color red and ul is not inside div container ??

STYLE:

#container {
            width:1000px
            }

#categoryorder {
            float:left;
            width:500px;
            margin:0 0 0 50px;
            display:inline;
            list-style-type:none
}

#categoryorder li {
            color:#003366;
            font-size:20px;
            float:left;
            width:196px;
            background-color:#fcfcfc;
            border: 2px solid #dddddd;
            margin:0 50px 50px 0;
            line-height:50px;
            text-align:center;
            display:inline;
            cursor:move
}

HTML:

<div id="container" style="background-color: red;">
     <ul id="categoryorder">
         <li id="ID_1">1</li>
         <li id="ID_2">2</li>
         <li id="ID_3">3</li>
         <li id="ID_4">4</li>
         <li id="ID_5">5</li>
         <li id="ID_6">6</li>
         <li id="ID_7">7</li>
         <li id="ID_8">8</li>
     </ul>
</div>

Upvotes: 4

Views: 16326

Answers (5)

Tim Marinin
Tim Marinin

Reputation: 358

Just use display:inline-block instead (and add vertical-align: top for better look).

Float is designed for cutting block from flow, so it is normal behaviour for that: you have no no-floated blocks inside, so flow is near nothing.

Inline-blocks are in flow, so it will work.

And just one trick for inline-blocks: remember the spaces! If they are in source, there will be small margins within blocks, so just comment your indents

  • something
  • another
    • (look up to source)

    Upvotes: 1

    user934902
    user934902

    Reputation: 1204

    You are floating your elements and need to add overflow: hidden to your PARENT container to restore the height. Use this and you wont need to add an extra div to your flow.

    #container {
            width:1000px; overflow: hidden;
            }

    http://jsfiddle.net/saUp7/1/

    Upvotes: 4

    Carl0s1z
    Carl0s1z

    Reputation: 4723

    Change your float:left to display:inline-block;

    Css:

    #categoryorder {
     width:500px;
     margin:0 0 0 50px;
     display:inline-block;    /*from float:left; to display:inline-block; */
     list-style-type:none;
}

    DEMO

    Upvotes: 1

    j08691
    j08691

    Reputation: 207901

    When you float the children you essentially remove them from the flow of the document and the container element's height shrinks to nothing. Add overflow:auto; to your #container div to restore the behavior you seek.

    #container {
    width:1000px;
    overflow:auto;
}

    jsFiddle example

    Note that this answer doesn't require any extra (non-semantic) divs to get the desired result.

    Upvotes: 6

    George
    George

    Reputation: 36784

    Because you are floating all of the elements within, without clearing them. Create a clear class and then add an element at the bottom:

    HTML

    <div id="container" style="background-color: red;">
     <ul id="categoryorder">
         <li id="ID_1">1</li>
         <li id="ID_2">2</li>
         <li id="ID_3">3</li>
         <li id="ID_4">4</li>
         <li id="ID_5">5</li>
         <li id="ID_6">6</li>
         <li id="ID_7">7</li>
         <li id="ID_8">8</li>
     </ul>
    <div class="clr"></div>
</div>

    CSS

    .clr{
    clear:both;
    font-size:0;
}

    JSFiddle

    Upvotes: 10

    Related Questions