Split page vertically using CSS - css

Question

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 1

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.

Answer 2

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

Answer 3

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%;
}

Answer 4

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

Answer 5

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>
This uses the CSS float property for left, right, and center alignments of divs on a page.

Answer 6

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
90deg for vertical division of screen.( Similarly, you can use 180deg for horizontal division of screen)
lightblue color is used to represent the left half of the screen.
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!

Answer 7

Here is the flex-box approach:
CSS
.parent {
display:flex;
height:100vh;
}
.child{
flex-grow:1;
}
.left{
background:#ddd;
}
.center{
background:#666;
}
.right{
background:#999;
}
HTML
<div class="parent">
<div class="child left">Left</div>
<div class="child center">Center</div>
<div class="child right">Right</div>
</div>
You can try the same in js fiddle.