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?

Answers


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.


Just add overflow:auto; to parent div

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

Working Demo


I guess your elements on the page messes up because you don't clear out your floats, check this out

Demo

HTML

<div class="wrap">
    <div class="floatleft"></div>
    <div class="floatright"></div>
    <div style="clear: both;"></div>
</div>

CSS

.wrap {
    width: 100%;
}

.floatleft {
    float:left; 
    width: 80%;
    background-color: #ff0000;
    height: 400px;
}

.floatright {
float: right;
    background-color: #00ff00;
    height: 400px;
    width: 20%;
}

There can also be a solution by having both float to left.

Try this out:

Working Demo

P.S. This is just an improvement of Ankit's Answer


Check out this fiddle:

http://jsfiddle.net/G6N5T/1574/

CSS/HTML code:

.wrap {
    width: 100%;
    overflow:auto;
}

.fleft {
    float:left; 
    width: 33%;
background:lightblue;
    height: 400px;
}

.fcenter{
    float:left;
    width: 33%;
    background:lightgreen;
    height:400px;
    margin-left:0.25%;
}

.fright {
float: right;
    background:pink;
    height: 400px;
    width: 33.5%;
    
}
<div class="wrap">
    <!--Updated on 10/8/2016; fixed center alignment percentage-->
    <div class="fleft">Left</div>
    <div class="fcenter">Center</div>
    <div class="fright">Right</div>
</div>

Alternatively, you can also use a special function known as the linear-gradient() function to split browser screen into two equal halves. Check out the following code snippet:

body
{
  background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
}

Here, linear-gradient() function accepts three arguments

  1. 90deg for vertical division of screen.( Similarly, you can use 180deg for horizontal division of screen)
  2. lightblue color is used to represent the left half of the screen.
  3. skyblue color has been used to represent the right half of the split screen. Here, 50% has been used for equal division of the browser screen. You can use any other value if you don't want an equal division of the screen. Hope this helps. :) Happy Coding!

Need Your Help

UITableView separator line disappears when selecting cells in iOS7

uitableview ios7

In my tableView I set a separator line between cells. I am allowing selection of multiple cells. Here's my code for setting selected cell background color:

Get weekdays in English in R

r date locale weekday

I am using R outside the US and I got everything working in English, but the result of weekdays() is still in Spanish: