It's because you're using elastic margin widths - they are elastic in the sense that they adjust according to the size of your text, but will always remain the same size regardless of the width of the viewport. If you want a layout to take up the whole browser, you should be using percentages for your widths.
Let me step you through this. The "l-" prefix in the following CSS classes stands for "layout". First off, you need a row container. A container/row does nothing except encapsulate the blocks of HTML that contain your columns of content. This is pretty simple. By setting a width of 100%, you have a row that takes up 100% of the browser width.
PHP Code
<?php
.l-row {
width: 100%;
}
Now, you need a way to limit the size of that container if you need to. Let's say you want your size limit to be 980px in width, just so you can keep things off of the edge of the screen.
PHP Code
<?php
.l-contained {
max-width: 980px;
}
You will also need a way to center the contained container, as it will by default appear on the left of the screen - so here's a class that allows you to do that:
PHP Code
<?php
.l-centered {
margin: 0 auto;
}
Now, you can combine these as you wish into different kinds of containers:
PHP Code
<?php
<div class="l-row"></div> // a full width container
<div class="l-row l-contained"></div> // a left-aligned fluid container that restricts itself to maximum 980px in width
<div class="l-row l-contained l-centered"></div> // a centered fluid container that restricts itself to max 980px width
There is a problem with these container rows, but I'll outline this problem after I introduce the next step, which is to create column width classes that allow you to specify different widths for different parts of a page.
First off, you will need a generic column class, that floats itself to the left, and has an outer margin that can be considered a "gutter" of negative space surrounding the column (so content does not sit right next to other content, for readability). This is fairly simple:
PHP Code
<?php
.column, .columns {
float: left;
margin-left: 3%;
}
.column:first-child, .columns:first-child {
margin-left: 0; /* we need to reset the first column
}
The reason we have "column" and "columns" is simply for readable class names. The next step, is to define the actual widths. In order to do that, we have to think about how many columns we will need. Twelve columns is a good start, but we need to actually do some math and figure out how those twelve columns will fit into our layout in terms of the percentage of space they will take up (remembering to include the 3% gutter/margin in our calculations).
The formula for that is:
column width = (total width / number of columns current column number) - (gutter / 2)
Using that formula, we can create our individual column widths:
PHP Code
<?php
.one {
width: 6.83333334%;
}
.two {
width: 15.16666668%;
}
.three {
width: 23.5%;
}
.four {
width: 31.83333336%;
}
.five {
width: 40.16666667%;
}
.six {
width: 48.5%;
}
.seven {
width: 56.83333336%;
}
.eight {
width: 65.16666667%;
}
.nine {
width: 73.5%;
}
.ten {
width: 81.83333334%;
}
.eleven {
width: 90.16666667%;
}
.twelve {
width: 98.5%;
}
Now, we can use it like this, to create a two-column layout, where the first column spans a width of five columns, and the second spans a width of seven columns:
PHP Code
<?php
<div class="l-row l-contained l-centered">
<div class="five columns"
// content
</div>
<div class="seven columns">
// content
</div>
</div>
But if you had to actually copy that code, and fill it with content, you would notice one of two errors:
1. The container, when set to have a background colour, will not adjust it's height according to the content
2. The columns are all over the place and everything looks broken
There is one last step to fixing that, and that is to clear the floats that the columns use. So, we'll create an "l-group" class that does this for us.
PHP Code
<?php
.l-group {
zoom: 1;
}
.l-group:before, .l-group:after {
content: ' ';
display: table;
}
.l-group:after {
clear: both;
}
Now, we just need to add that class to our row container:
PHP Code
<?php
<div class="l-row l-contained l-centered l-group">
<div class="five columns"
// content
</div>
<div class="seven columns">
// content
</div>
</div>
If you want the row to span the entire width of the page, just leave out the "l-contained" class.
Right now, we have established what is called a "grid system". These are very useful in web design, but there are still a few things that aren't quite up-to-par with ours. For example, you'll notice that if you add a border to a column and/or a container, things start looking weird. So, we need to add a little snippet of CSS that forces the browser to use a separate box model. By default, the browser will add padding and borders to the width of the element. What we want, is for the width to remain the same even if we add padding or borders. So, at the very top of the CSS, we include this snippet:
PHP Code
<?php
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Now, when we add borders, things don't look so bad. However, there is still a *slight issue. The very last column in a row should fit uniformly along the right edge, however, it does not do this. There is a tiny bit of space between the right edge of our last column and the right edge of the row. So, we need to adjust our .column classes to push the very last column all the way to the right:
PHP Code
<?php
.column, .columns {
float: left;
margin-left: 3%;
}
.column:first-child, .columns:first-child {
margin: 0;
}
.column:last-child, .columns:last-child {
float: right;
}
Combined all together, this is our CSS:
PHP Code
<?php
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.l-group {
zoom: 1;
}
.l-group:before, .l-group:after {
content: ' ';
display: table;
}
.l-group:after {
clear: both;
}
.l-row {
width: 100%;
}
.l-contained {
max-width: 980px;
}
.l-centered {
margin: 0 auto;
}
.column, .columns {
float: left;
margin-left: 3%;
}
.column:first-child, .columns:first-child {
margin: 0;
}
.column:last-child, .columns:last-child {
float: right;
}
.one {
width: 6.83333334%;
}
.two {
width: 15.16666668%;
}
.three {
width: 23.5%;
}
.four {
width: 31.83333336%;
}
.five {
width: 40.16666667%;
}
.six {
width: 48.5%;
}
.seven {
width: 56.83333336%;
}
.eight {
width: 65.16666667%;
}
.nine {
width: 73.5%;
}
.ten {
width: 81.83333334%;
}
.eleven {
width: 90.16666667%;
}
.twelve {
width: 98.5%;
}
![[Image: 2QzRqrh.png]](https://i.imgur.com/2QzRqrh.png)
![[Image: fpZ5a5g.png]](https://i.imgur.com/fpZ5a5g.png)
