Rosky Posted February 25, 2011 Share Posted February 25, 2011 Please, I'm tired of lot of searches and searches in google, forums, etc etc and I cannot resolve this matter.I wanna layout with three columns, one more higher than two others.... but the ever for ever: in IE 8 it shows fine and in FF, Safari not... I know about "position: relative;" in IE but I cannot find how to fix the layout....Please I don't want discuss about MS, W3, etc... I wanna something like---------------------------------------------------- --------------------------............. TITLE TITLE ............................... .......3d. COLUMN........---------------------------------------------------- --------------------------------------------------- ------------------------ .................................------------------------- ------------------------ --------------------------.....1st. COLUMN ................. 2nd. COLUMN ... ................................------------------------- ------------------------ -------------------------------------------------- ------------------------ -------------------------Here CSS /* all page mark */#marconten{position: relative;margin: 0 auto; width: 980px;}/* 2 column left */#colu { position: relative; clear:both; float:left; width: 660px;} /* column container */ .colmask { clear:both; float:left; width:100%; /* width of whole page */ overflow:hidden; /* This chops off any overhanging divs */ } /* common column settings */ .colright, .colmid, .colleft { float:left; width:100%; position:relative; } .col1, .col2, .col3 { float:left; position:relative; padding:0 0 1em 0; overflow:hidden; } /* 2 Column (double page) settings */ .doublepage { background:#eee; /* right column background colour */ } .doublepage .colleft { right:50%; /* right column width */ background:#fff; /* left column background colour */ } .doublepage .col1 { width:46%; /* left column content width (column width minus left and right padding) */ left:52%; /* right column width plus left column left padding */ } .doublepage .col2 { width:46%; /* right column content width (column width minus left and right padding) */ left:56%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */ } ----------------------------Here CSS 1 column right#colder{position: relative;float: right;top: 0px;width: 300px;margin-top: 0px;margin-left: 0px;margin-right: 10px;border: 4px groove #F0D52D;}-------------------------------Here HTML There is DOCTYPE<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">Don't paste all lines for space... go to column lines:<div id="marconten">ALL PAGE MARK<div id="TITLE">A TITLE FOR PAGE BLABLA</div><div id="colder">TEXT-PICS</div><div id="colu"> <div class="colmask doublepage"> <div class="colleft"><div class="col1"><!-- Column 1 start --></div><!-- Column 1 end --><div class="col2"><!-- Column 2 start --></div><!-- Column 2 end --></div><!-- end block colu --></div><!-- end mark content all page -->Thanks Link to comment Share on other sites More sharing options...
cousineaug Posted February 25, 2011 Share Posted February 25, 2011 here is a basic layout that seems to do what you want<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><style type="text/css">.leftside{ float: left; width: 660px; border: 1px solid red;}.rightside{ width: 320px; border: 1px solid blue; float: left;}.column1{ float: left; width: 330px; background-color:#eee;}.column2{ float: left; width: 330px; background-color:#def;}</style></head><body><div class="leftside"><h1>page title goes here</h1><div class="column1">Left Column<p>left</p><p>left</p></div><!--end left column--><div class="column2">Right Column</div><!--end right column--></div><!-- end left-side container--><div class="rightside">Right side starting at the top<p>Right Side</p><p>Right Side</p><p>Right Side</p></div><!--end right side--></body></html> styles are in the header to make it easier to test.note a few thingsthe H1 is not in a div. You may need one if you want to apply background colour to the whole box of the titlebackground colour of he first two columns depends on content or on sizing. If you want them both the same, you will need to apply colour to the LEFTSIDE container.Same goes for the LEFT and the RIGHT...see the borders around the elements. any background colour will stretch tot he size of the container. You may need to wrap everything in another container.Position relative takes content out of the regular flow and can lead to major issues if you use it to move object a great distance. My opinion is that FLOAT is easier to handle. Link to comment Share on other sites More sharing options...
Rosky Posted February 25, 2011 Author Share Posted February 25, 2011 Thanks a lot, your layout works fine, Thanks!!! (In IE 8, and it's not few, so now I have come a long way with this first step... )Edited:Sorry, in FF, Opera, Safari NOT works fine...Left 1 column, correct. Left 2 column is in place of right column, this last one is at side right of "fake" right column, outside all divs and page content. And the correspondent box of left 2 is empty... Link to comment Share on other sites More sharing options...
cousineaug Posted February 25, 2011 Share Posted February 25, 2011 Thanks a lot, your layout works fine, Thanks!!! (In IE 8, and it's not few, so now I have come a long way with this first step... )Edited:Sorry, in FF, Opera, Safari NOT works fine...Left 1 column, correct. Left 2 column is in place of right column, this last one is at side right of "fake" right column, outside all divs and page content. And the correspondent box of left 2 is empty...are you using most recent versions of browsers?I checked in Chrome, Opera Safari, Firefox and all the versions of IE I can find ...and it all looks the same.Note that the right column will wrap if the browser is not WIDE enoughTo avoid this you can wrap the entire content in a div with a width of 980...the total of leftside+rightside Link to comment Share on other sites More sharing options...
Rosky Posted February 25, 2011 Author Share Posted February 25, 2011 are you using most recent versions of browsers?I checked in Chrome, Opera Safari, Firefox and all the versions of IE I can find ...and it all looks the same.Note that the right column will wrap if the browser is not WIDE enoughTo avoid this you can wrap the entire content in a div with a width of 980...the total of leftside+rightsideYes, all browsers is updated to most rcient version, completely...DIV "marcontent" wrap the whole content of page.Also I has declared a new div that wrap all three columns left+right, and don't resolves the matter, FF, Safari and Opera follows showing bad... The only change is that both columns (left1 + left 2) are now one single, one after another verticaly. And the right column is in your place, BUT NOT at top, it is positioned at bottom, just in same line where finish the large column left (joining of left 1+left2)... In ie all is well positioned verticaly, but right column content is at bottom of column. The content starts at same line where block of title ends Link to comment Share on other sites More sharing options...
dsonesuk Posted February 25, 2011 Share Posted February 25, 2011 IF you set the outer wrapper container to width of 980px, but don't remove the 1px borders around the leftside and rightside container, the rightside will wrap down below the others, because with borders the total width of the containers becomes 662px and 322px, making the outer wrapper 4px to short. That is why you should use background colours, instead of borders to distinguish different container elements. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 25, 2011 Share Posted February 25, 2011 here's a modified version of guy solution, with margins, padding set to 0 on all elements, and reset for body p and header tags, including font-size, this makes the styling look identical in all. I have also include IE6 and 7 bug fixes, which i discovered when putting it together. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><style type="text/css">*{padding:0;margin:0;}body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%; margin:10px;}p{margin:0.9em 8px;}h1, h2, h3, h4, h5, h6{margin:0.9em 8px;}h1 {padding:0;font-size:2em;}h2 {padding:0;font-size:1.84em;}h3 {padding:0;font-size:1.68em;}h4{padding:0;font-size:1.52em;}h5 {padding:0;font-size:1.36em;}h6 {padding:0; font-size:1.20em;}#wrapper {width:980px; margin:0 auto; background-color:#FFFF99; overflow:hidden;}#header {overflow:hidden;float:left; width:100%;} /* used to remove spacing under column2 for IE7 only*/.leftside{float: left;width: 660px;background-color:#C90;}.rightside{width: 320px;background-color:#9FF;float: left;}.column1{float: left;width: 330px;background-color:#eee;}.column2{float: left;width: 330px;background-color:#def;margin-right:0 !important;margin-right:-2px; /* fix IE6 duplicate character bug */}</style></head><body><div id="wrapper"> <div class="leftside"> <div id="header"><h1>page title goes here</h1></div><!-- header container --> <div class="column1"> <p>Left Column</p> <p>left</p> <p>left</p> </div><!-- end left column --> <div class="column2"> <p>Right column</p> <p>Right column</p> <p>Right column</p> <p>Right column</p> </div> <!-- end right column --> </div><!-- end left-side container --> <div class="rightside"> <p>Right side starting at the top</p> <p>Right Side</p> <p>Right Side</p> <p>Right Side</p> </div><!-- end right side --> </div><!-- end wrapper --></body></html> Link to comment Share on other sites More sharing options...
Rosky Posted February 25, 2011 Author Share Posted February 25, 2011 here's a modified version of guy solution, with margins, padding set to 0 on all elements, and reset for body p and header tags, including font-size, this makes the styling look identical in all. I have also include IE6 and 7 bug fixes, which i discovered when putting it together.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><style type="text/css">*{padding:0;margin:0;}body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%; margin:10px;}p{margin:0.9em 8px;}h1, h2, h3, h4, h5, h6{margin:0.9em 8px;}h1 {padding:0;font-size:2em;}h2 {padding:0;font-size:1.84em;}h3 {padding:0;font-size:1.68em;}h4{padding:0;font-size:1.52em;}h5 {padding:0;font-size:1.36em;}h6 {padding:0; font-size:1.20em;}#wrapper {width:980px; margin:0 auto; background-color:#FFFF99; overflow:hidden;}#header {overflow:hidden;float:left; width:100%;} /* used to remove spacing under column2 for IE7 only*/.leftside{float: left;width: 660px;background-color:#C90;}.rightside{width: 320px;background-color:#9FF;float: left;}.column1{float: left;width: 330px;background-color:#eee;}.column2{float: left;width: 330px;background-color:#def;margin-right:0 !important;margin-right:-2px; /* fix IE6 duplicate character bug */}</style></head><body><div id="wrapper"> <div class="leftside"> <div id="header"><h1>page title goes here</h1></div><!-- header container --> <div class="column1"> <p>Left Column</p> <p>left</p> <p>left</p> </div><!-- end left column --> <div class="column2"> <p>Right column</p> <p>Right column</p> <p>Right column</p> <p>Right column</p> </div> <!-- end right column --> </div><!-- end left-side container --> <div class="rightside"> <p>Right side starting at the top</p> <p>Right Side</p> <p>Right Side</p> <p>Right Side</p> </div><!-- end right side --> </div><!-- end wrapper --></body></html> Thanks Guy Cousineau and dsonesuk !!!Thousand of thanks, guys!!!! Your helping has open my eyes, I found the bug in my code because your explanations guided me to search margins, paddings, all that should has added more for design that for clean code... The thing was a padding in a background-image on first column, moving all flow content into followings columns...Your warnings about rigour in measurements is very consistent, dsonesuk I has learning a lot, thanks!!! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.