0

UPDATE: look at the demo here: http://amit-verma.com/template_test/

i am having a slight problem with the alignment of the footer div. i have a header at the top.

div = maincontent
{
two divs for content, side by side.
another 2 divs side by side below the content div.
}

//just to represent. i know this is not html ;)

now i want the footer div to start after the maincontent div finishes. i can do that if i specify a fixed height for the maincontent div. but i dont want to specify a height for it. if i dont specify the height, the footer div starts at the middle of the page.

what am i doing wrong?


the code

sidebar {

margin-top: 10px;
width: 300px;
float: right;
text-align: justify;
font-size: 14px;
line-height: 18px;
color: #FFF;

}

maincontent {

margin-top: 10px;
width: 620px;
height: 590px;
text-align: justify;
font-size: 14px;
line-height: 18px;

}

maincontent .rect {

width: 580px;
background-color: #dbdddf;
margin-right: 10px;
padding: 15px;

}

maincontent .square {

width: 270px;
float: left;
min-height: 270px;
margin-top: 10px;
margin-right: 10px;
background-color: #c6c7c7;
padding: 15px;

}

footer {

background-color: #b1977f;
width: 880px;
font-size: 14px;
padding: 20px;
text-align: left;
color: #FFF;

}

HTML

   <div id="sidebar">
    <div class="box">
        </div>
    <div class="box">
        </div>
    </div>

<div id="maincontent">
    <div class="rect">
        </div>
    <div class="square">
        </div>
    <div class="square">

        </div>
    </div>

<div id="footer">
    </div>
1
  • 2
    You could be doing about 503904357 things wrong, so why not include the code?
    – Finbarr
    May 13, 2010 at 11:42

3 Answers 3

0

You can 'take away' the float effect on one element and it's childs by using clear. It has 3 values: clear: left; for left floats, clear: right; for right floats and clear: both; for both, obviously.

0

Any chance you could get this hosted so we can actually see the problems? Try floating the footer left, and putting clear: both onto it.

1
  • i have hosted it onto my server.
    – amit
    May 13, 2010 at 12:07
0

Try a

clear:both;

on the content and

float:left;

on the footer

EDIT:

#footer {
background-color: #b1977f; 
width: 880px; 
font-size: 14px; 
padding: 20px; 
text-align: left; 
color: #FFF; 
float:left;
}

it DOES have the # on the CSS right?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.