CODEWITHSUNDEEP
htmlcss
Code
Code

Reputation: 303

Div is not expanding in html

I have the below layout, the bodyContainer div is not growing, even if the form more elements are added. I have pasted the code in jsfiddle, http://jsfiddle.net/ArWVX/1/

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="../css/style.css" />
</head>
<body>
        <div id="container">
            <div id="headerContainer">Header</div><!--header-->

            <div id="bodyContainer">
                <div id="leftNav">
                    <ul>
                       <li><a href=''>Admin</a></li>
                       <li><a href=''>Admin</a></li>
                       <li><a href=''>Admin</a></li>
                       <li><a href=''>Admin</a></li>
                       <li><a href=''>Logout</a></li>
                   </ul> 
                </div> <!--leftNav-->

                <div id="content">
                    <form id="form" method="post" action="index.php">
                        <div>
                             <label for="username">Username</label>
                             <input type="username" name="username" value="username">
                        </div>

                        <div>   
                            <label for="password">Password</label>
                            <input type="password" name="password" value="password">
                        </div>

                        <div id="submitDiv">    
                            <input type="submit" name="submit" value="submit">
                        </div>
                    </form>

               </div> <!--content-->
        </div><!--bodyContainer-->

        <div id="footerContainer">Footer</div><!--footer-->     
    </div><!--container-->
</body>

css /* CSS Document */ *{ margin: 0; padding: 0; }

 body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
bakground-color:#FFFFFF;
 }


 #container {
width: 100%;
 }


 #headerContainer {
margin: 0 auto;
width: 96%;
height: 10%;
border:1px solid #000000;
 }


 #bodyContainer {
margin: 0 auto;
width: 96%;
border:1px solid #000000;
 }



 #leftNav {
margin: 0 auto;
width: 15%;
border:1px solid #000000;
float: left;

 }



#leftNav ul{
list-style-type:none;
margin-left: 3px;
padding: 3px 0px 3px 0px;
}


#leftNav ul li{

}


#leftNav ul li a{
font-size: 12px;
display:block;
text-decoration:none;
}


 #leftNav ul li a:hover{
background-color:#F7F7F7;
 }




#content {
border:1px solid #000000;
margin-left: 15%;
}




#footerContainer {
margin: 0 auto;
width: 96%;
height: 10%;
border:1px solid #000000;
}

Upvotes: 0

Views: 80

Answers (3)

rtpHarry
rtpHarry

Reputation: 13135

Here is one way to do it:

.spacer {
    clear: both;
}

Then add a <div class="spacer"></div> in where you want the overflow to wrap.

There is another more modern way of doing this with the :after pseudoelement as well.

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

DEMO

CSS

/* CSS Document */

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    bakground-color: #FFFFFF;
}
#container {
    width: 100%;
}
#headerContainer {
    margin: 0 auto;
    width: 96%;
    height: 10%;
    border: 1px solid #000000;
}
#bodyContainer {
    margin: 0 auto;
    width: 96%;
    border: 1px solid #000000;
}
#leftNav {
    margin: 0 auto;
    width: 15%;
    border: 1px solid #000000;
    float: left;
}
#leftNav ul {
    list-style-type: none;
    margin-left: 3px;
    padding: 3px 0px 3px 0px;
}
#leftNav ul li {
}
#leftNav ul li a {
    font-size: 12px;
    display: block;
    text-decoration: none;
}
#leftNav ul li a:hover {
    background-color: #F7F7F7;
}
#content {
    border: 1px solid #000000;
    margin-left: 15%;
    min-height:500px;
}
#footerContainer {
    margin: 0 auto;
    width: 96%;
    height: 10%;
    border: 1px solid #000000;
}
.clearfix {
    clear: both;
}

DEMO1

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157414

You need to clear your floats, you can use the below block in your CSS and call the class on the element below

<div id="bodyContainer" class="clear">

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

Demo

Explanation: The above block of properties will self clear the parent element holding floated elements, you can also use overflow: hidden; but I don't like clearing floats using overflow: hidden; as it has some down sides. Also I would like to tell you that above syntax might trouble you in IE, but you can also check out many clear fix hacks out there which are cross browser compatible, but if you do not care IE8 <= than you can use this.

You can read my answer here for more info

Upvotes: 2

Related Questions