[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

background color seeping into the divs

Posted on 2011-05-02
14
Medium Priority
?
294 Views
Last Modified: 2012-05-11
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.



0
Comment
Question by:supportoranges
  • 8
  • 6
14 Comments
 
LVL 13

Expert Comment

by:jonahzona
ID: 35507190
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
 
LVL 1

Author Comment

by:supportoranges
ID: 35507267
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
 
LVL 1

Author Comment

by:supportoranges
ID: 35507312
so the divs have their own css properties but no explicit height.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 13

Expert Comment

by:jonahzona
ID: 35507345
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
 
LVL 1

Author Comment

by:supportoranges
ID: 35507381
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
 
LVL 1

Author Comment

by:supportoranges
ID: 35507399
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35507419
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35507425
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
 
LVL 1

Author Comment

by:supportoranges
ID: 35507464
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35507482
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
 
LVL 1

Author Comment

by:supportoranges
ID: 35507508
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
 
LVL 1

Author Comment

by:supportoranges
ID: 35507521
the two child divs should force parent to enclose it in a nice white rect.
0
 
LVL 13

Accepted Solution

by:
jonahzona earned 2000 total points
ID: 35507556
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
 
LVL 1

Author Closing Comment

by:supportoranges
ID: 35507621
perfect, thank you!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month18 days, 18 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question