CSS issue

Status
Not open for further replies.

garycocs

New Member
Hi lads,

Quick one for ye there, sorting out a new site there and I've a problem with the divs lining up.

Check out this page for an example.

The Matrix Reloaded (2003) @ Movies Twit.com

What I want is for the div class=ratebox to fill the div id=block_content, for some reason the div block contents height is not stretching to allow for the ratebox???

Sorry if this isn't making any sense, I suppose I just want it to look like this:

The Shawshank Redemption (1994) @ Movies Twit.com

Thanks
Gary
 
D

Deleted member 444

Guest
Looks like you need to clear your floats.
Try sticking style="clear: both;" into either your footer div or a new blank div above it.
 

garycocs

New Member
Css always gets me, but this makes sense. Basically the main divs shouldnt be float left only the inner ones.
 

garycocs

New Member
Hi Lads,

Thanks for your help, I've added that piece of code in there, but for some reason the inner div is not expanding out the outer div? I'm sure I'm doing something wrong I just don't know what?

Also notice the footer text, how do I go about floating this from the bottom up so it's all ways in the same position at the bottom.

Thanks
Gary
 

php.allstar

New Member
Hi,

ad

float: left;

to the css rule for #block_content

Code:
#block_content {  
    background-image:url(../images/blank_back.jpg);  
    background-repeat:repeat-y;  
    width:755px;
    padding:0px 120px 0px 125px;
        float: left;
}

If you want to send your footer text to the bottom of the page try this:

#footer {
background-image:url(../images/footer_back.jpg);
background-repeat:no-repeat;
height:304px;
min-height:44px;
padding:260px 120px 0 125px;
width:755px;
}
 

garycocs

New Member
Cool,

That's sorted out that problem, what's the deal with that anyway? Adding float lefts here and removing them there. Boggles the mind :)

As for the footer I think I'll have to figure out some boxes I can put at the bottom of the page as with just the text there it looks very bare.

Thanks for your help and I am open to any suggestions you might have for the site.

//Gary
 

php.allstar

New Member
Glad it worked.

As for why it worked heres my attempt at an explanation...

If the child element (.rateBox) of a parent (#block_content) has a height, the parent element will adjust its own height to accommodate the height of the child element.

However when the child element is set to float, the parent element no longer knows the height of the child element so the parent element retains its own height.

However, both the parent element and the child element are set to float, they can both talk to each other so the parent now knows the child elements height, it will adjust its own height accordingly.

This is probably explained poorly, but I hope you get the jist of what I was trying to say!

Best of luck with it.
 

garycocs

New Member
Ah that makes it a whole lot clearer, thanks for that!!

It's weird, can code away in php etc no problem but getting my head around css is always a challenge!!

Any css cheat sheets you could recommend??
 
Status
Not open for further replies.
Award-winning Mac antivirus and Internet security software
Top