Maxim Gershkovich Maxim Gershkovich - 2 months ago 20
CSS Question

Split page vertically using CSS

Sorry guys for the really simple question but I have tried to float one div left and one right with predefined widths along these lines

<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>


Although this 'mostly' works it seems to mess up the other elements on the page below it.

So what is the correct why to split a HTML page vertically into two parts using CSS without effecting other elements on the page?

Answer

you can use..

<div style="width: 100%;">
   <div style="float:left; width: 80%">
   </div>
   <div style="float:right;">
   </div>
</div>
<div style="clear:both"></div>

now element below this will not be affected.