www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Background color help

  1. #1
    Join Date
    Feb 2006
    Location
    Hedgesville WV
    Posts
    140

    resolved [RESOLVED] Background color help

    in the following code I have a problem. The green div flows outside the red div. I need to know what is missing in my code to expand the red div to contain the green div. The blue div should contain all the divs but the green div flows outside the blue div too.

    HTML Code:
    <div style="background:blue; padding: 10px; width:80%">
    <div style="background: yellow; padding: 5px">
      <div style="background: red; padding:5px">
      1. Is this a question?
        <div style="float:right; background: green; padding:10px">
        Button 1<br>
        Button 2
        </div>
      </div>
    </div>
    <div style="background: yellow; padding: 5px; clear:both">
      <div style="background: red; padding:5px">
      1. Is this a question?
        <div style="float:right; background: green; padding:10px">
        Button 1<br>
        Button 2
        </div>
      </div>
    </div>
    </div>

  2. #2
    Join Date
    Jun 2004
    Posts
    51
    You'll need to add a div tag right after the red div and that div should contain a 'clear: both' in the style attribute.

    Code:
    <div style="background:blue; padding: 10px; width:80%">
      <div style="background: yellow; padding: 5px">
        <div style="background: red; padding:5px">
        1. Is this a question?
          <div style="float:right; background: green; padding:10px">
          Button 1<br>
          Button 2
          </div>
          <div style="clear: both;"></div>
        </div>
      </div>
      <div style="background: yellow; padding: 5px; clear:both">
        <div style="background: red; padding:5px">
        1. Is this a question?
          <div style="float:right; background: green; padding:10px">
          Button 1<br>
          Button 2
          </div>
          <div style="clear: both;"></div>
        </div>
      </div>
      </div>

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <div style="background: red; padding:5px; overflow:hidden;">

  4. #4
    Join Date
    Feb 2006
    Location
    Hedgesville WV
    Posts
    140

    resolved Thank you both....

    Both of the people who responded have taught me something new. Both solutions will come in handy and I thank you for your help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles