Question

First, this is my HTML

<div class="header">
  <div class="wrapper">
    <div class="navi">
      <a href="#" class="logo">Logo</a>
      <ul><!--
        --><li><a href="#" class="navlink">Link 1</a></li><!--
        --><li><a href="#" class="navlink">Link 2</a></li><!--
      --></ul>
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="content">
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>
</div>

and CSS

.wrapper {
    width: 90%;
    max-width: 50em;
    margin: 0 auto;
}

.header,
.navi {
    width: 100%;
}

.header {
    background: grey;
}

.navi {
    background: green;
    display: table;
    text-align: center;
}

.navi ul {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.navi li {
    background: orange;
    display: inline;
    margin-left: 10px;
}

.navilink {
    display: inline-block;
    width: auto;
}

.logo {
    background: red;
    float: left;
}

.content {
    width: 100%;
    background: fuchsia;
}

Fiddle
Fullscreen Fiddle

You see, the wrapper ensures that there is always some kind of gap between content and edge of the viewport and beyond a certain point (50 em), the .wrapper doesn’t exceeds any further.

The code I posted here works, but I would like to know if there is any chance to get rid of <div class="wrapper"> achieving the same result. I already tried to apply the .wrapper class directly to the elements, but that isn’t working – why?

To clarify: My aim is it to make the markup cleaner. That’s why I am interested in a solution then ensures that the elements behave like in the example I posted, but without the use of <div class="wrapper">. The class .wrapper has to stay of course, it’s just that div that strikes me. Thats why I tried to add .wrapper directly to the elements.

Answer 1

Remove the wrapper div, and add the two CSS properties to the content div..

.content { 
margin: 0 auto;
max-width: 50em;
}