Split page vertically using 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   lt div style  width  100    gt       lt div style  float left  width  80   gt       lt  div gt       lt div style  float right   gt       lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

Just add overflow auto  to parent div   lt div style  width  100  overflow auto   gt       lt div style  float left  width  80   gt       lt  div gt       lt div style  float right   gt       lt  div gt   lt  div gt    Working Demo

User · Answer

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   lt div class  parent  gt       lt div class  child left  gt Left lt  div gt       lt div class  child center  gt Center lt  div gt       lt div class  child right  gt Right lt  div gt   lt  div gt    You can try the same in js fiddle

User · Answer

you can use     lt div style  width  100    gt      lt div style  float left  width  80   gt      lt  div gt      lt div style  float right   gt      lt  div gt   lt  div gt   lt div style  clear both  gt  lt  div gt    now element below this will not be affected

User · Answer

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

User · Answer

Check out this fiddle   http   jsfiddle net G6N5T 1574   CSS HTML code    x000D   x000D   wrap   x000D      width  100   x000D      overflow auto  x000D    x000D   x000D   fleft   x000D      float left   x000D      width  33   x000D  background lightblue  x000D      height  400px  x000D    x000D   x000D   fcenter  x000D      float left  x000D      width  33   x000D      background lightgreen  x000D      height 400px  x000D      margin-left 0 25   x000D    x000D   x000D   fright   x000D  float  right  x000D      background pink  x000D      height  400px  x000D      width  33 5   x000D       x000D    x000D   lt div class  wrap  gt  x000D       lt  --Updated on 10 8 2016  fixed center alignment percentage-- gt  x000D       lt div class  fleft  gt Left lt  div gt  x000D       lt div class  fcenter  gt Center lt  div gt  x000D       lt div class  fright  gt Right lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    This uses the CSS float property for left  right  and center alignments of divs on a page

User · Answer

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

[css] Split page vertically using CSS

Examples related to css

Examples related to html