Creating a Drupal theme. How do I prevent my divs from wrapping to content size?

Question

I am working on my first Drupal theme and I am only running into one issue so far. I have percentage sizes set for all of my divs to make the site more responsive. However they seem to ignore the sizes and just wrap to their child content. How can I fix this?

CSS

#wrapper {
  padding: 5%;
  width: auto;
  height: auto;  
  position: relative;
}
div {
margin: 0px;
padding: 5px;
}
#sidebar-first {
  float: left;
  display: inline;
  width: 19%;
  height: 79%;
  background-color: orange;
}
#header {
  float: right;
  display: inline;
  width: 79%;
  height: 19%;
  background-color: purple;
  text-align: right;
}
#sidebar-second {
  float: right;
  display: inline;
  width: 19%;
  height: 79%;
  background-color: red;

}
#content {
  float: left;
  display: inline;
  background-color: green; 

}
#footer {
  float: left;
  display: inline;
  width: 79%;
  height: 19%;
  background-color: pink;
}

PHP

<div id="wrapper">

    <?php if ($page['sidebar_first']): ?>    
    <div id="sidebar-first">
      <?php print render($page['sidebar_first']); ?>
    </div>
  <?php endif; ?> 

  <div id="header">
    <a href="<?php print $front_page;?>">
      <h1><?php print $site_name; ?></h1>
    </a>

    <?php if ($main_menu): ?>
      <?php print theme('links', $main_menu); ?>
    <?php endif; ?>

  </div>

  <?php if ($page['sidebar_second']): ?>    
    <div id="sidebar-second">
      <?php print render($page['sidebar_second']); ?>
    </div>
  <?php endif; ?>  

  <div id="content">
    <?php print render($title_prefix); ?>
      <?php if ($title): ?><h1><?php print $title; ?></h1><?php endif; ?>
    <?php print render($title_suffix); ?>

    <?php print render($messages); ?>
    <?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>
    <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>

    <?php print render($page['content']); ?>
  </div>

  <div id="footer">
    <?php if ($page['footer']): ?>    
      <?php print render($page['footer']); ?>
    <?php endif; ?>  
  </div>

</div>

Here is what it looks like now: Want it to look similar to this but they used tables on a static page.

Answer 1

You might try box-sizing.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Followed by the rest of your CSS

Answer 2

I figured it out. Since I have a wrapper inside the body and html, I had to set all 3 of them to 100% to achieve the desired effect. As well as using box sizing as suggested by Billy_Bob.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html, body {
  width: 100%;
  height: 100%;
}
#wrapper {
  padding: 4%;
  width: 100%;
  height: 100%;
  min-height: 500px;
  min-width: 850px;
}