Need CSS Help

[danklumpp]

Click Here for My Website

That div directly beneath the search bar:

I want to make that the same height as the div with the words in it.

I tried putting both divs inside of a container div, but when I set 100% height, it doesn't work.

 

[danklumpp]

Also, what's a good site that has a lot of useful css articles?

 

[clamum]

I'm not sure if this is the exact problem you're having, but check out notfred's equal height div experiment.

I've found HTMLDog and W3Schools to be good resources for CSS questions.

 

[jjones]

The way I usually handle these things is to put the two floating divs inside another containing div. The containing div I give whatever background I want for the background of the shorter of the two internal divs. Then I put a third div following the two internal divs and give that a style property clear: both.

This site has a lot of good links:
http://www.alvit.de/handbook/

 

[danklumpp]

Thanks jjones

I like to know why things are done, and I'm just curious why the third div is needed inside the container.

 

[igowerf]

Originally posted by: danklumpp
Thanks jjones

I like to know why things are done, and I'm just curious why the third div is needed inside the container.

The third inner div is for "clearing" the floats. When all of the inner divs are floated, the parent div doesn't expand out to actually contain them. jjones uses the third div with the clear attribute to force the parent div to expand. Read more about it here:
http://positioniseverything.net/easyclearing.html

 

[jjones]

Originally posted by: igowerf

Originally posted by: danklumpp
Thanks jjones

I like to know why things are done, and I'm just curious why the third div is needed inside the container.

The third inner div is for "clearing" the floats. When all of the inner divs are floated, the parent div doesn't expand out to actually contain them. jjones uses the third div with the clear attribute to force the parent div to expand. Read more about it here:
http://positioniseverything.net/easyclearing.html

Thanks, you explained that probably much better than I would have.

BTW, that's an interesting article. I'll still stick to the "old-fashioned" way though. I avoid using any hacks unless there is absolutely no other way to do what I want. I'd much rather have an additional line in my html than messy CSS that might break sometime down the road. Just my opinion though; I know lots of people use hacks.

 

[igowerf]

Originally posted by: jjones

Originally posted by: igowerf

Originally posted by: danklumpp
Thanks jjones

I like to know why things are done, and I'm just curious why the third div is needed inside the container.

The third inner div is for "clearing" the floats. When all of the inner divs are floated, the parent div doesn't expand out to actually contain them. jjones uses the third div with the clear attribute to force the parent div to expand. Read more about it here:
http://positioniseverything.net/easyclearing.html

Thanks, you explained that probably much better than I would have.

BTW, that's an interesting article. I'll still stick to the "old-fashioned" way though. I avoid using any hacks unless there is absolutely no other way to do what I want. I'd much rather have an additional line in my html than messy CSS that might break sometime down the road. Just my opinion though; I know lots of people use hacks.

I actually prefer to use the "old fashioned" way myself. It seems to work a lot more consistently for me across browsers and it doesn't require hacks. I thought that would be a good article to link to because it explains the issue in detail and gives several ways of "fixing" it.

 

[Trevelyan]

I know its blasphemy to say it, but I still use tables + DIVs in combination.