Layout Methods Using CSS

If something is all the rage these days, it’s got to be website layout. I suppose layout has always been popular, but with Google’s recent “Mobile Friendly Update,” the topic of layout has increased in importance exponentially. I wish I had ridden that wave, because there was, and still is, tons of work to be done bringing the world’s websites up to snuff.

In this post, I’m going to go over some basic principles of website layout using CSS. The whole idea isn’t terribly complicated. It’s just that there are a few areas that you need to keep in your head when positioning elements on a page. If you’re interested in making a website mobile friendly, don’t despair – I’ll be writing a whole bunch of posts on that topic in the future.

Setting Box Dimensions

Let’s say we’ve got a paragraph of text that’s held inside a div element. The sizing for that div element would be relative to the text that’s held inside. As the page shrinks and expands, so does the width and height of the div element. This is the default way boxes are sized in CSS.

If we wanted to add some more control to the sizing of our box, we can take advantage of two properties. These are:

width: The width property tells the browser what we want the width of our element’s content area to be. Remember, the content area is the innermost area of a box, minus the padding, border and margin.

height: The height property acts the same way as the width property does, but controls the height of the element’s content area. All the same rules apply.

The initial value of both of these properties is auto, meaning (like I discussed above), the width and height will adjust as the browser sees fit, based on the size of the browser window and the content the element is encapsulating.

Both of these properties use length and percentage values to complete the CSS rule. These values would include pixels (for precise measurement), percentage or ems (for more flexibility). Here’s an example of what width and height properties look like:

div {
    width: 100%;
    height: 850px;
}

When laying out a web page, designers often run into an issue when establishing width and height properties for an element. I’ll tell you what I’m talking about.

Let’s say you’ve got a container div with the width of 1000 pixels. That CSS code might look like this:

.container {
    width: 1000px;
}

Now, let’s say you’ve got two boxes inside that container that you want to use as columns on your page. This means that the intended use will be boxes sitting side by side. Take a look at this code:

.container {
    width: 1000px;
}

.box-one {
    width: 200px;
}

.box-two {
    width: 800px;
}

As you can see, these boxes fit perfectly inside their container element. The problem is that if we fill these two column boxes with content, that content will be touching the very edges of the boxes, making the page look awkward and tightly stuffed. This is exactly what the padding property was created to alleviate.

So, like any good designer, we add some padding properties to our boxes.

.container {
    width: 1000px;
}

.box-one {
    width: 200px;
    padding-right: 10px;
}

.box-two {
    width: 800px;
    padding-left: 10px;
}

That should fix things, right? Well, if you refer back to what I wrote in my previous post, you’ll see that we’ve actually pushed our boxes out of their intended areas and have left ourselves with stacked elements, instead of elements that sit side by side. Why did this happen? Instead of creating two boxes that total 1000 pixels (800 + 200), we’ve created two boxes that total 1020 pixels (800 + 10 + 200 + 10). This is annoying, to say the least. And padding isn’t the only culprit for messing up our design – borders and margins have the same effect. Remember, padding, borders and margins occur outside the content area of a box, therefore those values get added to the total width or height of our box.

Using Box Sizing and Max Values

To deal with the oddities that adding padding and borders to a box can cause, the fine folks who created and released CSS3 have included a nice new property for us to use with our designs. This new property is called, “box-sizing” and essentially keeps our boxes sized according to the widths and heights we declare, adding any padding and border values to the inside of the boxes, instead of the outside. So instead of our example above resulting in a box width total of 1020 pixels, the total would remain at its initial 1000, just the way we intended it to. But just as a reminder, any padding and borders you add to your box will decrease the size of your content area.

The most usable values for the box sizing property are:

padding-box: Our initial box size dimensions include the padding values we declare, but don’t include border or margin values.

border-box: Our initial box size dimensions include the padding and border values we declare, but don’t include margin values.

For more background and information on the box sizing property, check out these resources:

Box Sizing | CSS-Tricks

CSS3 Box Sizing Property – W3Schools

Box Sizing – CSS | MDN

If you take a look at the CSS Tricks page, the author offers a tip that can help us throughout an entire design. He uses the HTML and universal selectors to apply box sizing. Here’s that code:

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

By implementing the above code in our stylesheets, we don’t have to concern ourselves with utilizing the box sizing property for every element we’d like to size this way, causing very redundant code.

