Solarpitch Posted March 12, 2008 Share Posted March 12, 2008 Hey, I am just having a problem trying to get the "content" and "right content" in the below example to sit tidy to the top just like the "left content". I'm not sure what the problem is... CSS is below CSS html, body { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #000000; background: #ffffff; } #container { background: red; width: 966px; margin: auto; } #top_nav { background: green; height: 100px; } #header { background: darkgreen; height: 50px; margin: 0; padding: 0; } #left_nav { float: left; background: pink; width: 270px; margin: 0; padding: 0; } #content{ margin-left: 270px; background: lightblue; margin-right: 280px; margin: 0; padding: 0; } #right_content { float: right; background: orange; width: 280px; margin: 0; padding: 0; } #bottom_content { clear: both; background: pink; height: 200px; margin: 0; padding: 0; } #footer { clear: both; background: green; height: 30px; margin: 0; padding: 0; } Quote Link to comment Share on other sites More sharing options...
haku Posted March 12, 2008 Share Posted March 12, 2008 You need to at least post your HTML, and preferably a link to the live page. Quote Link to comment Share on other sites More sharing options...
Solarpitch Posted March 12, 2008 Author Share Posted March 12, 2008 Hi, sorry but the page is not live at the min, thats why I had to show the example. Here's the HTML code... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="Description" /> <meta name="keywords" content="Keywords" /> <style type="text/css" media="all">@import "css/styles.css";</style> </head> <body> <div id="container"> <div id="top_nav">top nav</div> <div id="header">header</div> <div id="left_nav">left content </div> <div id="content"><p>content</div> <div id="right_content">right content </div> <div id="bottom_content">bottom content</div> <div id="header">footer</div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
haku Posted March 12, 2008 Share Posted March 12, 2008 Give #left-content, #content and #right-content widths that don't add up to more than 966px, then make them all float left. Quote Link to comment Share on other sites More sharing options...
Solarpitch Posted March 12, 2008 Author Share Posted March 12, 2008 That fixes #left_content and #content but #right_content still sits under the both of them. Quote Link to comment Share on other sites More sharing options...
haku Posted March 13, 2008 Share Posted March 13, 2008 Did you float it left? Is it underneath the right div then? If so, the combined widths (plus margins plus borders) of the three content divs is wider than the container div. You need to make these divs a little narrower. If that doesnt work, find some free hosting and put it up there then post a link. Its a lot easier to help when I can see something live. Quote Link to comment Share on other sites More sharing options...
Solarpitch Posted March 13, 2008 Author Share Posted March 13, 2008 Thanks haku, you were spot on. The margins were causing the problem! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.