nK0de
Members
-
Joined
-
Last visited
-
I found out what was going on....I think. The reason you guys got it right cause I changed those attribute names as area-1 and area-2 to make it easier for readers to understand. In my original code they are named differently. Apparently there must have been a clash between id values 'cause when I changed them, the problem resolved itself. Thank you all for trying to help appreciate that.
-
I'm having a strange problem designing a simple layout. The initial layout looks like this, Now what I'm trying to do is divide the area 2 into two parts. Like this, The first part appears in red correctly. But the second part does not (which is supposed to appear green). The problem is, as you can see the color hasn't changed in the area 2 (2). How can I correct this issue? Here's the HTML code of the page. (I have it here as well, http://pastebin.com/VFp4jT7L) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!-- Stylesheets --> <link rel="stylesheet" type="text/css" href="stylesheets/ericmeyer_css_reset.css" /> <link rel="stylesheet" type="text/css" href="stylesheets/styles.css" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="content"> <div id="image-slide"> <div id="slider"> </div> </div> <div id="area-1"> </div> <div id="area-2"> <div id="area-2-1"> </div> <div id="area-2-2"> </div> </div><!--end of area-2--> <div id="area-3"> </div> </div><!--end of content--> <div id="footer"> </div> </div><!--end of container--> </body> </html> And here's the CSS file (http://pastebin.com/01ZaxDAC) body { background-color:#DEDED3; } #container { width:900px; height:1100px; margin-left:auto; margin-right:auto; background-color:#FFF; position:relative; } #header { width:900px; height:200px; background-color:#900; } #content { width:900px; height:800px; background-color:#FFF; } #image-slide { width:900px; height:310px; background-color:#90F; } #slider { margin-left:auto; margin-right:auto; position:relative; top:5px; background-color:#999; width: 880px; height: 300px; } #area-1 { width:600px; height:300px; background-color:#3C3; float:left; } #area-2 { width:300px; height:490px; background-color:#CC9; float:right; } #area-2-1 { width:300px; height:300px; background-color:#C00; } #area-2-2 { width:300px; height:190px; background-color:#9F0; } #area-3 { width:600px; height:190px; background-color:#5FF; float:left; } #footer { width:900px; height:100px; background-color:#06F; } I'd appreciate any suggestion on how to correct this. I don't really have much experience in designing. I come from a web development background. Thank you. -------------------------------------------------------------------------------------------------------------------------------------------------------- By the way I discovered this in my attempts at this problem. If I remove the slider div from the HTML, <div id="slider"> </div> The missing area-2-2 appears! But I can't figure out how the slider div affect the area-2-2 div! :S And I need the slider div on the page.