SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    India
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question background color and borders not working when float used on child div

    Hi all,

    I am trying to create a table with two columns with left content aligned to left and right content aligned to right. Here is my code...

    Code:
    <div style="background-color:#ddddbb; border:5px solid #BFC19A;">
    <div style="float:left; ">Text1</div>
    <div style="float:right;">Text2</div>
    </div>
    In the above code, when I use float on child divs, they are coming out of parent div. It seems that parent div is behaving as if it doesnt have any child divs if used float on child divs.

    And so if I used border for parent div, it assumes itelf as an empty div and top and bottom borders are touching each other and also there will be no background displayed.

    Can anyone explain this behaviour?
    How can I create container div that will have background and borders?

    Afru.

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    give first div a height:?px; and it works
    <div style="background-color:#ddddbb; border:5px solid #BFC19A;height:100px;">

    you try to use a minimum of css:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <style type="text/css">
    <!--
    div{border:1px solid #ff0000;}
    .divcon{background-color:#ddddbb; border:5px solid #BFC19A;}
    .divl{}
    -->
    </style>
    </head>
    <body>
    <div class="divcon">
    <div class="divl">Text1<br><br><br>test1</div>
    <div align="right">Text2<br><br><br><br>test2</div>
    </div>
    <br>
    <div class="divcon">
    <div class="divl" style="position:absolute;">Text1<br><br><br><br><br><br>test1</div>
    <div align="right">Text2<br><br><br>test2</div>
    </div>
    <br><br><br><br><br><br>
    <div class="divcon" style="height:100px;">
    <div class="div1l" style="float:left; ">Text1<br><br><br><br><br><br>test1</div>
    <div style="float:right; ">Text2<br><br><br><br><br><br><br><br><br>test2</div>
    </div>
    <br><br><br><br><br><br><br><br><br>
    <div class="divcon" style="height:100px;">
    <div class="div1l" style="float:left; ">Text1<br><br><br><br><br><br>test1</div>
    <div style="float:right; ">Text2<br><br><br>test2</div>
    </div>
    <br><br><br><br>
    <div class="divcon">
    <div class="div1l" style="float:left; ">Text1<br><br><br><br><br><br>test1</div>
    <div style="float:right; ">Text2<br><br><br>test2</div>
    </div>
    <br>
    </body>
    </html>
    there is one other way position absolute for all div's

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    India
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys,

    Thank you very much for the help. I have got it...

    Have a nice day

    Afru.


Bookmarks

Posting Permissions

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