Max Width

I’d like to take a moment to talk about two really great tips that will assist you with creating a responsive design for your websites. The first one has to do with the use of the “max-width” property.

Let’s say you set your container element to a width of 95%. That works fine until you see someone browsing your website with one of those enormous monitors. Of course, seeing your beloved site design stretched out three feet wide causes a bit of dismay, so you decide to take advantage of max width and adjust your code to look like this:

.container {
    width: 95%;
    max-width: 1000px;
}

Now, when your site is viewed on a larger monitor, the width grows no larger than a maximum of 1000 pixels. So, what is max-width? Well, the max-width property is used to set a maximum width for an element. It’s value overrides the width element’s value and keeps designs looking great.

The second tip I’d like to share is one that allows your images to become fluid in your layout. If you’ve ever seen a site design with images that shrink and grow, relative to the size of the browser window the site is being viewed on, you’ve seen the max-width property in action. For images though, things are a bit different. In order to make the fluid sizing work correctly, you’ll need to set the image type selector to a max width of 100%. Here’s what that looks like:

img {
    max-width: 100%;
}

Backgrounds

Color

Many elements in our HTML pages can hold background properties. I’ll talk about some of them in the next few sections, but the one I’d like to go over first is the “background-color” property. The idea behind the background-color property is pretty easy to grasp. Yes, you guessed it – this property sets the color of an element’s background and uses many of the color data types I discussed in one of my previous posts (scroll down to the “Color Data Types” section). I’ll give you some examples of what types of values you can use below. These are the most popular:

background-color: blue;
background-color: rgb(128, 255, 64);
background-color: #bbff00;

As you can see, the typical background color values used are color keywords, rgb values and hex values.

Image

If you wanted to go one step further, you can easily utilize an image as an element’s background, instead of a color, by using the “background-image” property. The syntax is slightly different, but it’s still straightforward. Here is an example of the code you would use to apply an image as a background:

