I'm primarily a developer and weak on the css/design side. I'm trying to create what I think is a simple layout. I want a toolbar at the top, and then split the remaining space 50% between 2 other panels. I was thinking of using em units for the toolbar. Can you mix units like that? Maybe the better question is, it it advisable?

4 answers

Doug 1095


Answered almost 8 years ago by Doug

Mixing ems and percentages works fine, because percentages are interpreted as just that; they'll take up that proportion of space.

I've found vertical layouts to be a little dicey if you don't have a container element with a height set. If you make sure to put all three layout components into an umbrella element that has a defined height then you should be able to take whatever's left under the toolbar and split it by percentage.

I might suggest reading up on the box model, which will affect what happens when you start giving those elements some real visual style. That's a reason that percentages might get really tricky; box size in percents and border/padding/margin specified with absolute units can behave quite unexpectedly.

Answered almost 8 years ago by Voyagerfan5761

Yes you can and sometimes it can be quite convenient to use percentage when you want to avoid doing 'em' calculation.

Answered almost 8 years ago by Bikal Gurung

If by splitting remaining space, you meant vertically, then try this for starters.

body {
#toolbar {
  height: 4em;
  background-color: darkBlue;
#panes {
   position: absolute;  
   left: 0;
   right: 0;
   top: 4em;
   bottom: 0;
#top {
  height: 50%;
  background-color: lightBlue;
#bottom {
  height: 50%;
  background-color: pink;
<div id="toolbar"></div>
<div id="panes">
  <div id="top"></div>
  <div id="bottom"></div>
Answered almost 8 years ago by Ahmad Syukri