warbel
08-09-2011, 03:03 AM
Hi!
I have a problem with my footer ... it doesn't stay where i want it to stay :(
I want my footer to be under everything, but it keeps going to wrong place .
My HTML looks like this:
<body>
<div id="wrapper">
<div id="header">
<div id="field1"></div>
<div id="field2"></div>
</div>
<div id="menu">
<div id="field3"></div>
<div id="field4"></div>
<div id="field5"></div>
</div>
<div id="container">
<div id="field6">
<div id="field8"></div>
<div id="field9"></div>
</div>
<div id="field7">
<div id="field10">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
and CSS looks like that:
#wrapper {
width:1000px;
height:auto;
margin-left:auto;
margin-right:auto;
}
/*header*/
#header {
width:1000px;
height:250px;
margin-left:auto;
margin-right:auto;
}
#field1 {
width:250px;
height:250px;
float:left;
background-color:#333333;
}
#field2 {
width:750px;
height:250px;
float:right;
background-color:#666666;
}
/*menu*/
#menu {
width:1000px;
height:40px;
margin-left:auto;
margin-right:auto;
}
#field3 {
width:700px;
height:40px;
float:left;
background-color:#999999;
}
#field4 {
width:200px;
height:40px;
float:left;
background-color:#000000;
}
#field5 {
width:100px;
height:40px;
float:right;
background-color:#333333;
}
/*container*/
#container {
width:1000px;
height:auto;
margin-left:auto;
margin-right:auto;
}
#field6 {
width:250px;
height:500px;
float:left;
}
#field7 {
width:750px;
height:auto;
float:right;
}
/*field6*/
#field8 {
width:250px;
height:250px;
background-color:#333333;
float:left;
}
#field9 {
width:250px;
height:250px;
background-color:#666666;
float:left;
}
/*field7*/
#field10 {
width:740px;
height:auto;
margin-left:10px;
margin-top:10px;
background-color:#999999;
}
#footer {
width:1000px;
height:40px;
margin-left:auto;
margin-right:auto;
background-color:#FF0000;
}
I know that my footer goes there because of container .. if i put specific height for it, it's all good, but i want it to be auto. I tried even deleting field7 and only leave field10 with auto height, but it still didn't work, footer was once again in wrong position..
What i'm asking you guys is what should i do to get footer to right position and leave field10 with auto height..
Damn i hope you understood what i meant.. :D anyways, i hope you can help me :)
Mart.
I have a problem with my footer ... it doesn't stay where i want it to stay :(
I want my footer to be under everything, but it keeps going to wrong place .
My HTML looks like this:
<body>
<div id="wrapper">
<div id="header">
<div id="field1"></div>
<div id="field2"></div>
</div>
<div id="menu">
<div id="field3"></div>
<div id="field4"></div>
<div id="field5"></div>
</div>
<div id="container">
<div id="field6">
<div id="field8"></div>
<div id="field9"></div>
</div>
<div id="field7">
<div id="field10">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
and CSS looks like that:
#wrapper {
width:1000px;
height:auto;
margin-left:auto;
margin-right:auto;
}
/*header*/
#header {
width:1000px;
height:250px;
margin-left:auto;
margin-right:auto;
}
#field1 {
width:250px;
height:250px;
float:left;
background-color:#333333;
}
#field2 {
width:750px;
height:250px;
float:right;
background-color:#666666;
}
/*menu*/
#menu {
width:1000px;
height:40px;
margin-left:auto;
margin-right:auto;
}
#field3 {
width:700px;
height:40px;
float:left;
background-color:#999999;
}
#field4 {
width:200px;
height:40px;
float:left;
background-color:#000000;
}
#field5 {
width:100px;
height:40px;
float:right;
background-color:#333333;
}
/*container*/
#container {
width:1000px;
height:auto;
margin-left:auto;
margin-right:auto;
}
#field6 {
width:250px;
height:500px;
float:left;
}
#field7 {
width:750px;
height:auto;
float:right;
}
/*field6*/
#field8 {
width:250px;
height:250px;
background-color:#333333;
float:left;
}
#field9 {
width:250px;
height:250px;
background-color:#666666;
float:left;
}
/*field7*/
#field10 {
width:740px;
height:auto;
margin-left:10px;
margin-top:10px;
background-color:#999999;
}
#footer {
width:1000px;
height:40px;
margin-left:auto;
margin-right:auto;
background-color:#FF0000;
}
I know that my footer goes there because of container .. if i put specific height for it, it's all good, but i want it to be auto. I tried even deleting field7 and only leave field10 with auto height, but it still didn't work, footer was once again in wrong position..
What i'm asking you guys is what should i do to get footer to right position and leave field10 with auto height..
Damn i hope you understood what i meant.. :D anyways, i hope you can help me :)
Mart.