CSS Layout (Part 2 of 3)

CSS Layout Part 2

In this lesson, we are going to take our layout with CSS on the next level. So let's get started.

Remember in our previous video, we had an element of main and inside that element we have the h1, h2 and the paragraph tags. I'm going to change the background color of the main element.

main{
   background-color: #d38080;
}

I can also do the same for our aside tag as well.

aside{
   background-color: #afea9e;
}

Refresh the screen and you see the colors are now changed.

It's very easy to change positions. I can simply write float: left;

main{
   float: left;
   background-color: #afea9e;
}

Refresh the screen

and the aside element is automatically comes in around it which is naturally to the right hand side, also our footer gets wrapped around it as well. You will notice that the div with a class of wrapper is no longer covering the entire area as it was before. We will fix that later in the lesson.

Another thing I would like to show you is that if you hide the background color in the main element by commenting it out, you will notice that the background color will be transparent which of course is natural but did you also notice that the aside element does not start after the main element but it starts from the main element as shown in a screenshot

If we refer back to our html, we will see that the content container has the aside container in it, this is why it is covering the whole width of it.

Now if I change the position of the aside element to float: right;

aside{
   float: right;
   background-color: #afea9e;
}

Refresh the screen you will notice the aside element is now floated to the right.

Another thing you will notice that when you do float right or left, the width of the container that you actually did left or right will no long cover the full width of the area but it will shrink it to the area it needs, it will not stretch more than it needs to. If you want to make it a little bit bigger you can put the width of 100px like such

aside{
   width: 100px
   float: right;
   background-color: #afea9e;
}

Refresh the screen and you see the aside element got bigger.

You notice that the footer element is wrapped around the main and the aside element, we need to fix that. Another problem we have is that why is the wrapper is not covering the entire area as it was before?

Let's solve the wrapper div problem first. When you apply a property called overflow: and the value of hidden like such it will act normally now

.wrapper{
   width: 100px;
   background-color: #fffffff;
   padding: 30px 30px 30px 30px;
   padding-bottom: 0px;
   padding-top: 10px;
   box-sizing: border-box; 
   margin: 30px
   overflow: hidden;
}

The reason is acted unnaturally is because when you did float left it took the main element and put him on the left hand side and it was enough for the main element to shrink itself. When you put the overflow property, it will actually stretch itself to its natural areas so that it encompasses which is inside it. overflow: hidden; property has to be applied to the parent property which is unnaturally being shrinked.

Now we are going to solve the footer problem, you notice the footer element is wrapping itself around the main and the aside element. We just want it to be on its own place. We are going to use the clear property and provide it a value of both.

footer{
   clear: both;
}

What it does is that it will say that wherever the footer element is, we do not want anything on the right hand side or the left hand side. And it will cover all the area that it wants to.

In this lesson we learned the most vital concepts of CSS. We learned when you float left or right, it has some side effects like the container it is in will shrink itself, and to unshrink it, you will do overflow: hidden; And a lot of times some elements will shrink around it and to push it away, you will have to do clear: both; left or right depending on the situation.

I hope you enjoyed this lesson, if you have any question please leave your comments below. I'll talk to you in the next lesson. Good bye :)