Geek asks and answers

CSS Layout - Mixing Absolute and Floating Positioning

I have this basic CSS layout:

CSS

Left column

The box scrolls the length of the page on the left side.

width:16.5%, position:absolute; top:20px; left:1.5%;

It contains two inner drawers, full width, located to the left of each other.

Main body (right column)

This does not swim:

width: 82%;
margin-left: 18%;

Justification

I use many floating-div layouts in the main body that regularly require clearfix elements, such as <div style="clear:both"></div>(styles shown inline for ease).

These clearfix elements got confused in my original floating left column, so I responded by making an absolute left column. That way I can clean, however, I need for a simple layout in the main body.

Problem

Left column + The main body is contained in a wrapper with a visible background.

, , . .

, float:left , clearfixes ?

+3
2

, .. , (, ) ). , , ( ), . JavaScript, . , , .

+1

:

position:absolute;
top:0px;
bottom: 0px;

, : - .

, ( , , : ).

, , , .

0

More articles:


All Articles