asked on

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.

jonahzona

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?

supportoranges

ASKER

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>             <a href="additions_renovations.html">Home Improvements</a><br>
<a href="aaa">A</a><br>
(few more menu items follow here)
<p> </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

supportoranges

ASKER

so the divs have their own css properties but no explicit height.

jonahzona

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.

supportoranges

ASKER

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

supportoranges

ASKER

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.

jonahzona

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

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

Open in new window

jonahzona

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.

supportoranges

ASKER

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?

jonahzona

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?

supportoranges

ASKER

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.

supportoranges

ASKER

the two child divs should force parent to enclose it in a nice white rect.

ASKER CERTIFIED SOLUTION

jonahzona

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

supportoranges

ASKER

perfect, thank you!