...

View Full Version : div float left layer overlaps & go byond the parent div



fireblade
05-09-2008, 07:43 PM
I am creating a webpage with css. this is my first time to use full css based technique.
this is my code

html page



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PC 4 Safe</title>
<link href="css/page.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="outerWrapper">
<div id="banner"></div>
<ul id="menu">
<li><img src="img/gen/menu_left_i.gif" align="left"; /></li>
<li><a href="#"><b>HOME</b></a></li>
<li><a href="#"><b>CONTACT US</b></a></li>
<li><a href="#"><b>ABOUT US</b></a></li>
<li><a href="#"><b>HELP</b></a></li>
</ul>
<div id="wrapper1">
<div>
<div id="leftPane">
left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />
</div>
body<br />body<br />body<br />body<br />body<br />
</div>
</div>
<div id="footer">footer<br />footer<br />footer<br />footer<br /></div>
</div>
</body>
</html>


My CSS code..



/* CSS Document */

body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
color: #333333;
margin: 0px;
padding: 0px;
background:url(../img/gen/striped_bg_i.jpg) repeat 0 0;
text-align:center;
}

#outerWrapper {
width:900px;
margin:0 auto;
background:url(../img/gen/footer_bg_i.gif) repeat-x left bottom #efefef;
}
#wrapper1 {
margin:0px 11px 0px 11px;
background:url(../img/gen/bodybottom.gif) left bottom no-repeat #FFFFFF;
}
#leftPane {
width:200px;
float:left;
background-color:#00CC66;
margin:0px;
clear:none;
padding:2px;
}
#banner {
width:900px;
background:url(../img/gen/banner_bottom_curve.gif) no-repeat left bottom #333333;
height:70px;
margin-bottom:3px;
}

#menu
{
background:url(../img/gen/menu_out_i.gif) repeat-x 0% 0%;
position:relative;
margin:0px;
height:36px;
list-style:none;
padding-left:10px;
}
#menu li
{
float:left;
display:inline;
}
#menu a
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
float:left;
display:block;
color:#fff;
padding:0 10px 0 10px;
line-height:36px;
height:36px;
text-align:center;
text-decoration:none;
color:#FF6600;
border-left:1px #000000 solid;
}
#menu a:hover
{
background:url(../img/gen/menu_over_i.gif) repeat-x 0% 0%;
color:#FF9900;
text-decoration:none;
}
#menu a b
{
height:36px;
}
#footer {
min-height:70px;
}


my left pane comes out from the parent div box. i want the parent div to grow according to the size of the left pane.

what is wrong in my code? can anyone give me a soLutions pLease?

harbingerOTV
05-09-2008, 11:13 PM
you just need to clear your float (the left pane).


<div id="wrapper1">
<div>
<div id="leftPane">
left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />
</div>
body<br />body<br />body<br />body<br />body<br />
</div>
<div style="clear: both"></div>
</div>


for a simple example.

http://www.456bereastreet.com/archive/200502/simple_clearing_of_floats/

another tasteful way ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum