Gallery Float

From CSS Discuss

Jump to: navigation, search

The Gallery Float is one of the Float Layouts . It gives a grid layout of boxes. It's often used for a gallery of thumbnails, each with a caption.

Contents

Advantages

  • it's more fluid than using a table: if the browser window is narrow, it's one column. If it's wider, you get more columns to fit.

Disadvantages

  • there is (AFAIK) no way to center the whole grid: it's either right or left aligned, depending on whether you set float:left or float:right. This isn't so bad with small boxes, but if they are larger it doesn't look too good if the overall page style involves centered elements (You can do what you like within each box)
  • under current CSS you need the next block element set to clear:both. You either need to add a dummy DIV or make sure the following "real" element has it set.
  • if you want some sort of border to the whole gallery, you again need to cheat. One method is to enclose the gallery DIV and the clearing DIV in another DIV which will have border, background etc, set.

Method

The elements are:

  • a DIV that will hold child floating elements. We'll call this the Gallery DIV
  • within this, child elements set to float:left. These can be just picture, or pictures with captions beneath them, for example. If you have text, you'll want to set the width and height properties to ensure a nice grid.
  • something after the Gallery DIV to clear the floats.


You can center the entire gallery on the page by centering the gallery DIV with margin-left:auto and margin-right:auto

doesn't work for me -- please give example
-- You need to have a width set for the auto margin's to center correctly

Example

A note on the gallery floats used on that page:

instead of using individual
<div>
for each floated element, it makes much more structural sense to use a
<ul>
and
<li>
for each element, then float (or inline) the
<li>
.

eg:

css:

ul.gallery    {list-style: none;}
ul.gallery li {float: left; width: 200px; height: 100px} /* define any appropriate width and height */

html:

<ul class="gallery">
:<li>item 1</li>
:<li>item 2</li>
:<li>item 3</li>
:<li>etc...</li>
</ul>

This way, browsers incapable of handling floats (text, handheld, etc..) will still be able to render a nicely structured content.

Addendum

IE/win has a bug that allows such floats to 'escape' from their container unless that container has a specified dimension, either height or width. Without that dimension, one or more of the top rows of floats will appear above the container, and if the container is held away from the viewport edge on the same side as the float direction, the floats will not 'wrap' until they reach the viewport edge or an external float. This makes the floats extend outside the container, possibly covering other content.


Not really a bug. According to spec, a Floated Block MUST have a width specified.
It is a bug. The problem is that the floated block escapes the containing block when the containing block has no width.

IE6 partial bug solution

See example at http://awm.adsorption.org/prog/ex/galfloat.htm.

In order to keep floats inside the
    or
    container, this container must also have the float attribute set, e.g.

    css: ul.gallery {float: left; list-style: none}

    Or, to contain a group of floats without specifying height/width for the containing box (or floating the containing box), use the Holly Hack. All Win/IE needs is a height or width specified to contain the floats.

    css: * html ul.gallery {height: 1%;}

    Win/IE will expand the height to contain the content no matter what height is set at; and other browsers are left unaffected. Detailed here: http://www.positioniseverything.net/explorer/escape-floats.html

    Personal tools