Menu
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.
932
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.
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.
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.
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;
}
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;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
