0

say for example i have 2 div in a div like this

<div style="width: 300px; backround-color: #000000;">
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div>
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div>
</div>

Now my question is why i cant see my background black color below ref if green div is 300 pixels in height.

1

4 Answers 4

4

The text flow is "killed" if you use float: ...;

What you can do is to say where the text flow should be after the elements with the float attribute with the "clear" attribute.

You can do:

<div style="width: 300px; backround-color: #000000;">
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div>
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div>
    <div style="clear: both;"></div>
</div>
2
  • What does this have to do with the question? Mar 25, 2012 at 14:08
  • It's simple. If you define where the text-flow should be after the to div-elements, the div-elements above are seen as text and the background will be visible. (Sorry, very hard to explain in english)
    – user1150525
    Mar 25, 2012 at 14:11
3

DIVs don't handle the height of embedded floated divs very well. You can solve this problem a couple of ways. The easiest is to put a clear:both div just before the end of the outside div.

<div style="width: 300px; background-color: #000000;">
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div>
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div>
    <div style="clear:both;"></div>
</div>

It also helps to spell background-color right :)

0
0

Instead of clear, I found that I could add

overflow: hidden;

to the containing div's css.

-1

It's because you don't define the wrapping divs height. To see the background from it you need to have it bigger than the div inside.

Also remove one of the # in color: ##ffffff;".

Here is a jsFiddle of your problem, define the parent divs height and you will see the black come out under the other 2 divs.

7
  • Thats not right. You don't have to define a height for the parent element in order to see the background.
    – user1150525
    Mar 25, 2012 at 14:09
  • If there is another color in the child div yes you do, padding or margin can do it aswell, but if they are the exact size the child div blocks the parent div... He has green and red in his child divs. read the code. Mar 25, 2012 at 14:10
  • <div style"clear: both;"></div> will work better, because you don't have to define the height (maybe it will change and than it's not going to work, ...). In the code only the first childNode has the height 150px, the other one has no height defined. So the childnodes won't have the exact size.
    – user1150525
    Mar 25, 2012 at 14:14
  • @user1150525 you're right, you cannot decide parent element height, say fr xample you are posting 10 boxes and the parent element is a background, you cannot pre-define its height.
    – PHPSrike
    Mar 25, 2012 at 14:15
  • @user1150525 did you see he has floats? clear:both would not put them next to eachother, and it destroys his style. Mar 25, 2012 at 14:19

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.