SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,209
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    background color of the wrapper

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layOut_01</title>
    
    <style type="text/css">
    *{margin:0px;padding:0px}
    .pd5{padding:5px}
    </style>
    
    </head>
    <body class="pd5">
    <div style="background:green">
      <div style="float:left;background:yellow">left</div> 
      <div style="float:right;background:pink">right</div>
    </div>
    
    </body>
    </html>
    The code above is at http://dot.kr/x-test/layOut/001.php .
    I can see the yellow backgound in the left and pink background in the right.
    But where can I the background color:green ?

    If I want to see the background color:green, I can I see it?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Add something like this:
    Code:
    <div style="background:green">
        <div style="float:left;background:yellow">left</div> 
        <div style="float:right;background:pink">right</div>
        middle
    </div>
    or this:
    Code:
    <div style="background:green; overflow:hidden;">
        <div style="float:left;background:yellow">left</div> 
        <div style="float:right;background:pink">right</div>
    </div>
    The floated containers are removed from the flow and have no height so the <div> with the background-color has no height. Overflow-hidden contains the floats and gives it height so the green is visible. Likewise, adding text gives it height so the green shows but does not contain the floats.


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
  •