The Foursquare Blog

I also need to tweak the CSS for this site. I like the default layout more than the rest, but there were some items that just didn't work for me.

One was that the date was on a line of its own. Since everything is HTML templates and CSS, I thought this would be easy. But obviously I'm rusty on my CSS!

So, boiled down, my problem was:

	<div class="container">
		<div class="element1">...<div>
		<div class="element2">...<div>
	<div>

If I make element1 to float left, and 2 to float right, then the container suddenly decides that it doesn't "contain" anything anymore, and the elements overflow the small container div, making it disappear.

There were two ways to fix this:

1) Add an empty clearing div:

	<div class="container">
		<div class="element1">...<div>
		<div class="element2">...<div>
		<div style="clear: both;"><div>
	<div>

This now expands the container to the bottom of both elements.

or,

2) Use the automatic overflow mode in the container:

	# css
	.container { overflow: auto; }

	<div class="container">
		<div class="element1">...<div>
		<div class="element2">...<div>
	<div>

Thanks to the kind folks on freenode's #css channel for pointing me to the following sites:

• http://phrogz.net/css/understandingfloats.html (very good!)
• http://css.maxdesign.com.au/floatutorial/