background color seeping into the divs

ok after hours of playing around, i give up.

why is my background color seeping into my divs?  i have divs that are flloating but i cannot get the background to stay out.



LVL 1
supportorangesAsked:
Who is Participating?
 
jonahzonaCommented:
K. Add this to your CSS

#container {
  width: 800px;
  height: 100%;
  float: left;
  background: #FFF;
}

Open in new window


And change your HTML to this

<div id="container">
<div class="main_content_leftv2">
        <p>View our past projects!<br />
</p><!-- #BeginLibraryItem "/Library/middle.lbi" -->              <a href="additions_renovations.html">Home Improvements</a><br>
          <a href="aaa">A</a><br>
         (few more menu items follow here)
<!-- #EndLibraryItem --><p>&nbsp;</p>
</div>

    <div class="main_content_rightv2">
         <table width="574" height="309" border="0">
          blah blah blah
    </div>
</div>

Open in new window


This will give you a 800px wide div, floated left, 100% height with a white backround.

If you want to get rid of the border, add:

body {
  padding: 0 !important;
  margin: 0 !important;
}

Open in new window


to your CSS.
0
 
jonahzonaCommented:
Do these divs have their own CSS properties? If not, they are most likely inheriting properties from a high level property.

Can you post HTML and CSS for us to see?
0
 
supportorangesAuthor Commented:
here's the CSS: the only problem left is that since main_content_leftv2 is not as tall as main_content_rightv2, background 'leaks' under the short div.


.main_content_leftv2 {
      float: left;
      margin-top: 0cm;
      margin-bottom: 0.75cm;
      padding-left: 15px;
      padding-right: 25px;
      width: 185px;
      background-color:#FFF;
      }

.main_content_rightv2 {
      float: right;
      margin-top: 0cm;
      width: 575px;
      background-color:#FFF;
      }
        
   
.bottom {
      float: left;
    height: 101px;
      width: 800px;
      color: #FDD800;
      background-color:#000;
      }
.bottom p { text-align: center;
                  font-weight: bold;}      
}

html
-------------------------------
<div class="main_content_leftv2">
        <p>View our past projects!<br />
</p><!-- #BeginLibraryItem "/Library/middle.lbi" -->              <a href="additions_renovations.html">Home Improvements</a><br>
          <a href="aaa">A</a><br>
         (few more menu items follow here)
<!-- #EndLibraryItem --><p>&nbsp;</p>
</div>

    <div class="main_content_rightv2">
         <table width="574" height="309" border="0">
          blah blah blah
    </div>


LEFTV2 is not as tall as RIGHT so color leaks under the left div
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
supportorangesAuthor Commented:
so the divs have their own css properties but no explicit height.
0
 
jonahzonaCommented:
I am confused.

All the divs in your markup have been given a backgound of #FFF (white).

If I change the colors in the divs through the CSS the colors look fine.
0
 
supportorangesAuthor Commented:
the background color of these two divs are fine.

but because the content of .main_content_leftv2 doesn't take up as much room as the right side, if i assign background color at <body> tag the color seeps inside the <body> instead of staying outside the body.

you see the charcoal background of this experts exchange page?

it's like that color seems beneath the main_content_leftv2 because leftv2 is not as tall as rightv2


0
 
supportorangesAuthor Commented:
left div is short, right div is tall
they have defined widths but not defined heights.
so when background-color applied to parent element <body>
there is space under the left div for the color to flow in.
it's because left div has content that is just a few menu items
but right div has big gallery.
0
 
jonahzonaCommented:
That is because the height is automatically generated as the content is added to that div.

Right now you don't have as much content in that div, so the div is only as tall as the content.

If you want the div to be taller, add more content, a height attribute or a min-height: attribute.

Example

.main_content_rightv2 {
      float: right;
      margin-top: 0cm;
      width: 575px;
      background-color:#fff;
      height:200px;
      }

Open in new window


or

.main_content_rightv2 {
      float: right;
      margin-top: 0cm;
      width: 575px;
      background-color:#fff;
      min-height: 200px;
      }

Open in new window

0
 
jonahzonaCommented:
The min-height will grow as content is added, but will always be at least 200px tall. The height attribute is static and will never change.
0
 
supportorangesAuthor Commented:
thank you.  but if i don't want to hardcode height, can i wrap the two divs in a parent div with white background color and have the children inherit white background color, so then i can give <body> a nice colored background that won't leak in?
0
 
jonahzonaCommented:
The background isn't "leaking in". The div itself just not tall. And since it isn't tall, the background is viewable where it ends.

Yes, you can do that with the parent background. Do you want the parent div centered? 100% across? Floating to one side?
0
 
supportorangesAuthor Commented:
i don't want parent div taking up any space on its own or doing any overrides, so couldn't i just define an enclosing div with one attribute, background color?

but actually it wouldn't hurt it to float left so it doesn't do the default positioning.
0
 
supportorangesAuthor Commented:
the two child divs should force parent to enclose it in a nice white rect.
0
 
supportorangesAuthor Commented:
perfect, thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.