Home/ Questions/Q 6597477
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:12:51+00:00

This seems incredibly simple but I have no idea why I can’t put a

  • 0

This seems incredibly simple but I have no idea why I can’t put a div tag inside of a container div tag as it will not show up in Firefox or Chrome properly, but it works in IE6…??? Code is as follows:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="container">
    <div id="nav">
        <p>Hello</p>
    </div>
</div>
</body>
</html>

CSS: style.css

body {
    background:white;
    font-family: sans-serif;

}
#container {
    margin:0 auto;
    width:960px;
    background:#e3e3e3;
    border:1px solid black;
}
#nav {
    padding:10px;
    margin-top:10px;
    float:left;
    width: 400px;
    height:100px;
    background:white;
    border:1 px solid black;
}

It’s as if the container is not expanding with the DIV tag inside of it..what gives?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a common issue people face with CSS. Whenever you float something, it’s parent collapses as you are seeing. You can work around it in the following ways:

    1. set an explicit height on the container
    2. put overflow:hidden or overflow:auto on the container
    3. use the clearfix hack: http://nicolasgallagher.com/micro-clearfix-hack/

    I find #2 to be the easiest and best in most cases. Use #3 when overflow:hidden/auto has an undesirable side effect.

    • 0