Jump to content

Stacking More Of One Div Vertically On Top Of Each Other


Recommended Posts

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 post
Share on other sites

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).

  • Like 1
Link to post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...