Sat, 2008-11-08 14:34
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;
}
Sat, 2008-11-08 19:38
#1
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
Sun, 2008-11-09 10:39
#2
Sorry, you are right ere is
Sorry, you are right
ere is the link
www.unionjackstudio.hu/MBT
Sun, 2008-11-09 11:41
#3
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.
Sun, 2008-11-09 14:12
#4
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
Sun, 2008-11-09 18:15
#5
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.
Sun, 2008-11-09 18:42
#6
Thank you! I've read the
Thank you! I've read the artice, and I think, this might work!
Thank you for your help!
Sun, 2008-11-09 19:43
#7
Any problems implementing
Any problems implementing the technique post back with what you have tried and we'll help out.
Mon, 2008-11-10 17:44
#8
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
Mon, 2008-11-10 19:00
#9
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.
Tue, 2008-11-11 16:06
#10
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
Tue, 2008-11-11 19:24
#11
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.
Wed, 2008-11-12 14:39
#12
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!