0

I have styled my vertical navigation to be a width of 10% and my content to be a width of 90%, but I just can't seem to get them to sit next to each other correctly. I've tried float: left and display:inline-block, but nothing seems to work. Any help would be greatfully appreciated.

@import url(http://fonts.googleapis.com/css?family=Play);
/* CSS Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}

/* --------- */
.mainHeader {
 background: rgb(255,50,50);
 padding: 20px;
}
.mainHeader h1 {
 font-family: "Play";
 color: rgb(255,255,255);
 font-size: 24px;
}
.mainNavigation {
 padding: 12px;
 width: 10%;
 height: 900px;
 font-family: "Play";
 font-size: 18px;
 background: rgb(255,50,50);
 float: left;
}
.mainNavigation ul {
 padding: 0;
 margin: 0;
 list-style-type: none;
 list-style: none;
}
.mainNavigation ul li {
 width: 100%;
 padding: 2px;
}
.mainNavigation ul li a {
 text-decoration: none;
 color: rgb(255,255,255);
 padding: 12px;
 width: 100%;
 -webkit-box-sizing : border-box;‌​
    -moz-box-sizing : border-box;
    box-sizing : border-box;
 display: inline-block;
 border: 1px solid rgb(255,100,100);
}
.mainNavigation ul li a:hover {
 background: rgb(255,255,255);
 color: rgb(0,0,0);
}
.mainContent {
 padding: 8px;
 display: inline-block;
 width: 90%;
 margin: 0 auto;
 -webkit-box-sizing : border-box;‌​
    -moz-box-sizing : border-box;
    box-sizing : border-box;
}
.article {
 background: rgb(222,222,222);
 padding: 8px;
 margin: 0 auto;
 border: 1px solid rgba(222,222,222,0.5);
 width: 90%;
 font-family: "Play";
}
<!doctype HTML>
<html>
  <head>
    <link href="css/reset.css" type="text/css" rel="stylesheet"/>
    <link href="css/base.css" type="text/css" rel="stylesheet"/>
    <title>temp</title>
  </head>
  <body>
    <div class="mainHeader">
      <h1>Jackatron</h1>
    </div>
    <div class="mainNavigation">
      <ul class="clearfix">
        <li><a href="index.php">Home</a></li>
        <li><a href="index.php">Profile</a></li>
      </ul>
    </div>
    <div class="mainContent">
      <div class="article">
        <h1>Hello</h1>
      </div>
    </div>
  </body>
</html>
Jackatron
  • 5
  • 2
  • Duplicate of duplicate [http://stackoverflow.com/questions/6871996/css-two-inline-block-width-50-elements-dont-stack?lq=1](http://stackoverflow.com/questions/6871996/css-two-inline-block-width-50-elements-dont-stack?lq=1) – Drops Mar 01 '15 at 18:06

2 Answers2

0

Setting the max-width property of your navigation and content blocks, not just width, seems to solve the issue:

.mainNavigation {
  max-width:10%;
}

.mainContent {
  max-width: 90%;
}

You may have other options to solve the issue, depending on the intended layout. For instance, consider not setting the width of .mainContent.

Nicolas Le Thierry d'Ennequin
  • 6,004
  • 5
  • 37
  • 56
  • Thanks for the input, unfortunately it's not exactly how I wanted it. I want my '.mainContent' to always be 90% of the screen and the method you suggested didn't achieve that. Thanks for trying though, it's much appreciated. – Jackatron Mar 01 '15 at 18:36
0

The #mainNavigation div has 12px padding. Unless you change box-sizing to border-box it means that #mainNavigation has 10% plus 24px (2*12px) width, so it doesn't fit next to 90% width #mainContent div.

'box-sizing: border-box' means that element width will be 90% including the given padding or border(note: it doesn't work with margin).

It is quite common this days to set box-sizing:border-box globally while it is more intuitive approach. Snippet for this (You can place it on top of the main css file):

*,
*:before,
*:after {
    box-sizing: border-box;
}
Michał Klim
  • 76
  • 2