I'm designing a theme for my new blog, which is focussing on film/movie reviews. I'm trying to get three divs (styled as frames on a reel of film) to align horizontally, but they seem to be intent on arranging themselves vertically. I've tried using floats, increasing the size of the container div in both directions (even to outrageous proportions), and a couple of other tweaks; all to no avail. The design fails in IE 8, Firefox 3.6 and Chrome 3.

It's been some time since I did any web design work, so I'm probably missing the obvious here... Many thanks in advance for your help!

Update: The original URL provided did not work correctly. Please see http://reelcritic.co.uk/ instead. DNS records for that domain are currently propagating...

  • How do you float them? Can't see them in the URL you have provided. o.k.w over 8 years ago
  • Note, the link is not working at the moment due to server configuration issues :-S The HTML and CSS uploaded are correct, however. Alastair Smith over 8 years ago
  • @o.k.w The float is on the .frame divs, set to float: left. Alastair Smith over 8 years ago

3 answers

This was chosen as the best answer

Your problem is that you have position:absolute in your frame css rule ...

remove it and you will be fine .. (or set it to relative if you want to have absolutely positioned elements inside it)

Answered over 8 years ago by Gabriele P.
  • Genius, that did indeed fix it, thanks! Alastair Smith over 8 years ago

Ok you've got

<div class="classname" />

Make those

<div class="classname"><br /></div>

That's what's breaking it. Do that and it will float correctly.

Answered over 8 years ago by David Leininger
  • This didn't quite fix it, I'm afraid: the three frames piled on top of each other. Shouldn't they butt up next to each other with float: left; specified? Alastair Smith over 8 years ago

You just need to add float:left; to your .frame wrappers and it should kick right into position.

Answered over 8 years ago by Gary Hepting
  • .frame is already marked float: left; I tried adding it to the outer div (#recentposts), which made no difference. It's almost like the float: left; is being ignored, as there's no discernible difference with and without that directive. Alastair Smith over 8 years ago