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; } Link to comment https://forums.phpfreaks.com/topic/95879-div-layout-problem-example-shown/ 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. Link to comment https://forums.phpfreaks.com/topic/95879-div-layout-problem-example-shown/#findComment-490878 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> Link to comment https://forums.phpfreaks.com/topic/95879-div-layout-problem-example-shown/#findComment-490882 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. Link to comment https://forums.phpfreaks.com/topic/95879-div-layout-problem-example-shown/#findComment-490889 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. Link to comment https://forums.phpfreaks.com/topic/95879-div-layout-problem-example-shown/#findComment-490890 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. Link to comment https://forums.phpfreaks.com/topic/95879-div-layout-problem-example-shown/#findComment-490911 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! Link to comment https://forums.phpfreaks.com/topic/95879-div-layout-problem-example-shown/#findComment-491648 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.