Define the width of a layer with CSS

One of the best ways to layout our websites is using layers (mainly elements DIV). Once we define the structure of our document HTML through the layers we can layout and style it with CSS. Define the width of a layer with CSS should be one thing, a priori simple. But we will see that something or other must be taken into consideration.

The structure of our document HTML could be the following:

<div id="teams">
  <h2>Teams</h2>
  The teams that have presented themselves are FC.Barcelona, ​​Real Madrid, At. Madrid and Betis.
</div>

<div id="goalscorers">
  <h2>Scorers</h2>
  This season's scorers are Villa, Diego Forlan, Messi and Cristiano Ronaldo.
</div>

As we can see, we have two layers (that of soccer teams and that of scorers). One important thing is that we have given a ID to the layers. Since through that ID we are going to give a width to these layers.

If we want to define the width of a layer with CSS we must use the width. Thus our style sheet CSS will look like this:

#teams{
  width:100px;
  background:red;
}

#goalscorers{
  width:100px;
  backgorund:blue;
}

We see that we use the values ​​of the ID preceded by a hash (#) to give the style CSS to the element.

We have added a background to the layer, using the background, in order to see that we have given the layers a width of 100px.

Initially we could say that we have already solved our problem and that it was easy to define the width of a layer with CSS.

Well, seeing the result, perhaps I have some doubts:

• The text «Goleadors» leaves the layer. How should it fit?
• The layers are one below the other. I thought that by defining a width, they would be placed one after the other.
• …

For now we leave the width of the layers defined with CSS. In subsequent articles we will see how to adjust those small details.