CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

Container DIV height not adapting to content

do you know why the text in my .block-left DIV goes outside the container .block? I would expect .block (which has no fixed height) to adapt its height based on what's in .block-left and .block-right. http://jsfiddle.net/9dUC9/ Thanks

enter image description here

.block {
    padding: 20px;
    text-align: justify;
    background-clip: border-box;
    box-sizing: border-box;
    border: 1px solid #000;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.block-left {
    float: left;
    box-sizing: border-box;
    overflow: hidden;
    width: 50%;
}
.block-right {
    float: right;
    overflow: hidden;
    box-sizing: border-box;
    width: 50%;
}
<div class="block">
    <div class="block-left">CENTRE DE kkjljljlj
        <p>3, rue der</p>
        <p>51 lmlm (klklkl)</p>
        <ul id="contact">
            <li>+3 691 123.456</li>
            <li><a href="javascript:sendAnnotatedMailTo('contact','lmlml','lu','Contact via mlmlm.lu','')">[email protected]>

            </li>
            <li><a href="http://goo.gl/maps/Ew2" target="_blank"> Plan d'accès</a>

            </li>
        </ul>
    </div>
    <!-- End DIV block-left -->
    <div class="block-right">hgh</div>
    <!-- End DIV block-right -->
</div>

Upvotes: 2

Views: 1271

Answers (2)

akinuri
akinuri

Reputation: 12027

Try adding overflow: auto; to .block. FIDDLE

.block {
    padding: 20px;
    text-align: justify;
    background-clip: border-box;
    box-sizing: border-box;
    border: 1px solid #000;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow: auto; /* here */
}

Upvotes: 2

San
San

Reputation: 1247

Use clearfix Is this what you want

http://jsfiddle.net/cancerian73/9dUC9/1/

.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
 }

Or, if you don't require IE<8 support, the following is fine too:

.clearfix:after {
content: "";
display: table;
clear: both;}

Upvotes: 1

Related Questions