DizzyDan Posted November 12, 2010 Share Posted November 12, 2010 I am not sure the best way to go about this.I have a page layout that goes like this.HeaderMainpage consists of a left column, center column, right column.Footerwhat i want the content of the page to max out on 960px wide.basically like this:header is 960px wideleft column 100px wide, Center column 760px wide, right column 100px wide.footer 960px wideNow my question is, how do i set up the divs to have them line up left to right as opposed to top to bottom?Right now i have the page postioned absolute to look the way i want it but i am trying to getaway from that method and cant figure out how to have my divs stack left to right instead of top to bottom. Without absolute positioning its looks like this100px box on top760px box under that 100px box under that when i want100px box, 760px box right of it, 100px box right of that. Link to comment Share on other sites More sharing options...
jeffman Posted November 12, 2010 Share Posted November 12, 2010 For block-level elements to align horizontally, they must use a float rule, and at least some of them must have a defined width. In your case, all your divs have a defined width, so all they need is a float rule. Most developers just use float:left in a situation like this.Float is an odd property, since it effects the next element in the tree, not just itself. To turn off the float state, the next element should have a clear:both ruleNote that if your floating elements have significantly different heights, you run the risk of one element floating under a previous element. This is not quite the same as block-element stacking, but the effect may look similar. Link to comment Share on other sites More sharing options...
DizzyDan Posted November 12, 2010 Author Share Posted November 12, 2010 Works Perfectly! Thank you very much, I do have a follow up question. I wont be doing this just yet but thinking ahead of this sites developement i was pondering what if!What if i want this:100px left column, elastic center column biggest 1000px smallest 500px, 100px right column.So the page width would change to fit different monitor resolutions or even not fully expanded brower windows.Also, would i have to wrap the columns in there own div to controll the height changes that might be assosiated with the elastic center? Link to comment Share on other sites More sharing options...
ShadowMage Posted November 12, 2010 Share Posted November 12, 2010 What if i want this:100px left column, elastic center column biggest 1000px smallest 500px, 100px right column.So the page width would change to fit different monitor resolutions or even not fully expanded brower windows.Also, would i have to wrap the columns in there own div to controll the height changes that might be assosiated with the elastic center?To create an elastic or fluid column just remove the width declaration. It will expand to fit any available width. If you want min/max widths use the min-width and max-width CSS properties.As for the height variations, there are a variety of different techniques to control it, one of which is wrapping the columns in a container. Link to comment Share on other sites More sharing options...
DizzyDan Posted November 12, 2010 Author Share Posted November 12, 2010 Thanks a lot guys, You have been most helpful, as always. Link to comment Share on other sites More sharing options...
ShadowMage Posted November 12, 2010 Share Posted November 12, 2010 Actually I just thought of something. The fluid column can't be floating either or it won't expand. You'll need to float the left column left and the right column right to get it to work. (Be careful with the order of your HTML when doing this, since float affects elements that come after the floated elements) Link to comment Share on other sites More sharing options...
DizzyDan Posted November 12, 2010 Author Share Posted November 12, 2010 Im not at home and cant do the exact code but roughly i would have to do this?CSS #wrap{width:960px;}#leftcolumn{float: left;width: 100px}#centercolumn{float: left;min-width: 500px;max-width: 760px;}#rightcolumn{float: right;width: 100px;} HTML <body><div id="header>header</div><div id= "wrap"> <div id="leftcolumn>left</div> <div id="centercolumn>center</div> <div id="rightcolumn>right</div></div><div id="footer>footer</div></body> Link to comment Share on other sites More sharing options...
ShadowMage Posted November 12, 2010 Share Posted November 12, 2010 Should be pretty close. Just remove the float from the center column (for reasons explained in my previous post). There will undoubtedly be some more tweaking but without testing it out with your real code it's hard to say exactly what will need tweaking.EDIT: Oh, and the order of your HTML is wrong to get the floats to work like you want. Remember, float affects elements that come after the floated element so you need to put the floated columns before your center column like this:<div id= "wrap"> <div id="leftcolumn>left</div> <div id="rightcolumn>right</div> <div id="centercolumn>center</div></div> Link to comment Share on other sites More sharing options...
DizzyDan Posted November 12, 2010 Author Share Posted November 12, 2010 Ok ive tried it but it doesnt work entirely.the header, left column, right column are good but the center column stacks below the other columns when i want it inbetween the left and right and footer fall on top of everything.CSS #centeringwrap{position: relative;width: 962px;margin: 0 auto;border: 1px solid red;}#header{width: 960px;height: 100px;border: 1px solid red;}#contentwrap{width:960px;height:300px;}#leftcolumn{width: 100px;min-height: 200px;float: left;border: 1px solid red;}#centercolumn{width: 760px;min-height: 200px;float: left;border: 1px solid red;}#rightcolumn{width: 100px;min-height: 200px;float: right;border: 1px solid red;}#footer{width: 960px;height: 100px;border: 1px solid red;} HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><link rel="stylesheet" type="text/css" href="style1.css" /><title>TEST</title></head><body> <div id="centeringwrap">centering wrap <div id="header"> <h1>header</h1> </div> <div id="wrap"> <div id="leftcolumn"> <h3>left</h3> </div> <div id="rightcolumn"> <h3>right</h3> </div> <div id="centercolumn"> <h2>center</h2> <h3></h3> <p></p> </div> </div> <div id="footer"> <p>footer</p> </div> </div></body></html>} Link to comment Share on other sites More sharing options...
jeffman Posted November 12, 2010 Share Posted November 12, 2010 Couple things.1. Do you still want the fluid center? If so, why is there a #centeringwrap? That makes everything fixed, not fluid.2. I realize that all your column width rules add up to the width of #centeringwrap. What you have missed is that the borders contribute width ON TOP OF the width rule. #leftcolumn is actually 102px wide, etc. Looks like you picked up on that for #centeringwrap, so I guess you understand the issue. Since the widths of your columns are all defined, none is fluid. They HAVE to fit inside #centeringwrap, but the combined width is several pixels too high. The last div in the group gets pushed down because it is the one that doesn't fit. Always add borders, padding, and margins to your width rule to determine the true width of the element.3. That would not be a problem if #centercolumn had no defined width, because #centercolumn would adjust its width to fit the actual remaining space. And if THAT were the case, you could remove the centering wrap and have that fluid design you mentioned before. Link to comment Share on other sites More sharing options...
DizzyDan Posted November 12, 2010 Author Share Posted November 12, 2010 Couple things.1. Do you still want the fluid center? If so, why is there a #centeringwrap? That makes everything fixed, not fluid.2. I realize that all your column width rules add up to the width of #centeringwrap. What you have missed is that the borders contribute width ON TOP OF the width rule. #leftcolumn is actually 102px wide, etc. Looks like you picked up on that for #centeringwrap, so I guess you understand the issue. Since the widths of your columns are all defined, none is fluid. They HAVE to fit inside #centeringwrap, but the combined width is several pixels too high. The last div in the group gets pushed down because it is the one that doesn't fit. Always add borders, padding, and margins to your width rule to determine the true width of the element.3. That would not be a problem if #centercolumn had no defined width, because #centercolumn would adjust its width to fit the actual remaining space. And if THAT were the case, you could remove the centering wrap and have that fluid design you mentioned before.1. yes fluid center but i want some control over the full fluidness. basically fluid within 960px.2. fixed the px issue of being too much.3. Center works as supposed to!Footer still gets placed on top or maybe under the floating columns.#centeringwrap{position: relative;width: 960px;margin: 0 auto;border: 1px solid blue;}#header{width: 958px;height: 100px;border: 1px solid red;}#contentwrap{max-width:958px;height:300px;}#leftcolumn{width: 100px;min-height: 200px;float: left;border: 1px solid red;}#centercolumn{max-width: 760px;min-width: 500px;min-height: 200px;float: left;border: 1px solid red;}#rightcolumn{width: 100px;min-height: 200px;float: right;border: 1px solid red;}#footer{width: 960px;height: 100px;border: 1px solid red;} Link to comment Share on other sites More sharing options...
jeffman Posted November 13, 2010 Share Posted November 13, 2010 That's float for you. I believe the footer is being affected by the floating columns. It wants to float also. It doesn't make sense to me either, but that's the way. Try adding this ruleset to your CSS: #wrap { overflow:hidden;} Or if you have added a ruleset for #wrap, just add the overflow rule to it. Unless I misremember, that should keep the float from affecting elements outside #wrap. Link to comment Share on other sites More sharing options...
thescientist Posted November 13, 2010 Share Posted November 13, 2010 you can also apply max-width to elements to keep them from getting too wide. Link to comment Share on other sites More sharing options...
DizzyDan Posted November 13, 2010 Author Share Posted November 13, 2010 That's float for you. I believe the footer is being affected by the floating columns. It wants to float also. It doesn't make sense to me either, but that's the way. Try adding this ruleset to your CSS:#wrap { overflow:hidden;} Or if you have added a ruleset for #wrap, just add the overflow rule to it. Unless I misremember, that should keep the float from affecting elements outside #wrap. Worked like a charm, but the wrap has no height set would there be any overflow?also, the header and footer arent liquid. what do i need to fix for that to be as liquid as the wrap section. Link to comment Share on other sites More sharing options...
jeffman Posted November 13, 2010 Share Posted November 13, 2010 Strangely enough, you are already overflowing. If you check your DOM Inspector and examine the offsetHeight of #wrap, it is probably 0. It contains the floating elements in a logical sense, but not in a physical sense. For this reason, floating elements do not cause their containers to grow. Giving the container an overflow property somehow reverses this property.Quirksmode (PPK) is a leading authority on web stuff. He has a write up on this trick. As you will read, it seems to have been discovered accidentally.So vertical overflow is not an issue. The div will just grow. Horizontal overflow could possibly be. If it looks like things on the right side of #wrap are getting cut off, then dimensions might need to be changed, or change the value of overflow to auto. (Though auto might trigger scrollbars, so not always the best solution.) Link to comment Share on other sites More sharing options...
DizzyDan Posted November 13, 2010 Author Share Posted November 13, 2010 Ok new issue,The divs float correctly. When i shrink the brower window the center column gets pushed out and goes under the left column.I want it to stay in the center and be fluid between 500px and 700px. if its any more than 700px it doesnt expand any more and under 500px it doesnt shrink but when its less that 500px it moves out of position and end up underneight the floating columns instead of inline with them.CSS p {font-family: "Verdana";font-size: 12px;}#centeringwrap{position: relative;max-width: 960px;min-width: 706px;margin: 0 auto;border: 1px solid blue;}#header{max-width: 958px;min-width: 500px;height: 100px;border: 1px solid red;}#wrap{overflow:auto;min-width: 720px;border: 1px solid green;}#leftcolumn{width: 100px;min-height: 200px;float: left;border: 1px solid yellow;}#centercolumn{max-width: 700px;min-width: 100px;min-height: 200px;float: left;border: 1px solid purple;}#rightcolumn{width: 100px;min-height: 200px;float: right;border: 1px solid orange;}#footer{max-width: 960px;min-width: 706px;height: 100px;border: 1px solid black;} HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><link rel="stylesheet" type="text/css" href="style1.css" /><title>TEST</title></head><body> <div id="centeringwrap"> <div id="header"> <h1>header</h1> </div> <div id="wrap"> <div id="leftcolumn"> <h3>left</h3> </div> <div id="rightcolumn"> <h3>right</h3> </div> <div id="centercolumn"> <h2>center</h2> <h3>center center center center center center center center center center center center center center center center center center center center </h3> <p></p> </div> </div> <div id="footer"> <p>footer</p> </div> </div></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted November 13, 2010 Share Posted November 13, 2010 Try removing the float rule from #centercolumn. It will continue to float because the div before it is floating. Somehow, floating on your own and being made to float create different behaviors. Link to comment Share on other sites More sharing options...
DizzyDan Posted November 14, 2010 Author Share Posted November 14, 2010 Try removing the float rule from #centercolumn. It will continue to float because the div before it is floating. Somehow, floating on your own and being made to float create different behaviors.pefect. New issue, Sorry! you have been so helpful thank you so much. You dont have to be so quick on the replies!New issue, since the center issue was fixed now what happens is when the height increases on center, i want left and right height to increase with it. they seem stuck at min height. and the text from center gets put under them. i want the extra text from center to stay in center. does that make sense?Also there seems to be padding right of center but not left of center. i was thinking center would be in own box next to the others. it doesnt seem that way.CSSp {font-family: "Verdana";font-size: 12px;}#centeringwrap{position: relative;max-width: 960px;min-width: 706px;margin: 0 auto;border: 1px solid blue;}#header{max-width: 958px;min-width: 500px;height: 100px;border: 1px solid red;}#wrap{overflow:auto;min-width: 720px;border: 1px solid green;}#leftcolumn{width: 100px;min-height: 200px;float: left;border: 1px solid yellow;}#centercolumn{min-width: 100px;min-height: 200px;border: 1px solid purple;}#rightcolumn{width: 100px;min-height: 200px;float: right;border: 1px solid orange;}#footer{max-width: 960px;min-width: 706px;height: 100px;border: 1px solid black;} HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><link rel="stylesheet" type="text/css" href="style1.css" /><title>TEST</title></head><body> <div id="centeringwrap"> <div id="header"> <h1>header</h1> </div> <div id="wrap"> <div id="leftcolumn"> <h3>left</h3> </div> <div id="rightcolumn"> <h3>right</h3> </div> <div id="centercolumn"> <h2>center</h2> <h3>center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center </h3> <p></p> </div> </div> <div id="footer"> <p>footer</p> </div> </div></body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted November 15, 2010 Share Posted November 15, 2010 Give the center column an overflow declaration (hidden or auto) and it will constrain it's borders to the width between left and right column. Link to comment Share on other sites More sharing options...
DizzyDan Posted November 15, 2010 Author Share Posted November 15, 2010 Give the center column an overflow declaration (hidden or auto) and it will constrain it's borders to the width between left and right column.BEAUTIFUL, that felt just as good as the 1st sip of beer after a long day. I want to truly thank everyone for the help I recieved on this , THANK YOU EVERYONE!! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.