Float, Centering and More¶

There are a few additional items and related material for this reading that is not essential, but can be helpful.

Text Shadows¶

You may have noticed a bit of eye candy in the .detail-image-title, namely a "drop shadow". This gives the illusion that the text is casting a shadow, by redrawing the text in another color (typically dark gray) below and to the right of the text (though you can cast the shadow in different directions if you want).

Here's the CSS:

.detail-image-title {
  ...
  text-shadow: rgba(0, 0, 0, 0.9) 1px 2px 9px;
  ...
}

Here, the color is 90% opaque black.

The easiest way to see the effect is to use the developer tools and toggle the text-shadow on and off, while looking at the detail image title.

See here for more info about text-shadow.

Flexbox versus Float¶

Flexbox is relatively new (circa 2014, though proposals go all the way back to 2009). Prior to widespread support for flexbox, web developers used float, which still has some useful features and is still worth knowing about.

Here's a simple example of float, where we get the text to wrap around an image:

Float causes the floated elements to be

1. Removed from the flow, so that later stuff moves up on the page, and
2. shoved back into the page, causing block elements to overlap it and inline elements to wrap around it.

The example above shows the idea. Hermione's picture is floated (to the left in this case) and the paragraph text (inline elements) flows around it.

Centering Block Elements and Text¶

People love centering, particularly novice designers. Centering moves things away from the edges, which makes it feel more comfortable, without having to decide how much to move it. But there are two kinds of centering. There's centering block elements and centering inline elements like text. Let's start with centering text:

Centering Text¶

Centering text is pretty easy: just specify text-align:center on its parent element (or, in general, some ancestor, since the setting is inherited.)

You should almost never center lines of text in a paragraph. You get ragged edges left and right, which looks ugly. Also, depending on the font, amount of text and the width of the region, the last line may be weirdly short (and centered). Here's a Tolkien quote:

You probably don't want that single word centered on the second line. But that can happen (and all-too-often does) when you center text and don't have complete control over browser-width, font-size, and the like.

Instead, what you probably want is to have normal, left-aligned text in a box that is itself centered. Let's see how to center boxes.

Centering Blocks¶

Here's an example of a block element (blue background) centered within its container (red border):

Note that, by default, block elements are width:100% which means that they are as wide as their container will let them be. So, by default, centering is not possible, because there's no extra space to center within. Therefore, to center a block element, you usually have to set its width to something smaller than its normal width. The blue block above is 80% of its container. One exception is IMG elements, since they get their width from the actual image, not from the container. However, pictures are often quite wide, so you typically have to scale them down using a width setting anyhow.

The trick to centering a block element is to set its margin-left and margin-right to auto. Auto margins means to take whatever space is leftover in the container and distribute it equally to the two margins.

The example above used a shorthand: margin:10px auto which means the top and bottom margins are 10px and the left and right are auto.

Galleries with Floating Elements¶

We often want galleries of elements, where there should be as many on a line as will fit, but fewer if necessary, without any horizontal scrolling. One way to do that is by setting display:inline-block and set the width on the gallery elements, which allows you to put arbitrary content in each element, while still having them fill the line like inline elements.

Another way is to use float:left as shown by W3schools Gallery

Summary¶

We learned mostly about float:

• float removes an element from the flow, allowing later stuff to move up, and then re-inserts it, forcing that stuff to flow around it.
• Useful for pictures combined with paragraphs and for image galleries and such.