...

View Full Version : float proble



finoy_ako
04-22-2011, 05:11 PM
why my center div did not stretch down if I float my image but it does if the image is not floated.




<!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>

VIPStephan
04-22-2011, 05:31 PM
Read about containing floats (http://complexspiral.com/publications/containing-floats/).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum