Search code examples
csslayoutpositioning

How to achieve layout without using absolute/relative positioning?

Here's my current layout achieved using absolute/relative positioning:

http://jsfiddle.net/keruilin/xB8Bt/50/

To make a long story short, the use of absolute/relative positioning is causing the content not to display properly in a JavaScript pop-up.

What other way can I achieve the layout without using absolute/relative positioning?

Solution

  • If I simply remove all the position: absolute; and position: relative; the layout does not change substantially (perhaps some margins and padding are tweaked a bit, but that's easily remedied). The elements stay in their same basic locations.

    This is because you've already got in place the float: left; and clear: both; rules required to position elements where they belong.

    Unless this example is oversimplified from the real markup, you shouldn't have any trouble stripping out the absolute/relative positioning.