Jump to content

Div Background-color Overflows Into Adjacent Div


nachumk
 Share

Recommended Posts

I am trying to set up 2 divs side by side. A 100x100 divIcon div next to a topMenu div that takes up the rest of the width with a height of 100 pixel (104 with border accounted for). What I see is that the topMenu div's background-color affects the divIcon's background color.I put a sample up: http://nkcorner.com/tmp/HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1"><link href="main.css" rel="stylesheet" type="text/css"/></head><body><div class="divIcon" id="divIcon">divIcon</div><div class="topMenu">topMenu</div></body></html>CSS:.divIcon{ width:100px; height:100px; float:left;}.topMenu { background-color:red; height:100px;}What is going on here? I know that I can give the divIcon a background-color to override the red, but I am trying to understand the behaviour. Shouldn't the topMenu div be separate and therefore it's style shouldn't affect divIcon?Thanx

Link to comment
Share on other sites

float is not what it seems to be. The content of your menu div will appear as instructed: 104px out and then any padding that you add to the menu, etc. But the div itself does not really begin 104px out. It begins at the edge of the window, same place as the icon div. You only notice this because the menu div has a background and the icon div does not. If the icon div had a background (color or image), or if the content itself completely filled the div, this behavior would not be apparent. The menu div would seem to begin 104px out, right where you expect.It's not such a terrible thing to give an element a background color. Transparent backgrounds have a way of sneaking up on you.

Link to comment
Share on other sites

float is not what it seems to be. The content of your menu div will appear as instructed: 104px out and then any padding that you add to the menu, etc. But the div itself does not really begin 104px out. It begins at the edge of the window, same place as the icon div. You only notice this because the menu div has a background and the icon div does not. If the icon div had a background (color or image), or if the content itself completely filled the div, this behavior would not be apparent. The menu div would seem to begin 104px out, right where you expect.It's not such a terrible thing to give an element a background color. Transparent backgrounds have a way of sneaking up on you.
Thanx for the info. The reason I noticed this to begin with was because I had an img in the iconDiv. What was happening was that during load I'd see the background color inside of the icon div before the image was downloaded. When I have the image in there then of course it appears ok. Is there a better way to allocate the divs so they start where I want? Perhaps I shouldn't be using float?thanx,
Link to comment
Share on other sites

It sounds like float is the correct tool. Is there a reason you do not want to put a background color in the icon div? Something close to the icon's own color? That would be the usual plan.
I can put a background color in the icon div, and I guess that's what I'll do. But I still don't understand why the menu div starts at the beginning of the screen? Can anyone explain that?Thanx,
Link to comment
Share on other sites

Because all the elements above it are floated, and so do not take up any vertical space in the main body flow.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...