Float:Left doesn't work [Archive]

ankur54

02-24-2011, 06:19 AM

Here is my HTML code

<html>
<head>

<style type="text/css">
div{
border:0px #000 solid;
}
#main{
background:url(http://brushart.in/ankurtest_images/bg_seen.jpg) no-repeat;
width:525px;
margin:0;
padding:0;
background-color:#f0f0ee;
}
.header{
margin:0;
padding:0;
}
.head{
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
color:#000;
float:left;
font-weight:bolder;
margin-top:px;
}
.text{
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
color:#159ee4;
float:left;
padding-top:20px;
}
</style>

</head>

<body>
<div id="main">
<div class=" header" >
<img src="http://brushart.in/ankurtest_images/text_hdr.png" />
</div>

<div style=" width:525px; ">
<div style=" width:275px; margin-top:10px; padding-left:10px;">
<div>
<span class="head">Lorem ipsum dolor sit amet</span>
</div>
<div class="text">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br />

<a href=""><img src="http://brushart.in/ankurtest_images/order_btn.jpg" border="0" style="margin-left:60px;"></a>
</div>
</div>
<div style="float:left;">
<img src="http://brushart.in/ankurtest_images/crtn.jpg" />
</div>

</div>

</div>
</body>
</html>

In this code when i add 'FLOAT' attribute then background of main div is not showing in complete in whole body .....

Excavator

02-24-2011, 08:27 AM

Hello ankur54,
It sounds like you need to clear your floats. Have a look at how overflow: auto; can clear your floats (http://www.quirksmode.org/css/clearing.html).

When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.