Can't make DIV float inside parent div

Question

I've got 2 DIV elements (the ones labeled "Module" below that are not acting right! when i try to float them, so that they show up side by side, they jump outside of the parent container and fall below it. i've not been able to figure this out, can someone help?

jsfiddle: jsfiddle

HTML

    <div id="contentwrap">
        <div id="content">
            <div>
                <span style="text-align:center;">
                    <h2>Application Title</h2>
                </span>
            </div>
            <br/>
            <br/>
            <div class="module">
                <a class="modlink" href=" ../csc/index.php">
                    <img class="modimg" src="./images/csc.png" alt="csc"/>
                    <br/>Client Support Center
                </a>
                <br/>
            </div>
            <div class="module">
                <a class="modlink" href=" ../icm/index.php">
                    <img class="modimg" src="./images/icm.png" alt="icm"/>
                    <br/>Inventory Control Management
                </a>
                <br/>
            </div>                
        </div>
    </div>

CSS

    body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 13px;
        color:#E1E6FA;
        background-color:#183152;
    }

    p {
        padding: 10px;
    }

    h1 { 
        font-size: 2em; 
    }
    h2 { 
        font-size: 1.5em; 
    }
    h3 {
        margin-bttom:2px;
    }

    #wrapper {
        margin: 0 auto;
        width: 1000px;
    }

    #headerwrap {
        width: 1000px;
        float: left;
        margin: 0 auto;
    }

    #header {
        height: 100px;
        background: #375D81;
        border-radius: 10px;
        border: 1px solid #C4D7ED;
        margin: 5px;
    }

    #contentwrap {
        width: 820px;
        float: left;
        margin: 0 auto;
    }

    #content {
        background: #ABC8E2;
        border-radius: 10px;
        border: 1px solid #C4D7ED;
        margin: 5px;
        color:black;
    }


    #companylabel {
        margin: 10px;
        top:50%;
        position:absolute;
        margin-top:-.5em;
    }

    #loginbox
    {
        width:100%;

    }

    #loginboxbot
    {
        width:100%;

    }

    .ra
    {
        text-align:right;
    }

    #borderresults {
        color:orangered;
        font-weight:bold;
        padding:0px;
        margin:0px;
        border-radius:10px;
    }

    #alert {
        background-color:yellow;
    }

    .module {
        text-align:center;
        width:120px;
        padding:5px;
        border-radius:5px;
        border: 1px solid #E1E6FA;
        color:#E1E6FA;
        background-color:#375D81;
        float:left;
    }

    .modimg {
        height:100px;
        width:100px;
    }

    .modlink {
        color:#E1E6FA;
        text-decoration:none;
    }

score 4 · Answer 1 · answered Apr 12 '13 at 21:33

4

It's super easy all you have to do is on content div add overflow:auto I did it for you here and it works.

http://jsfiddle.net/alaingoldman/FAPCW/5/

#content {
...
overflow:auto;
}

enjoy and +1 me :)

answered Apr 12 '13 at 21:33

Alain Goldman

2,896
5
43
75

score 1 · Accepted Answer · edited May 23 '17 at 12:15

Not the most elegant fix, but I added a <br style="clear:both"> below the second .module in you container and that seems to do the trick, though a violation of semantic markup.

http://jsfiddle.net/FAPCW/1/

This is a common issue and is generally fixed with a "clearfix".

Lots of versions exist. Here's one with some more details on the general issue: http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/

Here's even more info: https://stackoverflow.com/a/10184992/363701

heres one I use:

.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

you would just put the cf class on your container, and floated children will be properly cleared.

thanks Zach for explaining and giving references, its one thing to fix a problem, but understanding the reason why is more important to me, — user2276010, Apr 13 '13 at 01:54

score 1 · Answer 3 · answered Apr 12 '13 at 21:23

1

Typical newbie stuff! Use a div with clear both style at the end of the 'float' divs.

         <div class="module">
            <a class="modlink" href=" ../csc/index.php">
                <img class="modimg" src="./images/csc.png" alt="csc"/>
                <br/>Client Support Center
            </a>
            <br/>
        </div>
        <div class="module">
            <a class="modlink" href=" ../icm/index.php">
                <img class="modimg" src="./images/icm.png" alt="icm"/>
                <br/>Inventory Control Management
            </a>
            <br/>
        </div>
        *<div style="clear:both"></div>*    
    </div>
</div>

answered Apr 12 '13 at 21:23

banjoSas

184
1
10

funny that you and @Vector both suggest using a `div` for this. To me, `
` seems more appropriate, and since you don't need the closing tag, more condensed. Still, this approach is generally looked down upon in favor of a `clearfix` class. – Zach Lysobey Apr 12 '13 at 21:25
is not correct tag, the compliant tag is
Plus you would need to hide the 'br' if you don't want to see a quirky line in your otherwise slick UI – banjoSas Apr 12 '13 at 21:31
[The trailing slash is a vestige of xhtml and is no longer required in html5](http://stackoverflow.com/a/1946446/363701). Good point on the extra line though; didn't consider that. – Zach Lysobey Apr 14 '13 at 15:49

Can't make DIV float inside parent div

3 Answers3