bobleny Posted February 28, 2007 Share Posted February 28, 2007 Ok, so here is my problem.. I have 2 columns side be side under a header in a parent element that houses everything. My two columns are "#text_house" (Left) and "#related_links" (Right). The parent element that the two columns are to be under is "#main_body". I have tried setting the position of the to child elements to absolute, but they are lining up to the browser window much like "position: fixed;" would line up... They aren't supposed to do that... It should look something like this: ___ | | | My problem, they are static by default and the look much like this: _ | | _ | | One right under the other. Here is my HTML: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="css.css" rel="stylesheet" type="text/css" /> <title>Welcome!</title> </head> <body> <div id="main_body"> <div id="header"></div> <div id="text_house"> Hello, it is I, Mr. Frustrated. </div> <div id="related_links"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </div> </div> </body> </html> Here is my CSS: body { background-color: #ffffff; width: 100%; height: 100%; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; } #main_body { background-color: #ffffff; width: 80%; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; padding: 0px; } #header { background-color: #009900; width: 100%; height: 80px; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; } #text_house { background-color: #99ffff; width: 80%; margin-top: 0px; margin-left: 0px; margin-right: 5px; margin-bottom: 5px; border-style: solid; border-color: #000000; border-width: 1px; } #related_links { background-color: #996600; width: 20%; margin-top: 0px; margin-left: 5px; margin-right: 0px; margin-bottom: 5px; border-style: solid; border-color: #000000; border-width: 1px; } This is a link to the page so you can see what it is doing: http://www.firemelt.net/crow/ Note: the blue box should be left of the brown box. How do I fix this? Thanks! Link to comment https://forums.phpfreaks.com/topic/40470-solved-2-columns-side-be-side-under-a-header-in-a-parent-element-impossible-no/ Share on other sites More sharing options...
ToonMariner Posted February 28, 2007 Share Posted February 28, 2007 the border on the related links means that it will be wider than 20% try this... <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="css.css" rel="stylesheet" type="text/css" /> <title>Welcome!</title> </head> <body> <div id="main_body"> <div id="header"></div> <div id="related_links"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </div> <div id="text_house"> Hello, it is I, Mr. Frustrated. </div> </div> </body> </html> #main_body { background-color: #ffffff; width: 80%; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; padding: 0px; } #header { background-color: #009900; width: 100%; height: 80px; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; } #text_house , #related_links { margin: 0 0 5px 5px; border: 1px solid #000; } #text_house { background-color: #99ffff; } #related_links { background-color: #996600; float: right; width: 20%; } Link to comment https://forums.phpfreaks.com/topic/40470-solved-2-columns-side-be-side-under-a-header-in-a-parent-element-impossible-no/#findComment-196057 Share on other sites More sharing options...
bobleny Posted February 28, 2007 Author Share Posted February 28, 2007 What you suggested didn't work, but I did get close. I didn't know the 20 - 80 % thing would be a problem... This is what I got: http://www.firemelt.net/crow/ With this: body { background-color: #ffffff; width: 100%; height: 100%; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; } #main_body { background-color: #ffffff; width: 80%; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; padding: 0px; } #header { background-color: #009900; width: 100%; height: 80px; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; } #text_house { background-color: #99ffff; width: 80%; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 5px; border-style: solid; border-color: #000000; border-width: 1px; float: left; } #related_links { background-color: #996600; width: ; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 5px; border-style: solid; border-color: #000000; border-width: 1px; float: right; } How can I make related_links span that whole distance? Link to comment https://forums.phpfreaks.com/topic/40470-solved-2-columns-side-be-side-under-a-header-in-a-parent-element-impossible-no/#findComment-196079 Share on other sites More sharing options...
bobleny Posted March 1, 2007 Author Share Posted March 1, 2007 Ok, I set the #related_links to a minimum value and it now works right. Thanks! Link to comment https://forums.phpfreaks.com/topic/40470-solved-2-columns-side-be-side-under-a-header-in-a-parent-element-impossible-no/#findComment-196856 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.