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...
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)
Ok you've got
<div class="classname" />
<div class="classname"><br /></div>
That's what's breaking it. Do that and it will float correctly.
You just need to add float:left; to your .frame wrappers and it should kick right into position.