Float Center?
Never thought of it, but I was up for the challenge.
December 8, 2010 - Posted in CSS, Quick Tips
Comments Off
I’ve been asked, on multiple occasions, “could you float the image in the middle?” At first I couldn’t really think of a practical use for it and never really made much of it. Then one day, I was reviewing a design comp and there it was, an email newsletter signup box right in the middle of 2 columns of text.
I couldn’t really turn it down this time, so I finally had to figure out a way to float an item in the middle. Oh and another kicker, it had to be functional in IE6!
In order to achieve this, I create a standard two-column layout, each with a floated blank image, and used absolute positioning for the centered box.
The code is fairly self-explanatory. The CSS is commented, but here are the key things to note.
I rarely recommend using a fixed height. Container heights should be determined by the content. I haven’t been able to figure out a way to achieve the centered float without specifying a height. I’d love to hear about a solution!
- The absolute positioned item must have a width and height
- The spacer image must have the same height as the absolute positioned item
- Using em’s for the height is for accessibility reasons. The height will increase based on the font size and prevent any overlapping from happening.
Please view feel free to use and modify the source from the example. I’ve included two samples: a condensed straight to the point version, and one based on the OOCSS concept. If you haven’t heard of OOCSS, I strongly suggest you watch Nicole Sullivan’s presentation. There is loads of great information and is very practical on large scale projects
View Demo (OOCSS) | View Demo (Simple CSS)