12 replies [Last post]
sepunx2
Offline
Regular
Last seen: 11 years 41 weeks ago
Timezone: GMT+2
Joined: 2008-10-31
Posts: 46
Points: 17

Hi!
I have a fixed css layout. A header on top, two columns under it and finally a footer at the bottom. I want the footer to move down, if one of my columns are streched to fit the text in them.
I put it another way: I want my footer to touch the bottom of my columns, even if I have two lines of text or ten pages of text in my columns.
Can anyone help me on this I'm new to css, I'm reading a book, but I can't figure it out what code I need.
Thank you.

my css code goes like this:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #313131;
}
#wrapper {
margin: 0 auto;
width: 935px;
}
p {
padding-top: 10px;
}
h1 {
margin: 0 auto;
font-family: sans-serinf;
font-size: 18px;
color: #cc0000;
padding: 10px;
}
h2 {
margin: 0 auto;
font-family: sans-serinf;
font-size: 12px;
color: #000000;
padding: 10px;
font-weight: lighter;
}
#header {
color: transparent;
width: 935px;
float: center;
padding: 0px;
height: 50px;
margin: 0px 0px 0px 0px;
background: transparent;
}
#navigation {
float: left;
width: 935px;
height: 183px;
color: transparent;
padding: 0px;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
background: transparent;
}
#leftcolumn {
color: #333;
border: 0px solid #ccc;
background: transparent;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 38px;
float: left;
}
#leftmiddle {
color: #333;
border: 0px solid #ccc;
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 450px;
width: 599px;
float: left;
}
#rightmiddle {
color: #333;
border-left: 1px dashed #666666;
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 450px;
width: 173px;
float: left;
}
#rightcolumn {
color: #333;
border: 0px solid #ccc;
background: transparent;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 38px;
float: left;
}
#footer {
width: 935px;
clear: both;
color: #333;
border: 0px solid #ccc;
background: transparent;
margin: 0px 0px 10px 0px;
padding: 0px;
}

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 4 years 17 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

A link to the page would be

A link to the page would be most helpful... or posting your html so we can see the entire scenario in action... the css alone does not help in troubleshooting. BTW there is no attribute float:center
Without seeing everything or a link I am in the dark... but adding overflow:hidden to the wrapper might do the trick. Give us a link to the page and we can fix this up for you in short order

sepunx2
Offline
Regular
Last seen: 11 years 41 weeks ago
Timezone: GMT+2
Joined: 2008-10-31
Posts: 46
Points: 17

Sorry, you are right ere is

Sorry, you are right
ere is the link
www.unionjackstudio.hu/MBT

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The footer does do as you

The footer does do as you want, trouble is that you have set a fixed height on the elements above, remove those fixed heights.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sepunx2
Offline
Regular
Last seen: 11 years 41 weeks ago
Timezone: GMT+2
Joined: 2008-10-31
Posts: 46
Points: 17

Wow! You were right! I never

Wow!
You were right! I never thought this was so easy! Thanks a lot for your help!
One more thing..
I use 4 columns, two of them on the sides are transparent to achive my effect, that my header goes wider...
If I put a lot of text in my left container column with white background, it stretches and pushes the footer down. This is perfect, but my roght container column woth white background won't stretch at all, just as long as its content requires, but this leaves a transparent part under it, because the left container colimn is larger.
I hope this was understandable
How could I link the height of the two columns, so their height stretches together, even if only one of them has more stuff in it?
Thank you

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's time to read the

It's time to read the ubiquitous article at alistapart entitled 'faux columns' this will give you an idea of the problem of equal height columns and of the favoured - though not only - approach to dealing with this using background images to create the illusion of equal height.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sepunx2
Offline
Regular
Last seen: 11 years 41 weeks ago
Timezone: GMT+2
Joined: 2008-10-31
Posts: 46
Points: 17

Thank you! I've read the

Thank you! I've read the artice, and I think, this might work!
Thank you for your help!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Any problems implementing

Any problems implementing the technique post back with what you have tried and we'll help out.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sepunx2
Offline
Regular
Last seen: 11 years 41 weeks ago
Timezone: GMT+2
Joined: 2008-10-31
Posts: 46
Points: 17

So...

So...
I'm stuck again...
I read the article and did as I was supposed to, and it work in safari and mozilla (there is a small part of my background at the bottom, but it is fixable I suppose..I tried everything with padding and margins, but couldn't figure it out), but in ie6 it is way off now.
Any idea what I did wrong?
Thank you

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not sure what is happening

Not sure what is happening here but it may be the case that you need one further element to hold both content and sidebar it's this that will take the required background or background graphic and when either content or sidebar push down further than the other they take the new parent element down with them.

Is it the dashed border that needs to run full length, if so that would be best as a graphic that your repeat vertically placed on that parent behind the content and sidebar.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sepunx2
Offline
Regular
Last seen: 11 years 41 weeks ago
Timezone: GMT+2
Joined: 2008-10-31
Posts: 46
Points: 17

Hi! ALMOST! I set up a

Hi!
ALMOST!
I set up a container div, to hold both the content and sidebar, and it works perfectly, I have the white backgound where I want to...on mozilla and safari
again...
on IE6 the whole content and sidebar is too much on the left, I need to add about 10 pixel left margin to fix it, but this way it goes 10px right on mozilla and safari. And one ore thing, in IE6, the whole layout is aligned left now...and I don't know ho to fix this either.
any help would be appriciated.
thank you

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As we say so often

As we say so often this:<?xml version="1.0" encoding="iso-8859-1"?> is not required it is only for real XHTML, remove it as it sends IE6 into a howling hissy fit where it refuses to behave and reverts to 'quirks mode' in that mode 'margin:auto' does not work, which is likely why the layout is left aligned.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sepunx2
Offline
Regular
Last seen: 11 years 41 weeks ago
Timezone: GMT+2
Joined: 2008-10-31
Posts: 46
Points: 17

Oh my God! This solved

Oh my God!
This solved everything..
I never thought of it...
I gotta spend more time with css..
Thank you very much Hugo!