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

Thread: float proble

  1. #1
    Regular Coder
    Join Date
    Jan 2010
    Posts
    130
    Thanks
    52
    Thanked 0 Times in 0 Posts

    float proble

    why my center div did not stretch down if I float my image but it does if the image is not floated.


    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=utf-8" />
    <title>Untitled Document</title>
    
    
    <style type="text/css">
    <!--
    
    body {
    	font-family:Verdana, Arial, Helvetica, sans-serif ;
    	background: #FFFF00;
    	font-size: 15px;
    	margin-left: 0px;
    	margin-right: 0px;
    	height: auto;
    	
    }	
    #header {
    	width: 100%;
    	height: 200px;
    	background: #FFFFFF;
    	position: relative;
    }
    #line {
    	width: 100%;
    	height: 25px;
    	text-align: center;
    	background: #000000;
    	position: absolute;
    	bottom: 0;	
    }
    #line a{
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	background: url(nav.gif);
    	width: 100px;
    	text-align: center;
    	text-decoration: none;
    	display: inline-block;
    	color: #FFFFFF;
    	margin-top: 3px;
    }
    
    #line a:hover{
    	background: url(nav_on.gif);
    	text-decoration: underline;	
    
    
    
    	
    	
    }
    
    #bheader {
    	width: 800px;
    	height: 20px;
    	background: #999999;
    	margin-left: auto;
    	margin-right: auto;
    	display: block;
    	top: 0;
    	background: #00FF00;
    	
    }
    #bheader2 {
    	width: 100%;
    	height: 200px;
    	background: #FF0000;
    	
    
    }
    #center {
    	width: 800px;
    	height: auto;
    	background: #ffffff;
    	margin-left: auto;
    	margin-right: auto;
    	position: relative;
    
    
    }
    #welcome {
    	width: 500px;
    	height: 210px;
    	margin-top: 20px;
    	margin-left: 20px;
    	background: #666666;
    	color: #ffffff;
    
    }
    
    #note {
    	background: #666666;
    	width: 300px;
    	height: 150px;
    	margin-left: 20px;
    	color: #FFFFFF;
    }
    .hh {
    	padding-top: 10px;
    	padding-left: 10px;
    }
    
    .pp {
    	padding: 0px 10px 10px 10px;	
    
    }		
    .pic {
    	float: right;	
    }	
    -->
    </style></head>
    
    <body>
    
    <!--- header begins-->
    <div id="header">
    
    
    <div id="line"> <a href="">Home</a> <a href="">Portfolio</a> <a href="">About</a> <a href="">Video</a> <a href="">Forum</a></div>
    </div>
    <!--- header end-->
    
    
    <!-- header2 begins -->
    <div id="bheader2">
    
    
    
    
    <!--- center begins-->
    <div id="center">
    <div id="bheader">eeeee</div>
    
    <!-- welcome begins-->
    <div id="welcome">
    
    <h5 class="hh">Welcome to my Portfolio</h5>
    
    <p class="pp">
     
    
    </p>
    </div><!-- welcome end-->
    
    
    <div id="note">
    <h5 class="hh">Note:</h5>
    
    <p class="pp">
    
    </p>
    
    
    
    </div>
    <img src="grain.jpg" width="250" height="298" class="pic" />
    
    </div><!--center end-->
    </div><!-- header2 begins -->
    
    </body>
    
    
    
    </body>
    </html>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Read about containing floats.

  • Users who have thanked VIPStephan for this post:

    finoy_ako (04-22-2011)


  •  

    Posting Permissions

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