As you have noticed so far, HTML displays content from top to bottom, with most elements stacked as blocks. Today, we will see how to use CSS to put elements everywhere in the page, in order to create more visually appealing pages.
Most web page designs on the web fall in one of the two types of layout: fixed-width or liquid.
Fixed-width design gives you more control over how your pages will look, but will cause inconvenience for users with small monitor devices (a lot of scrolling). Liquid designs, which grow or shink to fit a browser window, are better for users, but make things more difficult for you the designer. A compromise between these two types is the elastic design, which has been declining in use.
Web page layout involves putting content into different regions of the page.
In order to do this, the content needs to be in container tags such as:
nav
, header
, section
, footer
,
picture
, aside
, and the ubiquitous div
.
Keep in mind though that you don't need to use div
if it's not called
for. Elements that are displayed as blocks, such as ul
, ol
,
and p
can be also moved everywhere in the page.
float
, which will make the element float on the left or the right side
of the page. Meanwhile, absolute positioning allows you to place an element anywhere
on the page with pixel-like accuracy. This technique doesn't go well with the liquid
design, but is good for positioning things like logos, etc. that need always be
in a certain place.
Web page layout with CSS is more of an art than science, there is no formula for marking up your HTML page or creating the CSS. CSS layout is something that you will learn through experience, learning the different CSS propertis, following tutorials, and practicing a lot. What follows in this section is a set of guidelines that can be useful as you start learning about this topic.
background-image
property than the
<img>
tag. This is because you can put other information
on top of this image, without needing floating. However, you should know that
background images are not printed, thus, don't put important information
(such as maps) as background.background-image
property to put text on top of images, or use the position
property to lay images or icons on top of text.In this section, we will show with different examples how to build
float-based layouts. Such layouts make use of the float
property to position elements side by side and create columns. You can
also use float to create a wrapping effect. This is because the floated
element is removed from the flow of the document and what comes after it moves up and
wraps around the float. [Note: Your book has a very
detailed description of what the flow of a document is.]
<img>
is nested within the p
. Now, let us look at
the same page after applying a
simple style with
centered fixed-width layout (width and margin for body
),
and the rule img {float: right;}
. Notice how now
the image is strictly on the right side of the document, and the text
of the paragraph wrapping around it.
Let us now see what happens when we float a container element,
such as a div
, figure
, footer
, etc.
Here is the unstyled page,
where we put the img
inside the figure
container.
Notice how this time the images are not inline anymore.
If we apply now the floating property to the figure
,
element, we get the same effect
as before, with the distinction that
figure
already has some default values for the margin assigned
by the browser.
The float
property takes only three values: left,
right, and none. The last value is used when
you want to prevent an element from floating.
Now that we learned about the property float, let's see how it can be used to create a layout with columns.
section
and a aside
. Let's add first a aside
element to our
Hunger Games example. Then, we
apply some minimal style to this element, in order to float on the left side,
as shown below, getting now a new version
of our page.
aside { float: left; border: 1px black solid; padding: 5px; }Important Note: The width and height of every container element depends on the amount of content (text or images) inside the container.
As you see, the aside
box size can be calculated based
on the values for margin, border, padding, and content size
(e.g. the width: 185px = 0 + 1px + 5px + 173px + 5px + 1px + 0).
If you want the size of the column to be something you desire (e.g., instead of
width of 185px, to be 200px), you can do the reverse calculation to find what
the width of the content should be, using a simple equation.
For example, 200px = 0 + 2*1px + 2*5px + Xpx.
Solving this, we get width=188px
. This means that
in our rule we should set the width: 188px;
, in order
to get the real size of the column to 200px on the browser page.
One could do the same for the height, but this is not very useful, because
if the adjacent column gets more content, we'll need to recalculate. Thus, instead of setting
the height of the floating column, we set a margin for the column which is not
floating, in our example, section
. Depending on whether the floating
column would be on the left or the right side, we need to set margin-left
or margin-right
to a value slightly larger than the width of the
floating column. This is how our example
will look like with the new added rule: section {margin-left: 210px;}
.
aside
and section
(or a div
with an id
attribute).aside
) either left or right.aside
element (before the section
).aside
element.float
.margin-right: 210px;
to the section rule, in order
to allow space for the new floating element.Working with floating elements can often cause unexpected problems. In the following, we will describe two of them together with the solutions.
footer
element of a page,
when the main content is shorter than one of the floating columns.
To illustrate this problem, we modified the
Hunger Games example
to show what happens with the footer (see also image below).
Fortunately, there is an easy fix for this problem. We add the property
clear
in the rule of the element we want to stay away from the floats,
in our case, footer
.
Afetr making this change, the footer stays at the bottom of the page.
section
element to olive, and as you can see
in the photo below, the float element pops out of the container.
There are several solutions to this problem, but we will show the two simplest.
<br class="clear">
element before the end of the section
and a CSS rule for it br.clear {clear: both;}
.overflow: hidden;
.
Here is again the example with the solution.
At the beginning of these notes we mentioned that floats are the most used technique for designing layouts. However, there is another technique, positioning, which has its good uses in particular situations.
We achieve positioning of elements throught the property position
, which
can take these values:
The values absolute and fixed are very similar in their syntax (though they create different effects) and more easy to understand. The value relative is a bit more tricky, because its meaning is not in par with how we use the word in everyday language. To explain these values, we will show in the following an example for each. You should look at the HTML and CSS files of each example to better understand what is going on.
left
, right
, top
,
and bottom
. These properties specify the distance (in pixel
or some other units) from the
(0,0) coordinates of the viewport (top-left corner of the browser viewing area).
To see this in action
we have a modified version of our
Hunger Games example, and we will try to position the figure
to some other location, as shown in this
styled version of the example.
This effect was achieved with this CSS code:
figure { position: absolute; top: 350px; left: 500px; border: 1px black solid; padding: 3px; }Notice how the figure lays on top of the text. This is because by becoming absolute, the other elements are not aware of it anymore, so they cannot flow around it. Additionally, try to resize your browser window. The placement of the figure doesn't change.
figure { position: relative; border: 1px black solid; padding: 3px; width: 400px; }
figure span{ position: absolute; bottom: 15px; left: 4px; right: 4px; color: yellow; background-color: black; opacity: 0.5; text-align: center; font-weight: 200%; padding: 5px; }
aside
element remains
fixed in our example, with the code
below:
aside { position: fixed; top: 80px; border: 1px black solid; padding: 5px; width: 188px; /* this value will make sure the sidebar box will occupy 200px */ }