Using <div>…</div> tag pairs

view HTML source for this page

On this page are some examples of how you can create rectangular box areas on a web page. These boxes are made with the HTML tag pair <div> ... </div>.

This technique is very powerful for creating more complicated page layouts, as we’ll soon see when we start using CSS.

For now, let’s see how these boxes work, with the <div> ... </div> tag pairs. Remember that paired tags always enclose the content they are designed to affect!. Here are some examples.

This is a box with a light gray background (and two paragraphs in it) that is 150 pixels high, and always stretches the full width of the window. Notice that, in addition to wrapping the paragraph with the paired <div> </div> tags, we are also adding a visual style to the opening <div style="xxxxxx"> tag. This style sets the background color of the box, so we can see where it is on the page.

Try making the window very narrow and see what happens. See how it is always the full width of the window? What about the height?

This is another div box with a fixed size (both height and width). Notice that it does NOT change size ever.
This box is another way to go. Notice that the width is always a percentage of the entire window. And that the height takes up only as much as is necessary to contain this paragraph. That’s because NO height is specified.

This div box has a border around it, so we can see exactly where its boundaries are. This will be a great tool for designing content on a page. This border comes from another style attribute in the opening <div> tag. Notice that the text runs right up to the edges of the box, which might not be so nice always.

In this paragraph, I added some margins to the paragraph style: 15 pixels on each of the left and right sides. I’ll fill the rest of paragraph with some more text so you can see it better. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lectus risus, varius id luctus porttitor, viverra in eros. Nam congue, ipsum quis iaculis lobortis, metus mi dictum quam, sit amet faucibus lacus tellus nec elit.

In this box, with three paragraphs, I set all four margins (left right top bottom) so that the text always floats in the center of the box. And here, I used the percentage trick again to keep a constant visual margin, not just a fixed size margin. And notice that the border is a double line.

Anyone know what the text in the next paragraph is from?

Stately, plump Buck Mulligan came from the stairhead, bearing a bowl of lather on which a mirror and a razor lay crossed. A yellow dressing gown, ungirdled, was sustained gently behind him on the mild morning air. He held the bowl aloft and intoned:

Now, for the next example, notice that boxes can be nested inside of each other, and can contain stuff other than just text. In fact, they can contain any other HTML code:

The outer box

A box inside the outer one

This box has four things in it:

  1. The H3 heading: “A box inside the outer one”
  2. This paragraph, which contains this bullet list
  3. Another paragraph that contains the logo and caption
  4. The innermost box, with the silver background


The RHS logo

An innermost box with a margin to set it off from the inner box

And there’s a lot more fun where this came from, too…

Advertisement