CODEWITHSUNDEEP
javascripthtmlcss
rudyStock
rudyStock

Reputation: 103

CSS - Horizontally splitting a page in half

I'm trying to have a page divided in half, horizontally. I want to accomplish it just by HTML/CSS and I'd prefer not to use JS. What am I doing wrong?

Thanks

CSS

#container {
min-height:100%;
}

#top_div {
height:50%;
width:100%;
background-color:#009900;
margin:auto;
text-align:center;
}

#bottom_div {
height:50%;
width:100%;
background-color:#990000;
margin:auto;
text-align:center;
color:#FFFFFF;
}

HTML

<div id="container">

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

</div>

Upvotes: 9

Views: 33365

Answers (4)

GuCier
GuCier

Reputation: 7405

Viewport units! Yes, viewport units. Supported by all browsers since IE9, doesn't require you to set height: 100% to every parent container.

Adding the property height: 50vh; will simply size it to 50% of the viewport height.

.top {
  height: 50vh;
  background-color: tomato;
}

.bottom {
  height: 50vh;
  background-color: brown;
}
<div class='top'></div>
<div class='bottom'></div>

Upvotes: 4

algorhythm
algorhythm

Reputation: 8728

try to change your first CSS-block for #container like this

#container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

than the container has window-height and window-width...

For a better solution do the same with the top and bottom elements inside the container. Set them to position and all top, left,... properties to zero. For the top element set bottom to 50% and for the bottom element set top to 50%.

#top_div {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50%;
    background-color:#009900;
    text-align:center;
}

#bottom_div {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    bottom: 0;
    background-color:#990000;
    text-align:center;
    color:#FFFFFF;
}

DEMO

Upvotes: 7

Shashi
Shashi

Reputation: 474

If i got you right then here is what you are trying to do:- Create two column page.

Just take one div element as parent and two child div elements, assign position:relative to parent as this will make it container and position:absolute to children elements,use width to assign specific area.

Upvotes: 0

jamesplease
jamesplease

Reputation: 12869

Try this:

body, html, #container {
  height: 100%;
}

Upvotes: 10

Related Questions