CODEWITHSUNDEEP
htmlcss
user2276010
user2276010

Reputation: 13

Can't make DIV float inside parent div

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;
    }

Upvotes: 1

Views: 2246

Answers (3)

Alain Goldman
Alain Goldman

Reputation: 2908

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 :)

Upvotes: 4

banjoSas
banjoSas

Reputation: 194

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>

Upvotes: 1

Zach Lysobey
Zach Lysobey

Reputation: 15714

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.

Upvotes: 1

Related Questions