Skip to content

Container

As your text on the website can be quite hard to read when it spans across the whole width of your page and you might want to add some spacing to sides of your content, we can use this container trick to apply this.

Getting Started

First, open your index.html file. Then, we need to add more placeholder text to our site to actually see this problem. Lorem Ipsum is great placeholder text, which you can get by googling Lorem Ipsum Generator. Then, using some of the lorem ipsum, change your article paragraphs to be longer lorem ipsum like this:

HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed felis velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tincidunt sapien vel tellus varius, nec dapibus purus ultrices. Nulla turpis tellus, dictum a odio eu, luctus efficitur ipsum. Ut sollicitudin egestas urna. Etiam augue ex, lacinia et ligula eu, finibus cursus tortor. Nullam nec tincidunt nisl. Morbi dignissim nisi nec enim aliquet, non feugiat mi pellentesque. Mauris lectus est, blandit eu mollis pulvinar, dapibus in est. Vestibulum porta nunc non lacinia suscipit. Cras ac urna semper, tempor lacus sit amet, lobortis quam. Praesent quis accumsan enim, at tincidunt leo. Donec quis risus ac diam tristique placerat. Quisque eu erat dapibus, malesuada ante rhoncus, porta leo.</p>

Container to the fix!

As you can see, our website is added inside the <main> element. Let's add the class container for our main element. Then, let's add this small CSS to make our website not be too long and to center the content:

CSS:

CSS
.container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;

  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

We have just another thing we want to clear right now. As we can see, there is some spacing between corners of our page and our content. That is because the <body> element adds by default 8 pixels of margin on it. We want to clear that now to better align our content:

CSS
body {
  margin: 0px;
}

Floats

Floats can be used to align some element(s) on left or right. Float basically controls "how the element should float". Floats should NOT be used for creating templates as these days more modern technique exists called flexbox (and grid layout) but floats are helpful to make small alignments on your website content like for example to align a image on the left and then content on the right.

Using Floats

As usually with CSS, floats are super easy to use. You can set the CSS property float with value of left or right to align content. After you have defined your floats, you need to clear the floats with this: clear: both.

Example: Images on article floating on the right

In order to use this example, download file darth.jpg from Moodle and store it in your img folder.

HTML:

HTML
<article>
  <img src="img/darth.jpg" alt="Darth" />
  <p>Text here...</p>
  <div class="clear"></div>
</article>

CSS:

CSS
article img {
  float: right;
}

.clear {
    clear: both;
}

Challenge: Floating images to left or right

Your challenge is to repeat the paragraphs and images you have on the site and then to align some of your images to the left instead of right. Hint: Use class for this.

Floats for Layouts

Floats can also be used to create simple layouts or to for example horizontally align the two articles that you have. Note that this is an old way of doing this and these days we usually use flexbox or grid layout for achieving this. But as many websites still use floats to horizontally align elements, let's learn how to use floats for aligning content.

Aligning your articles next to each other

In order to achieve this, add separate classes for both of your articles. Article 1 could have class article-1 and article 2 class article-2. Then, let's create some CSS to make the first article take up little bit more space than the first article and second article less space:

CSS:

CSS
.article-1 {
  float: left;
  width: 66%;
  padding-right: 10%;
  box-sizing: border-box;
}

.article-2 {
  float: left;
  width: 34%;
  box-sizing: border-box;
}

HTML Example:

HTML
<article class="article-1">
  <p>Text...</p>
</article>
<article class="article-2">
  <p>Text...</p>
</article>
<div class="clear"></div>

Alternative way to align blocks horizontally: inline-block display property

Another way to align content next to each other without using the float property, we could also set the display property of our articles to inline-block. This way they act just like blocks, but they go inline and take only the width they are assigned.

CSS:

CSS
.article-1 {
  display: inline-block;
  width: 65%;
  padding-right: 10%;
  box-sizing: border-box;
}

.article-2 {
  display: inline-block;
  width: 34%;
  box-sizing: border-box;
}

Note that we need to remove 1% from width of one of the elements for them to fit next to each other.

Recap

What we learned today: - Creating container element that wraps your page content - Using the max-width CSS property - Using margin-left: auto and margin-right: auto CSS properties to horizontally align an element - Using floats - Using floats to create basic layout for your website (remember: this is the old way to do layouts, later we will learn about flexbox which is better way for this) - Using display: inline-block to align blocks horizontally