pdxGray Posted November 9, 2011 Share Posted November 9, 2011 what is a good way to stack more than one div on top of each other.for example the left column has three div one on top of the other, midle column has three and right most column four?I tried putting the three in the left column in an other container div & floating left, worked. But it placed a div I had floating right & top, to floating right and bottom.All this divs are in a wrapper div as well.thank yougray Link to comment Share on other sites More sharing options...
dsonesuk Posted November 9, 2011 Share Posted November 9, 2011 If you want to stack div above each other don't use float, by default they are a block element which occupy the total width of the parent container. Using floated div elements, will cause them not only be placed left or right, but also shrink to their child elements width (unless a fixed is width defined), and none floated elements below them to merge with them (unless clear:both; is used on non floated element). Floated elements that are to wide to to sit side by side in a row, will stack above each other, but to the floated position they are given (left, right). Link to comment Share on other sites More sharing options...
pdxGray Posted November 9, 2011 Author Share Posted November 9, 2011 thanks Dsonesuk will got try it out some more. Link to comment Share on other sites More sharing options...
pdxGray Posted November 10, 2011 Author Share Posted November 10, 2011 I have three columns and a footer, the footer property is set at clear: both;but it only works on two of the columns, the left and center column. So the right floated set of div is not cleared by the footer.I have searched http://www.w3schools.com for a way around it. Can't find it. Any suggestions please?thanksG Link to comment Share on other sites More sharing options...
dsonesuk Posted November 10, 2011 Share Posted November 10, 2011 It would be better if you supplied some code. IF the left column is floated left, the middle column is none floated, and the right column is right floated. the non floated middle column, will merge with the left, but being a non floated block element it will prevent the floated right column merging up with itself, and left column. The FIX in this case, is to place the middle column BELOW yes! below the left and right column. (remember "and none floated elements below them to merge with them") If they are all floated then something is causing them to be to wide to fit in a row. No <doctype> specified will cause using padding margins, borders etc to be added to the width of each elements especially IE. Other than that I don't know what else to suggest without seeing the actual code. Link to comment Share on other sites More sharing options...
pdxGray Posted November 11, 2011 Author Share Posted November 11, 2011 Thank you! will give it a try and update if it is still a prob will go & paste code.G Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.