CODEWITHSUNDEEP
htmlcss
Anton Harald
Anton Harald

Reputation: 5924

split page 50/50%, regardless of further content

Consider the following page layout:

<div id="container">
  <div id="a">A</div>
  <div id="b">B</div>
</div>

which is styled like this:

html, body { margin: 0px ; height: 100%; }

#container {
  height: 100%;
}

#container * {
  box-sizing: border-box;
  border: 1px solid red;
}

#a { height: 50%; }
#b { height: 50%; }

Assuming that #a and #b don't get additional padding or margin style-attributes, is there a chance that any additional content inside those divs could cause the 50/50 split to break? Or make the container exceed the 100% percentage rule and causing the page to have scrollbar.

I'm using this as atop level page layout and I want to make sure that the 50/50 split is always respected, regardless of any further additional content within the #a and #b divs.

https://jsfiddle.net/4v9ag66n/

Upvotes: 0

Views: 807

Answers (3)

nocturns2
nocturns2

Reputation: 661

I think this css (your css that I modified) should achieve what you're after:

html, body { 
  margin: 0px ; 
  height: 100%; 
  overflow: hidden;
}

#container {
  height: 100%;
}

#container * {
  box-sizing: border-box;
  border: 1px solid red;
}

#a { height: 50%; overflow: auto;}
#b { height: 50%; overflow: auto;}

Also, you might want to look at the word wrap.

Upvotes: 0

Jayesh Amin
Jayesh Amin

Reputation: 324

You can also add overflow-y:scroll or overflow-y:hidden to #a and #b in that way both div will have separate scroll bar/ noscroll bar if content are more but page will have no scroll bar

Upvotes: 0

TheValyreanGroup
TheValyreanGroup

Reputation: 3599

To be sure you can add overflow-y: hidden; to the #a,#b divs.

Upvotes: 1

Related Questions