background-image: url(https://www.mywebsite.com/background.png);
background-image: url(../img/background.png);

I gave two different examples above. They both use the “URL function” to direct the website visitor’s browser to the specified image to be used as the background. In the first example above, I specified the image using an absolute URL and in the second example, I specified the image using a relative URL. If you aren’t familiar with the difference between absolute and relative URLs, please review this resource.

Image Size

When setting a background image, the image may not display exactly the size you’d like. Most likely, you’ll either find that you’re image is too small and tiling (by default) or too large and overflowing the element’s bounds. This is where the “background-size” property comes into play. By using the background-size property, we’re able to vary our image size in a variety of ways – actually, quite a few ways. I’ll only go over a small number of them below, but if you’re interested in studying this topic in further detail, please visit the reference I just linked to above.

Here’s some example code for the size property:

background-size: 95%;
background-size: 12em;
background-size: 850px;
background-size: cover;

Now, there is something you need to keep in mind when setting a background image size. When using percentages, our background image size will be relative to its parent container. This isn’t new, I know, because I discussed this idea earlier in this post. I just felt as though it needed coverage.

If your image is too large for your element’s area, you can use the “cover” value to proportionally adjust the image’s size in relation to the element’s size. This means that the background image will shrink to fit the element.

Repeat

As I just mentioned, the default value for a background image is “repeat.” What that means is that if an image is too small to completely fill in an element’s area, it will repeat both horizontally as well as vertically. Now, this may not be ideal for many designers, so it might be wise to take advantage of CSS’ “background-repeat” property. To discuss this property, I’ll give some code examples below and then talk about them after that.

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

Like the background-size property, there are many more background-repeat values available for use. This is a sample of them. If you’re interested in learning more about the others, please visit the resource I linked to above.

In the previous code example, the “repeat-x” value limits a repeating background to only the horizontal axis, meaning, the image will only repeat left and right. Not up and down as well. If you’d like to limit the image repeating to the vertical axis, you would use the “repeat-y” value and if you’d like to stop your image from repeating all together, you would use the “no-repeat” value. By using no-repeat, you’ll be left with your single image that’s most likely not filling the entire element’s area.

Position

Let’s say you decided to use the no-repeat value for your background image. If you did this, you’d notice that the image is hanging out up in the upper left corner of your element’s content area. That’s the default position of the image. Again, this location might not be ideal for many designers and if it isn’t, they can take advantage of the “background-position” property, which allows for changing the position of the image in relation to the parent element’s area. I’ll give some examples of this property below and go over what each means below:

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;

Actually, I’m not sure I even need to clarify what the above values accomplish. They’re fairly self explanatory. The only one that may be a challenge is the last one that uses percentages. In that case, the 25% simply moves the upper left corner of the image over to the right by 25% of the parent element’s content area and the 75% moves the same part of the image down 75% of the content area.

Shorthand

Wow, we went over quite a few background properties in this post so far. If we were to write all these out like I displayed them above, that would certainly be a lot of writing. Luckily, there’s a shorthand property available that cuts out a lot of writing. I’ll give an example of what that shorthand might look like:

background: blue url(../img/background.png) no-repeat center / cover;

This one background property applies all the values we discussed above to a single rule. Now that’s efficient.

Floats

One of the most popular layout methods available in CSS has to do with “floats,” or floating elements. This method has been around as long as I can remember and I’ve used it in numerous projects. While it does have a few drawbacks, it’s quite effective in what it’s meant to do – and that’s position elements where a designer would like them.

If you remember back to my previous post on the CSS box model, you’ll recall that I discussed inline elements and block-level elements. Basically, inline elements follow each other all the way down the flow of the page, sort of like a snake. These types of elements, if small enough, can travel like words in a paragraph, side by side, until they reach the end of the line. Once that happens, they begin a new line and start all over again.

Block-level elements are totally different. With these types of elements, it’s as though someone hits the enter key every time they type a word. They don’t travel down the page like a snake – they stack on top of one another and create a column, no matter how small the “box” is. That’s the difference between inline elements and block-level elements. Both have their place in page layout.

Sometimes, when positioning elements on a page, a designer wants to place block-level elements next to each other, as opposed to on top of one another. Without the use of floats, this can be a challenge.

Let me give you a code example and when I’m finished with that, I’ll tell you what’s going on:

.left-column {
    width: 48%;
}

.right-column {
    width: 48%;
}

Let’s pretend that the two classes above are applied to two div elements. Under normal circumstance, written like this, these two elements would stack above and below one another, even though they only consume less than half of the width of the entire parent element. This is because div elements are block-level elements. Remember, block-level elements take up the entire width of their parent element, no matter the stated width of the element themselves.

In order to work around this issue, we can use what’s called a “float.” By using a float, we can circumvent the traditional block-level challenges and essentially turn our block-level element into an inline one.

So, if we took advantage of the float property, our new code would look like this:

.left-column {
    width: 48%;
    float: left;
}

.right-column {
    width: 48%;
    float: right;
}

With this code in place, our layout would be as we would like it – two columns of equal width.

If you’re interested in learning more about floats in CSS, please take a look at these resources:

CSS Float – W3Schools

All About Floats | CSS-Tricks

CSS Floats 101 · An A List Apart Article

Clearing Floats

As I mentioned above, using floats as a layout technique has its drawbacks. One of those drawbacks is that once you float an element, you take it out of the normal flow of your page. While a floated element will remain situated inside a block-level element, code-wise, the element it’s inside, may “collapse,” meaning the floor of the surrounding element may rise and occupy the same space as the floated element. Its content will likely overlap, hide behind or wrap the floated element. Any way you look at it, it’s not good. It’s sort of like playing with blocks as a kid. Imagine trying to stack blocks on top of each other and instead of stacking, they kept melting into one another.

There is a technique that’s used to, what we like to call, “clear a float.” Basically, we can use the “clear” property to put things back where they’re supposed to be. Take a look at this code:

<div style="clear: both;"></div>

In order to clear a float and allow the parent element to surround the floated elements the way it’s supposed to, all we need to do is add this bit of code after our last floated element. It’s that easy.

There is another method that the pros like to use. Take a look at this code:

.group:after {
    content: "";
    display: table;
    clear: both;
}

Instead of adding an new element to your HTML code like the method I first described, all you would need to do is to add the “.group” class to any parent element that you’d like cleared. This will have the same effect as the first method. So basically, the parent div in our HTML code would look like this:

<div class="parent-element group">
    <div class="left-column">
        // CONTENT
    </div>
    <div class="right-column">
        // CONTENT
    </div>
</div>

——

If you’re interested in more CSS related posts, please be sure to visit my CSS category. I write almost every day, so you’ll be sure to find something you’re interested in.