Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From \$16.50/m

# Web Design for Kids: CSS Layout

This post is part of a series called Web Design for Kids.
Web Design for Kids: CSS
Web Design for Kids: Images

Welcome to the sixth lesson of our Web Design for Kids series, CSS Layout!

This is where we put all our elements exactly where we want them on the screen. We'll be adding to both our HTML and CSS files to do so.

To remind yourself, take a look at the website we’re building. The files for this course can be downloaded here and don't forget to ask any questions you have in the comments section at the bottom of this page.

## Before We Get Started

There are a few things we need to know before jumping right into layout. In this first section we will look at how to stay organized. We’ll cover some positioning basics and talk about what sort of CSS properties are used for layout.

### CSS Ordering

Keeping a CSS document organized is very important. Proper organization will make it easier for us to find all the pieces within our file, making it easier to change and add things later on. Generally speaking, it's best to order our CSS declarations in the order they take place on the page.

We will be adding styles in this lesson to main, for example. This added styling on such a major element should be included in our CSS document before any other elements that are nested within main.

### The Box Model

HTML elements are a bit like rectangular boxes. The CSS box model describes the spacing of these boxes.

Each box has four sides. We can apply a value to all four sides at once in our CSS through padding, border, and/or margin. However, if we want to style one side of an element we can do that too. For example:

Let's say this pink box represents text. We can see that padding has been added only to the left and a thick blue border covers all four sides of the content.

### Flexbox

CSS gives us a set of properties made especially to help us with our website's layout. So while the box model helps explain the spacing around HTML elements, flexbox will allow us to move these elements into place.

When we use flexbox on a container element this element becomes a flex container and all the elements within it become flex items.

When we apply flexbox to a container it will automatically lay the items out along a straight line (horizontally) and then we can get into more detail with other flexbox properties.

We won't need to use flexbox too much for our website, but it's important to think about flexbox as it's considered the most modern, proper way to position small bits of content on a website.

The h1 and town image within the header are centered on the page. There are several different ways to center something with CSS, but for now we will use text-align: center; on the header.

We'll point to the header by using its class name that we added previously:

Don't forget! Save the documents and refresh the browser to see our changes as we make them!

## Sections

The very first thing we will want to do to our sections is to make the content, the image and the list, within each section sit next to each other rather than stacked.

To achieve this we will use flexbox. Flexbox is applied to the items within a container element by using display: flex; on the container:

To bring this back to what we talked about earlier, the image and div containing the shop list are now flex items, because they’re within this flex container.

While there are many options for specifying exactly where an element should go, flexbox's default behavior here works perfectly for us–and our store's list now lives to the right of the store's image.

### A Note On “Vendor Prefixes”

Since Flexbox is fairly new, not all browsers have had a chance to include it properly. To work around this we can include a vendor prefix to flexbox properties, adding this missing support for the time being. Even though we are only focused on the most recent versions of modern browsers for this project, we will still need to include a -webkit- vendor prefix for flexbox to make sure it works in “Safari”.

### Image & Lists

We could use a bit of spacing between the image and the element containing all the text, so in our HTML let's add a class of store-details to the div containing the text.

After we save this we can jump over to our CSS and add this spacing, but only to the left of the div:

#### Default List Spacing

There is some spacing to the left of our store unordered lists. This is because there is some default styling that comes along with using an HTML list. Sometimes this default styling is OK, and other times it may not produce the effect we are going for.

We can get rid of this default list spacing by using padding: 0; on the unordered list, but that would cause our bullet points to go too far to the left compared to our list's heading.

We want a bit of padding here, but not as much as is provided by the list's default styling. Setting a padding-left of 15px on the list will line our bullet points up with the heading quite nicely, so we'll add this in addition to the things we added to the list in the previous lesson:

#### Space Between List Items

We still have the matter we mentioned in the previous lesson with the list items being too close together. To solve this let's add a class of store-name to all the list items, <li>, in our HTML. We'll then add a small margin to the bottom of these items.

### Margins and Centering

Spacing needs to be added to the sections as well as getting them centered on the page. We will do this through the margin and width properties.

The 50px value within margin here is applying that amount of space at the top of each store-section. Following this with auto tells the browser to consider the element's width (which we set to 450px) and center it within the browser window automatically.

## Footer

For our footer we will center the text and add a small amount of padding to make sure this text isn't too close to the edges of the footer.

### Body Margin

We talked about default styling a bit when we were getting our lists into place. The body element comes with its own default styles, one of which is a margin that surrounds the whole page. While sometimes this isn't a problem, we can see that it is preventing the background-color of our footer from stretching fully to the sides of the browser window.

The solution here is to jump back up to body in our CSS document and add the following:

## Conclusion

In this course we got all our elements into place with CSS layout techniques. While there are usually several different ways to achieve a specific layout, getting more comfortable with the CSS box model and flexbox provides a very solid understanding to these different approaches.

Since our site is complete (congratulations!) we'll be talking all about design, typography, and color in the lessons to follow. This will help you become a well-rounded, informed web designer.

See you around town!