nachumk Posted October 31, 2009 Share Posted October 31, 2009 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 More sharing options...
jeffman Posted October 31, 2009 Share Posted October 31, 2009 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 More sharing options...
nachumk Posted October 31, 2009 Author Share Posted October 31, 2009 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 More sharing options...
jeffman Posted November 1, 2009 Share Posted November 1, 2009 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. Link to comment Share on other sites More sharing options...
nachumk Posted November 1, 2009 Author Share Posted November 1, 2009 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 More sharing options...
Synook Posted November 1, 2009 Share Posted November 1, 2009 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 More sharing options...
thescientist Posted November 1, 2009 Share Posted November 1, 2009 you can use javascript preload images. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.