SmokingMan Posted October 17, 2006 Share Posted October 17, 2006 I'm trying to put together the outline for a three column page. But I can't seem to get the right column to line up with the top of the center column. I know I have something set wrong in my CSS, but I can't seem to figure out what it is. Here's the link for the page. Link to comment Share on other sites More sharing options...
BiteMe Posted October 18, 2006 Share Posted October 18, 2006 To make things easier for us all, please post the css & xhtml in you post. (wrap it in code here )in the mean time have a look at this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">body { margin:20px 10%; padding:0; background:#D1DCE9; color:#000;}#container { background:#B1B3D6; border:1px solid #000;}#header { border-bottom:1px solid red; background:#ffffCC; text-align:center;}#left { margin-left:-169px;/* must be 1 pixel less than width*/ float:left; width:170px;/* must be same as left margin on #middle*/ position:relative; left:-2px;/* line up exactly */ display:inline;/* ie fix*/}#right { margin-right:-169px;/* must be 1 pixel less than width*/ float:right; width:170px;/* must be same as right margin on #middle*/ position:relative; right:-2px;/* line up */ display:inline;/* ie fix*/}* html #left{margin-right:-3px;}/* 3 pixel jog*/* html #right{margin-left:-3px;}/* 3 pixel jog*/#middle { border-left:1px solid red; border-right:1px solid red; background:#6FACD0; margin-left:170px; margin-right:170px;}/* mac hide and combat ie's 3 pixel jog \*/* html #centre{overflow:hidden;float:left;width:100%}* html #middle {height:1%;}/* end hide*/#footer { clear:both; border-top:1px solid red; border-bottom:1px solid red; height:50px; background:yellow; text-align:center;}h1,h3,p {margin-top:0}img{float:right;}.clearer{ height:1px; overflow:hidden; margin-top:-1px; clear:both;}</style></head><body><div id="container"> <div id="header"> <h1>Header</h1> </div> <div id="middle"> <div id="left"> <p>Left Content :</p> <p>Left Content :</p> <p>Left Content :</p> <p>Left Content :</p> <p>Left Content :</p> </div> <div id="right"> <p>Right Content :</p> <p>Right Content :</p> <p>Right Content :</p> </div> <div id="centre"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p> </div> <div class="clearer"></div> </div> <div id="footer"> <h3>Footer - <a href="3colfixedtest_4.htm">Back to Main Demo</a> - Footer</h3> </div></div></body></html> Link to comment Share on other sites More sharing options...
SmokingMan Posted October 19, 2006 Author Share Posted October 19, 2006 I posted the link so you could go & look at it, but here's the code.CSS .wrapper {width: 100%; height: auto; background: transparent; background-color: #ffffff; border: none; } .banner {margin: auto; width: 90%; height: auto; position: relative; border: none; text-align: center; background: transparent; background-color: #ffffff; } .lcontainer {margin-left: .5%; width: 19.5%; height: auto; padding: 5px; float: left; text-align: justify; background: transparent; background-color: #99ffcc; }.ccontainer {margin-left: 21.1%; width: 57%; height: auto; padding: 5px; text-align: justify; background: transparent; background-color:#cc99cc; }.rcontainer {margin-left: 79.3%; width: 19.5%; height: auto; padding: 5px; text-align: justify; background: transparent; background-color: #66ff99; } .footer {width: 90%; margin-top: 5px; margin-left: 5%; height: auto; background: transparent; background-color: #ff9966; }.tspacer {width: 100%; height: 15px; background: transparent; background-color: #ffffff; }.bspacer {width: 100%; height: 5px; clear: both; background: transparent; background-color: #ffffff; } XHTML <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><!-- Last Updated 10/15/2006 --><link rel="stylesheet" type="text/css" href="stylesheets/hdh-master-styles.css" /><title>Welcome To The Hot Dog Hut!</title></head><body><div class= "wrapper"> <div class="banner"> <img alt="Hot Dog Hut Logo" src="images/hdh-logo.jpg" height="138" width="758" /> </div> <div class= "tspacer"> </div> <div class="lcontainer"> <p>This column will contain links for specials, events, ordering, and whatever else you can think of.</p> <p>The column will adjust in height according to what it's filled with.</p> </div> <div class= "ccontainer"><p>The menu could go here. List all of the items and their prices. The column height will adjust according to what is put in here.</p> </div> <div class="rcontainer"> <p>We could do more links, advertizing, and other stuff in this column. It will expand vertically to accomodate whatever you put here.</p> </div> <div class= "bspacer"> </div> <div class="footer"> <p>Maybe ads or other things. I'll leave it up to you.</p> <p>The column will adjust in height according to what it's filled with.</p> <p>And none of these elements have to have a background color or outlines. I put in the colors just to highlight them.</p> </div></div></body></html> The top of the right column doesn't want to line up with the other two. Link to comment Share on other sites More sharing options...
BiteMe Posted October 19, 2006 Share Posted October 19, 2006 try giving the rcontainer a negative margin of 48pxmargin-top:-48px;although this is a quick fix as it still wont sit flush on 800x600 restry and have a look later Link to comment Share on other sites More sharing options...
SmokingMan Posted October 21, 2006 Author Share Posted October 21, 2006 I gave the right column "margin-top: -70px" and it worked beautifully with FF. Then I looked at it in IE and , It looks awful. There has to be a way to do this so it works in all browsers, at 800 x 600 and larger. Any ideas?___________________________________I got it. I changed my "margin-left" to start from the preceding element instead of the left of the screen and it works in both FF & IE. I also removed the "margin-top: -70px" as it was no longer needed. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now