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 to the CF scene
    Join Date
    Feb 2011
    Location
    India
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Float:Left doesn't work

    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-topx;
    }
    .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 .....

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ankur54,
    It sounds like you need to clear your floats. Have a look at how overflow: auto; can clear your floats.

    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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