Hi,
I'm fairly new to CSS, and hopefully this is a simple task, but I cant seem to fix it anyway!

I'm not quite sure how to explain this, so I think it's better for you to see the website: http://www.sauda.net/demo
As you can see, the two articles I've called "Trouble <DIV>s" have some difference in height... I would like them both to have the height "required" by the largest article.
That means that in my example on the website I posted, the left article would have some white space under it so that it would "line up" with the right article.
How can I do this?

My CSS-file: 3.css

Welcome to the forum MrConn.

We just had the same question a few days ago in this thread. See if the information there helps.

Thanx, but I dont think this would help me... You see I dont want a min height... I want them to have the same height.
The text in the divs will be updated by php/mysql, so if the right <div> is the largest one and requires 500px I want the left one to be 500px also... But if the left <div> is the largest one and requires 550px I would like the right one to be 550px to...

You're not thinking like an illusionist! I doubt that what you really need is two divs of the same height, but rather two divs that APPEAR to be of the same height. You should read about faux columns.

***EDIT***
on further examination of your code, your problem has nothing to do with needing heights at all, but rather that your #footer is not clearing your floats properly.

Change the statement inside of the block beginning around line 215 in 3.css from {clear: left} to {clear: both}. This will clear the "trouble div" on the right also, which will always give you space you badly need at the bottom.

Hehe!
I'll read up on your link. Thank you

I'll get a link drop in

http://www.candsdesign.co.uk/article...eight-columns/

You're only wanting them to be the same height so that their header, read more link, image etc. will all line up with each other, correct?

Well there are only three things that I know of that can be done to accomplish this.

1. Have a character limit and try to ensure that the text in each item, (of course the very last item doesn't matter) is about the same and all wrap the same amount of lines.

2. Increase the width of whatever is restricting the headers so that larger headers will not wrap. Of course this isn't a great option in your case, but you could maybe increase the width some and then also include a character limit and the two together may work great.

3. Set a min-height on each text item except the last one, this way the headers, read more link etc. will line up their tops with each other. There will be more vertical space separating each item if they vary in the amount of lines they wrap, of course.

And if you have a different background for those columns or if you have borders around them then you'd probably also want to use the faux columns technique that was recommended to you already. If you have the same color behind them both as in your demo then you don't need faux columns, obviously. lol That's all I thought you were needing also until I checked out your demo.

Edit: After rereading your post it does look like you are talking about the footer problem. Well whatever you were wanting I think you have your answer out of all the posts here.

I will not be able to check any of your suggestions untill tomorrow, since... Well it's saturday! :P
But thank you for all your help!
And dont worry, I'll tell you if I still cant do it! :P

Have a great evening!

Lemme guess: you're looking at your site in IE and not FireFox, no? If you peep it in FF, you'll see what the others are reacting to here.

However, even after you fix that mess, I don't see how you could get these divs in the arrangement you have them to have the same height fluid with the content in them. You might want to consider using CSS's overflow if you want the space all evened out between the two columns independent of what's filling their content.

There is a trick where you can get two floated divs to appear with the exact same height independent of which has more content where you give a really large margin-bottom and then an equal negative padding-bottom and then hide the overflow, but I don't know if that will work for you here, and I don't have time to play with it right now.

Oh I just now checked your website in IE and I see you have more problems than I thought. Did you check your website in other browsers? You'll see more problems. I'm too sleepy to look at your code right now though.

Thank you for your help!
I finally made it by changing both the css and html a little...
After inserting "overflow: hidden;" and changing the html a little it worked great!

You can see it here: http://www.sauda.net/demo

Originally Posted by MrConn

Thank you for your help!
I finally made it by changing both the css and html a little...
After inserting "overflow: hidden;" and changing the html a little it worked great!

You can see it here: http://www.sauda.net/demo

Still needs a little help in FF if you want your heading divs to the right of your image icons rather than below them. Also, in IE 6, there's an issue with your column 3 background not showing in the right place. That's a tricky little bugger I've wrestled with before, but it has to do with an extra 3 or 4 (4 if there is bordering) px IE 6 mysteriously throws in as a sort of phantom border. You'll have to write rules for IE6 in particular to deal with that.

I'll deal with bugs when I'm "done" with the rest of the page, but thanx for the input

Check this site for how to trouble shoot css and fix issues. http://www.w3.org/Style/CSS/

Will do, thanx!

EDIT:
After a little validation and some deleting of "dead" code the page now looks good in FF also

If you could check it now and see for any errors that would be great!

Looks good . . . . though there's still that issue with column 3 in IE 6.

Will check that out...
Thanx