Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder fireblade's Avatar
    Join Date
    May 2007
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts

    div float left layer overlaps & go byond the parent div

    I am creating a webpage with css. this is my first time to use full css based technique.
    this is my code

    html page

    Code:
    <!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..

    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?
    Attached Thumbnails Attached Thumbnails div float left layer overlaps &amp; go byond the parent div-screesnhot.jpg  
    Fi®e bLádê
    follow me on twitter

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    you just need to clear your float (the left pane).
    Code:
    	<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/archiv...ing_of_floats/

    another tasteful way
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •