Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

split a page into 2 halfs(top and bottom)

Tags:

html

I want to split a page into 2 halves(not as a column) but as a row(top and bottom) and give 2 colors one for top and one for bottom.

like image 932
Geek Avatar asked Jun 04 '12 19:06

Geek


People also ask

How do you make a split screen page?

There is a shortcut to split windows that is really useful. In an active window, press and hold the Windows key and then press either the Left or Right arrow key. This should automatically snap the active window to the left or right. Select another window to fill the second empty space.

How do I split a page into two sections in HTML?

In HTML, we can divide a whole webpage into sections by using <div> tag along with the CSS. By default, a <div> tag divides a webpage into horizontal sections. However, you can use the float property of CSS to make the vertical sections of the webpage.

How do I split a page horizontally and vertically in HTML?

Creating Frames To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames.


2 Answers

demo on dabblet.com

html:

<div id="top">top</div>
<div id="bottom">bottom</div>

css:

#top,
#bottom {
    position: fixed;
    left: 0;
    right: 0;
    height: 50%;
}

#top {
    top: 0;
    background-color: orange;
}

#bottom {
    bottom: 0;
    background-color: green;
}
like image 155
Vladimir Starkov Avatar answered Oct 21 '22 14:10

Vladimir Starkov


Demo: Jsfiddle

HTML

<body>
<div style="height:100%">
<div class="topdiv">top div</div>
<div class="bottomdiv">bottom div</div>
</div>

CSS

body {margin:0;padding:0;height:100%;}
div.topdiv {clear:both;position:fixed;top:0;height:50%;width:100%;background-color:#990000;color:#FFFFFF;font-size:16px;text-align:center;}
div.bottomdiv {clear:both;position:fixed;bottom:0;height:50%;width:100%;background-color:#009900;color:#FFFFFF;font-size:16px;text-align:center;}​
like image 25
Raab Avatar answered Oct 21 '22 15:10

Raab