Quinnie11 Posted February 11, 2007 Share Posted February 11, 2007 I have a three column layout and I've just put a lot of new divs within the div #centercontent so I can try and arrange another three columns within the center div. I've relatively positioned the divs but they still appear below each other.Any ideas? #one { position:relative; left:15px; top:15px;}#two { position:relative; left:15px; top:15px;}#three { position:relative; left:15px; top:15px;}#four { position:relative; left:15px; top:15px;}#five { position:relative; left:15px; top:15px;}#six { position:relative; left:15px; top:15px;} Link to comment Share on other sites More sharing options...
miles5150 Posted February 11, 2007 Share Posted February 11, 2007 Hi there,If I remember correctly, I think the best way is te relatively position the main content div. The 3 divs inside can be absolute positioned. You will find that #id {position:absolute; left: 0; top: 0;} will put your left column at the left and top of your main div.The second and third column will need to be worked out depending on your column measurments.Please correct me if I'm wrong folks!Best wishesJustinMaster CIW Designer (But still learning too). Link to comment Share on other sites More sharing options...
veralee Posted February 11, 2007 Share Posted February 11, 2007 I might not understand correctly but if the idea is to get the 6 boxes in a single line try the following. #one {position:relative; left:15px; top:15px; float: left}#two {position:relative; left:15px; top:15px; float: left}#three {position:relative; left:15px; top:15px; float: left}#four {position:relative; left:15px; top:15px; float: left}#five {position:relative; left:15px; top:15px; float: left}#six {position:relative; left:15px; top:15px;}} Link to comment Share on other sites More sharing options...
otenjoxi Posted February 13, 2007 Share Posted February 13, 2007 I have a three column layout and I've just put a lot of new divs within the div #centercontent so I can try and arrange another three columns within the center div.* Please read post below, I left this here for info. *Lets say here is what you are trying to accomplish:<div id="centerContent"> <div id="one">...</div> <div id="two">...</div> <div id="three">...</div> <div id="four">...</div> <div id="five">...</div> <div id="six">...</div></div>Well, in your current code:#one{ position: relative; left: 15px; top: 15px;}Each of the nested divs above will be on their own line and will stretch 100% of the width of the parent container (#centerContent) which is default behavior for divs. They will also be moved relative to their original position. If you want to see what I mean, assign each of the divs a background color.Try this:#one,#two,#three,#four,#five,#six{ float: left; width: 25px; /* of course change this to whatever is necessary */}That'll get you six divs that are 25 pixels wide and will line up next to each other. You should follow that (because they are floats) with a clearing div or the like.For example:<div class="clear"> </div>The associated code:.clear{ clear: both;}There are more advanced ways to clear floats, but this works too.I can't really say much more because I don't know enough information.Good luck. Link to comment Share on other sites More sharing options...
otenjoxi Posted February 13, 2007 Share Posted February 13, 2007 Hahaha, crap! I need to learn to read... sheesh. I'll leave my post above for random information...It depends on what kind of three-column layout you're using, but I'll give it a go.#nestedLeft{ float: left; width: 150px;}#nestedRight{ float: right; width: 150px;}#nestedMiddle{ margin: 0 150px; /* shortcut: first number is top and bottom, second is right and left */}A clearing solution afterwards and that will work. The left and right margins on the nested middle need to be the width or greater of the left and right floats respectively. There will be some quirks in Internet Explorer with this solution, most likely the 3-pixel crap. You could also use absolute positioning but you lose some design control. Make sure the right and left floats are inside of the #centerContent but before the #nestedMiddle. If you need more help let me know. Gotta run! Link to comment Share on other sites More sharing options...
Quinnie11 Posted February 18, 2007 Author Share Posted February 18, 2007 Thanks everyone that was all great help. I'm finally begining to "get" css but relative positioning and floats still confuse me. Due to time issues I absolutely positioned all the image divs into three columns but they were positioned absolutely relative to the whole page not the div they were in. <html><div id="centrecontent"> <div id="one"> </div> <div id="two> </div></div></html>css:#one { position:absolute; left:439px; top:225px;}With this code div one is displayed 439px from the left of the screen and 225px from the top of the screen wereas I thought they'd be displayed 439px from the left and 225px from the top of #centercontent. Link to comment Share on other sites More sharing options...
jlhaslip Posted February 18, 2007 Share Posted February 18, 2007 Information on clearing Floats 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