I am having trouble with something that should be simple. Conceptually, I want to display my site centered on the page with a blue background surrounded by a green border. Of course, inside the blue box will be my content.
I set up the site by specifying that the body background be green. I then defined a centered div called container. I made this div 970px wide and put a 970px blue image for the background. The image is 970px wide by 15px tall and repeats y. Next, I defined a div called content. I made this div 646px wide and gave it a blue background color. It floats left. I have a 2px border around this div and 0 margins and padding. This makes the total width of the div 650px. Next, I defined another div called sidebar. I made this div 316px wide and gave it a blue background. It floats right. I have a 2px border around this div and 0 margins and padding. This makes sidebar have a total width of 320px. The width of the divs "content" and "sidebar" add up to 970px which is the width of the container. Now I have my style sheet done and am ready to add content to the page. I define both the div "content" and the div "sidebar" to be within my container div. I place paragraphs of text within both content and sidebar. Now comes the problem. The information within content and sidebar is of unequal height. Content has more information than sidebar and is thus taller. I expected that my container div would still control the background on my page and that the page would be a nice box with a nice green border. Not so!! Under sidebar is a green box! Unless both content and sidebar are of perfectly equal heights, I get a green box under sidebar. How do I fix this? I could specify a height for both "content" and "sidebar". However, the information on this site will frequently change I will be forever changing the height specification. I this would be a pain. My explanation above is convoluted. I built a simple web page to illustrate the problem. See: http://www.synergy-salon.com/index-div-test.htm The css sheet is at: http://www.synergy-salon.com/css-test.css I can't understand why there is green below the sidebar div. It should be blue since "sidebar" is within container! Any help you can give me to fix this problem would be much appreciated. ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
