I have a 3 column css layout and for some reason it is not working correctly. ye, it does display the middle content 1st which is the objective. but after 5 hours, I need some input.. please help. <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> html,body{margin:0;padding:0} body{font: 76% Verdana, Arial, Helvetica, sans-serif;text-align:center} p{margin:0 10px 10px} a{color: #981793;/*padding:10px*/}/*Styles for the main header at the top. */ h1 {font-size:16px; font-weight:bold; color:#000080;} h1 {margin-bottom:0em;} h2 {font-size:13px; font-weight:bold; color:#000080; font-style:italics;} h3 {font-size:12px;} .nobreak {margin-top:0em; margin-bottom:0em;} .small {font-size:9px;} div#Header { color:#ffffff; padding-top:12px; padding-bottom:12px; padding-left:20px; background-color: #FFFFFF; align-text: right; color: #333300; } div#Header a { font-weight:normal; font-size:27px; text-decoration:none; background-color: #FFFFFF; color:#323232; } /*Styles for the main header menus. */ div#HeaderMenus { color:#000000; height:1.2em; line-height:1.2em; font-family: Verdana, Helvetica, sans-serif; font-size: 1.2em; padding-left:11px; margin:0 0 10px 0; background-color: #7FA2CA; border-bottom:solid 2px #a9a9a9; } div#HeaderMenus ul { padding: 0 0 0 0; margin: 0 0 0 0; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold; } div#HeaderMenus li { float:left; display: inline; list-style-type:none; } div#HeaderMenus li a { display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 70%;} } div#HeaderMenus .selected { color: #336699; text-decoration: none; background-color:inherit; } div#HeaderMenus a:hover { background-color:inherit; color: #323232; text-decoration: none; } div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color:#79B30B} div#container{text-align:left} div#content p {color:#494949; text-align: justify; background-color:inherit;} div#navigation{background:#FFF; line-height: 1.4em; color: #333300; height: 100%;} div#extra{background:#FFFFF6; line-height: 1.4em; color: #333300; height: 100%;} div#footer{background: #FFF;color: #333300;} div#footer p{margin:0;padding:5px 10px;} div#container{width:800px;margin:0 auto;} div#wrapper{float:left;width:100%;} div#content{margin: 0 175px; line-height:1.6em; padding: 0 8px 0 10px; border-right: 1px solid #DDD;} div#content a { text-decoration: none; background-color:inherit; color: #000066; margin: 0px; } div#content img { display:inline; color: inherit; background-color:inherit; border: 2px solid #79A3C1; }/* div#content h2 { color:#000000; font-size: 1.5em; margin: 0 0 0.5em 0; background-color:inherit; text-align: left; }*/ div#navigation{float:left;width:175px;margin-left:-175px;} div#extra{float:left;width:175px;margin-left:-800px} div#footer{clear:left; border-top: 1px solid #ddd; width: 800px; text-align: center; font-size: 0.9em; line-height: 1.6em; height: auto;} div#footer a { color: #000099; background-color: inherit; text-decoration: none; } #footer a:hover { text-decoration: underline; } .right_left { float: left; width: 175px; /*295px;*/ padding: 10px; background: #efefef /* was #f2f2f2 url(corner.gif) no-repeat bottom right*/; color: #626262; border-bottom: 1px; style: dotted; color: #999999; } .right_right { float: right; width: 175px;/* 296 */ padding: 13px; margin-right: 5px; background: #efefef /* was #f2f2f2 url(corner.gif) no-repeat bottom right*/; color: #626262; border-bottom:2px; style: solid; color: #000000;/*border-bottom: 1px; style: dotted; color: #999999;*/ border-right:2px; style: solid; color: #000000; border-left:2px; color: #; border-top:2px; color: #000000; } /*Styles for other classes. */ .AlignLeft { margin: 10px 10px 5px 0; float: left; } .AlignRight { margin: 10px 0 0 10px; float: right; } </style> </head> <body> <div id="container"> <div id="Header"><h1>Header</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Content here.</strong> <p align="center"> <h1 align="center"></h1> <h2 class="nobreak"></h2></p> <a href="50.htm"><b>Fair</b></a> and Plain<b><a href="50.htm">50</a></b>. </p><p align="center"><img src="images/testimonial.gif" alt=" border="0" height="63" width="635"></p> <h2 align="center"><i>Our Services Include...</i></h2> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p> <div class="right_left"> <h3 class="nobreak" align="center">»<a href="32.htm"></a></h3><center> <a href="30.htm"> </center> <p><br /> <br /> <br /> </p> </div> <p><div width="679"><p><img src="im.gif" height="27" width="141" margin-left="116"> <a class="nobreak" href="talk.htm"></a></p> </div>--> <div id="navigation"> <p><strong>2) Navigation here.</strong><img src="58.jpg" alt="" height="600" width="78" border="0"--> </p> </div> <div id="extra"> <p><strong>3) More stuff here.</strong> <img src="images/image2_left.gif" height="275" width="125"> </p> </div> <div id="footer"> <p align="center"><font face="Geneva, Arial, Helvetica, san-serif" size="2"> :: <a href="faq.htm">Faq</a> :: :: <a href="about-us.htm">About Us</a> <a href="contact.htm"></a> </font></p></div> </div> </body> </html> Code (markup): The real problem is when I put images on the left and right sides they extend below the footer and go outside of the container. This method is a template and works in IE and FF. But apparently not when there is an 700 height image in a side bar, Please try it yourself and see what I mean. OR I am missing something ? Thanks
Well, wasted extra DIV's and a nasty case of classitus means the layout is more complex than need be. The lack of anything approaching sensible indentation of code or formatting makes it a maintennance nightmare, which is likely a contributing factor to your 41 validation errors... much less the wasted non-condensed CSS properties and oddball mix of formatting styles there... and that's before we talk semantics. Multiple H1's, bold tags inconsistantly around elements that should probably just be styled directly, presentational classnames, inlined presentation, inproper use of paragraphs... unclosed paragraphs, paragraphs wrapping non-paragraph content, the list goes on and on - which is kind of scary for less than 1.5k of actual body code (which I suspect should only be half that!) Unfortunately because it's mis-rendered I can't figure out where anything is supposed to actually go - do you have an image of the final layout?
I am not seeing how you found sooooooo many wasted div's.. it's the same as the original template ( not my design ). All that was added was a clients content with div's and paragraphs for styling inside the template. Here is the original template...the real problem lies when you add a 740 height image and a 240 image to the left and right columns. The extra div's u mention may be there because the main content is positioned 1st in code. So, If you or anyone else could give some suggestions on why when images are inserted in those R & L columns, and it leaves a 660 to 700px space beneath the footer it would be helpful vs. working on other errors which can be taken care of later. Thanks <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Layout 8</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="generator" content="Microsoft FrontPage 4.0"> <style type="text/css"> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif;text-align:center} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px}/*Styles for the main header at the top. */ div#Header { color:#ffffff; padding-top:12px; padding-bottom:12px; padding-left:20px; background-color: #FFFFFF; align-text: right; color: #333300; } div#Header a { font-weight:normal; font-size:27px; text-decoration:none; background-color: #FFFFFF; color:#323232; } /*Styles for the main header menus. */ div#HeaderMenus { color:#000000; height:1.2em; line-height:1.2em; font-family: Verdana, Helvetica, sans-serif; font-size: 1.2em; padding-left:11px; margin:0 0 10px 0; background-color: #7FA2CA; border-bottom:solid 2px #a9a9a9; } div#HeaderMenus ul { padding: 0 0 0 0; margin: 0 0 0 0; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold; } div#HeaderMenus li { float:left; display: inline; list-style-type:none; } div#HeaderMenus li a { display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 70%;} } div#HeaderMenus .selected { color: #336699; text-decoration: none; background-color:inherit; } div#HeaderMenus a:hover { background-color:inherit; color: #323232; text-decoration: none; } div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#container{text-align:left} div#content p {color:#494949; text-align: justify; background-color:inherit;} div#navigation{background:#B9CAFF; line-height: 1.4em; color: #333300; height: 100%;} div#extra{background:#FF8539; line-height: 1.4em; color: #333300; height: 100%;} div#footer{background: #FFF;color: #333300} div#footer p{margin:0;padding:5px 10px} div#container{width:800px;margin:0 auto} div#wrapper{float:left;width:100%} div#content{margin: 0 175px; line-height:1.6em; padding: 0 8px 0 10px; border-right: 1px solid #DDD;} div#content a { text-decoration: none; background-color:inherit; color: #000066; } div#content img { display:inline; color: inherit; background-color:inherit; border: 2px solid #79A3C1; } div#content h2 { color:#000000; font-size: 1.5em; margin: 0 0 0.5em 0; background-color:inherit; text-align: left; } div#navigation{float:left;width:175px;margin-left:-175px;} div#extra{float:left;width:175px;margin-left:-800px} div#footer{clear:left; border-top: 1px solid #ddd; width: 800px; text-align: center; font-size: 0.9em; line-height: 1.6em;} div#footer a { color: #000099; background-color: inherit; text-decoration: none; } #footer a:hover { text-decoration: underline; } /*Styles for other classes. */ .AlignLeft { margin: 10px 10px 5px 0; float: left; } .AlignRight { margin: 10px 0 0 10px; float: right; } </style> </head> <body> <div id="container"> <div id="Header"><h1>Header</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p> <p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p> <p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p> <p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very text very make make very fill fill long make very filler column very long very filler sillytext very make make very fill fill long make very filler column very long very filler sillycolumn make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very text very make make very fill fill long make very filler column very long very filler sillytext very make make very fill fill long make very filler column very long very filler sillcolumn make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very text very make make very fill fill long make very filler column very long very filler sillytext very make make very fill fill long make very filler column very long very filler sill</p> </div> </div> <div id="navigation"> <p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler okna dwhat if ai add more content rrrrrrrrrrrrrrrrrrrrrrrrrrrrrr </p> </div> <div id="extra"> <p><strong>3) More stuff here.</strong> column long make silly silly filler silly very very very long column filler fill make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p> </div> <div id="footer"><p>Here it goes the footer</p></div> </div> </body> </html> Code (markup):
Well, this right here: <meta name="generator" content="Microsoft FrontPage 4.0"> gives you a 99.99% chance of the layout NEVER working in FF, Opera or Safari - and is a good indication you are working off the WRONG template. Going through the HTML and CSS is proof enough of that as it's some of the worst vomit I've seen for code in quite some time. See those two 'align' classes? bad code. See how in yours you added the align="center" properties and those 'nobreak' classes? That's called presentational classnames and presentational markup - very 1997 and a waste of code. Though I THINK I see your problem - you are trying to add 240 pixel wide images to 175 pixel wide columns - do we see a problem with that? Also, you realize that at 800 friendly (which the #container being 800 wide this is NOT, at which point one might as well bite the bullet and make #container 992px wide to target 1024 wide) that 240px wide sidebars only leaves a crappy little 200pixel stripe for the content area, right? Here's how I'd code that same template: <!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" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Three column Layout</title> <style type="text/css"> * { margin:0; padding:0 } img { border:0; } body{ font:normal 75%/140% arial,helvetica,sans-serif; text-align:center /* IE 5.x centering of #container */ } p { padding:0.5em 0; } #container { width:992px; text-align:left; margin:0 auto; position:relative; /* make left column use #container width for positioning */ } h1 { padding:0.25em 0; font:bold 160%/120% arial,helvetica,sans-serif; } h2 { padding:0.5em 8px 0; font:bold 140%/120% arial,helvetica,sans-serif; } #contentWrapper { float:left; width:100%; padding-bottom:8px; } #content { margin:0 248px; padding:8px; border:solid #AAA; border-width:0 1px; } #sideBar1, #sideBar2 { float:left; width:240px; } #sideBar1 { margin-right:-240px; position:relative; left:-100%; background:#F80; } #sideBar2 { margin-left:-240px; background:#88F; } #sideBar1 p, #sideBar2 p { padding:0.5em 8px; } #footer { clear:both; /* JUST IN CASE */ padding:8px 0; text-align:center; border-top:1px solid #AAA; } </style> </head><body> <div id="container"> <h1>Header</h1> <div id="contentWrapper"><div id="content"> <h2>Content title here.</h2> <p> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very. </p><p> very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p><p> fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p><p> column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very text very make make very fill fill long make very filler column very long very filler sillytext very make make very fill fill long make very filler column very long very filler sillycolumn make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very text very make make very fill fill long make very filler column very long very filler sillytext very make make very fill fill long make very filler column very long very filler sillcolumn make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very text very make make very fill fill long make very filler column very long very filler sillytext very make make very fill fill long make very filler column very long very filler sill </p> <!-- #container,#containerWrapper --></div></div> <div id="sideBar1"> <h2>Navigation here.</h2> <p> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler okna dwhat if ai add more content rrrrrrrrrrrrrrrrrrrrrrrrrrrrrr </p> <!-- #sideBar1 --></div> <div id="sideBar2"> <h2>More stuff here.</h2> <p> column long make silly silly filler silly very very very long column filler fill make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p> <!-- #sideBar2 --></div> <div id="footer"> The footer goes here. Figured I'd fix the engrish while at it. </div> <!-- #container --></div> </body></html> Code (markup): I widened the sidebars to 240px, widened the whole page to 992px so you don't have this undersized unusable stripe as the content area, and deleted all the unneccesary rubbish that wasn't actually DOING anything. Put headers in each section to mark said sections properly, etc, etc, etc.
D you make me laugh, Im not sure if I should laugh at this or you telling them that this is how its done hehe D's the man, he has great opinions and examples on CSS CHEERS
appreciate the help but as far as for the vomit..I didn't care for that comment. AGAIN, this was NOT my template. I searched on the net for a 3 column css template with middle column first. AND the 240 image is the height, not the width. Although, the presentation styles of nobreak and H tags in certain areas may be 1997-ish, there are 2007 Fortune 500 co's still implementing it. So, compliant, semi-compliant or not, If it works in the search engines and you are at the top of Google, Yahoo and MSN for great keywords, keep it and use it....Sorry, that is the goal for us, not so much design compliant but will use your advice on future stuff. your footer part is funny , but I do have int'l friends so they may take offense OTOH, they've made fun of non-speakers of their "idiom" too. oh well. Thanks