This problem has been bugging me for the past couple of days. Hopefully someone here can help me out!
If you take a look at the image below, my problem should be pretty clear!
As you can see I have a series of divs (that have different heights) and I want them to float side by side, the problem is, the only way they will float side by side is if I assign a specific height to .post:
Whilst that works perfectly fine, it isn’t what I want. What I want is for the divs to float side by side, WHERE the content defines the height of the div automatically.
Any ideas on how I would solve this problem? I’d very much appreciate the help.
As mentioned above just clear each pair of floats before you start the next pair. Either with a parent container as mentioned above or even an empty clearer div underneath each pair of floats.
Yes but in your case the container won’t encompass the float (because it doesn’t contain them) and you can lose the bottom margins on floated elements in IE6 unless you use a hard clearer.
However I agree and wrapping the divs is usually the best option
Now I’m not an expert on PHP but if you take a look at my Wordpress Index.php below you’ll see that only one “.post” if defined as opposed to two “posts”, so if I clear “.post” I’ll end up clearing all 6 posts that are displayed on the front page.
I’m assuming that you could simply change the php to the format that was required but that would be a php question for the php forum.
You could change .post from being floated to display:inline-block instead although it may be a little awkward.
I appreciate the responses guys but it isn’t that simple:
Now I’m not an expert on PHP but if you take a look at my Wordpress Index.php below you’ll see that only one “.post” if defined as opposed to two “posts”, so if I clear “.post” I’ll end up clearing all 6 posts that are displayed on the front page.