HTML/CSS float left issue

Question

I have been recently designing some content which needs to be side by side and have the height automatically resize, but the height doesn't resize. The div doesn't expand to the size of the items inside of it. Is there a way to allow the div to expand to the size of the elements inside of it?

CSS

* {
    padding: 0px;
    margin: 0px;
}
body {
    font-family: 'Metrophobic', sans-serif;
    background-color: #c5c5c5;
    background-image: url('../images/noise.png');
}
#container {
    width:900px;
    background-color: #dbdbdb;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px black;
}
.center_align {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
#header {
    height:80px;
    font-size: 60px;
    padding: 10px;
    text-align: center;
}
#menu {
    width:900px;
    height:50px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #cacaca;
}
.menu_link {
    width:224px;
    height:50px;
    text-align: center;
    font-size: 35px;
    float: left;
    opacity: 0.3;
    background-color: #cacaca;
}
.menu_divider {
    width: 1px;
    height: 50px;
    background-color: #dbdbdb;
    float:left;
}
#content {
    width: 900px;
    height: auto;
    padding: 10px;
    font-size: 20px;
    height: auto;
}
.line_container {
    margin-top:5px;
    margin-bottom:5px;
}
#footer {
    width:900px;
    height:22px;
    padding-top:2px;
    text-align: center;
    font-size: 14px;
    color:black;
}

a:link {
    color:black;
    text-decoration: none;
}
a:visited {
    color:black;
    text-decoration: none;
}
a:hover {
    color:black;
    text-decoration: none;
}
a:active {
    color:black;
    text-decoration: none;
}

a.link:link {
    color:#21525e;
}
a.link:visited {
    color:#21525e;
}
a.link:hover {
    color:#307f91;
    text-decoration: underline;
}
a.link:active {
    color:#307f91;
    text-decoration: underline;
}

HTML

<html>
<head>
<title>Home</title>
<link rel="shortcut icon" href="../images/favicon.ico" />
<link href="http://fonts.googleapis.com/css?family=Metrophobic" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.icon {
    width:100px;
    height:100px;
    border: 3px solid white;
    border-radius:25px;
    margin-left:10px;
    margin-right:10px;
    background-position: center center;
    background-size: 100px 100px;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <div class="center_align">
            <img src="../images/header_icon.png" alt="header_icon" width="80" height="80" style="margin-right:20px;float:left;" />
            <div style="height:80px;float:left;">Title</div>
        </div>
    </div>
    <div id="menu">
        <a href="../home" class="menu_link">Home</a>
        <div class="menu_divider"></div>
        <a href="../tutorials" class="menu_link">Tutorials</a>
        <div class="menu_divider"></div>
        <a href="../about" class="menu_link">About</a>
        <div class="menu_divider"></div>
        <a href="../contact" class="menu_link">Contact</a>
    </div>
    <div id="content">
        <div style="width:900px;">
            <div class="icon" style="background-image:url('image.jpg');float:left;"></div><div style="float:left;margin-top:20px;">I'm a freelance Web, Iphone, and Game developer.</div>
        </div>
    </div>
    <div id="footer">
        &copy;&nbsp;Cameron
    </div>
</div>
</body>
</html>

possible duplicate of [What's the best way to display side-by-side items?](http://stackoverflow.com/questions/11438910/whats-the-best-way-to-display-side-by-side-items) — Neil McGuigan, Jul 27 '12 at 18:07

score 5 · Accepted Answer · edited Aug 01 '12 at 20:31

5

Looks like the problem is that the #footer element isn't properly cleared. Add clear: both; to #footer. This pushes the cleared element below the floated elements, and should functionally result in the same visual fix.

edited Aug 01 '12 at 20:31

Jason

3,379
25
32

answered Jul 27 '12 at 18:03

alexvance

1,114
1
11
31

score 3 · Answer 2 · answered Jul 27 '12 at 18:19

3

The "container div" basically "forgets" that it is the container for them, so simply add an overflow:auto; to make it remember. I also tend to add zoom:1 for IE.

answered Jul 27 '12 at 18:19

RAN

1,443
3
19
30

score 2 · Answer 3 · answered Jul 27 '12 at 18:05

The problem is that you are floating elements, and that causes problems with wrapping divs per default (pretty much...).

Here is a working solution, where overflow:hidden is added to the wrapping div: http://jsfiddle.net/s2dxw/2/

The float issue is pretty confusing, and has had a couple of solutions in the past. Here's a good read regarding floats in HTML: http://css-tricks.com/all-about-floats/

score 1 · Answer 4 · answered Jul 27 '12 at 18:07

1

Alternatively, you can put some element with the rule clear: both; inside and at the end of the wrapping div.

answered Jul 27 '12 at 18:07

dezman

18,087
10
53
91

HTML/CSS float left issue

CSS

HTML

4 Answers4