CODEWITHSUNDEEP
htmlcssresizecss-float
Cameron
Cameron

Reputation: 671

HTML/CSS float left issue

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>

Upvotes: 1

Views: 1760

Answers (4)

alexvance
alexvance

Reputation: 1134

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.

Upvotes: 5

RAN
RAN

Reputation: 1453

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.

Upvotes: 3

dezman
dezman

Reputation: 19368

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

Upvotes: 1

Anders Arpi
Anders Arpi

Reputation: 8417

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/

Upvotes: 2

Related Questions