CSS Columns

shazman · December 7, 2010

I'm having some problems with my CSS layout. I've attached an image to describe what I'm trying to get.

My problem is that I can't get #container to stretch to the footer.

This is what my code looks like:

#header {
margin-left:auto; margin-right:auto; padding:24px; clear:both;
display:block; width:813px; height:133px;
background-image:url(../images/yHeader.png); background-repeat:no-repeat;
}

#container {
margin-left:auto; margin-right:auto; padding:0px 24px;
display:block; width:813px; height:auto;
background-image:url(../images/yMiddle.png); background-repeat:repeat-y;
}

.contentText { /* column1 */
color:#000; width:548px; float:left;
padding-left:8px; padding-right:8px;
}

.sidebar { /* column2 */
color:#000; width:229px;
border-left:#CCC solid 1px;
padding-left:8px; padding-right:8px;
float:right;
}

#footer {
margin-left:auto; margin-right:auto; clear:both;
display:block; width:861px; height:24px;
background-image:url(../images/yBottom.png); background-repeat:no-repeat;
}

You can view the actual site if it helps.

haku · December 7, 2010

http://www.cssstickyfooter.com/

fortnox007 · December 7, 2010

I had some spare time and since i like doing it here is something to get the idea, with extra (hopefully usefull) comments in the css. Note though... the borders and colors are just for making contrast ::)

The HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>css</title>
        <link type="text/css" rel="stylesheet" href="css/style3.css" />
    </head>
        <body>
            <div id="wrapper" class="center">
                <div id="header" class="center clear"><p>HEADER</p></div>
                <div id="container" class="center">
                    <div id="leftcolumn" class="float-left"><p>LEFT COLUMN</p></div>
                    <div id="rightcolumn" class="float-left"><p>RIGHT COLUMN</p></div>
                </div>
                <div id="footer"><p>FOOTER</p></div>
            </div>
        </body>
</html>

The CSS

/* ------------------
positions:
-------------------
#wrapper  <------ this one is added
#header
#container
#leftcolumn
#rightcolumn
#footer

*/

body{
    padding:0;
    margin:0;
    background: white;
}
p{
    text-align: center;
    font-weight: bold;
}
/* -------------------
general stuff:
--------------------- */
.center{
    margin: 0 auto;
}
.float-left{ /* float can't be centered so work with margin's'*/
    float:left;
}
.float-right{
    float:right;
}
.clear{
    clear:both;
}
/*--------------------
layout:
---------------*/
#wrapper{  /*this wraps around all divs */
    width: 960px; /*nice screenwidth */
    height:100%;
    border: 1px solid black;
    background:orange; /* purple like */
}
#header{
    width: 940px;
    height: 80px; /*if you increase this the height of #wrapper will wrap and match the end */
    background:#57b4ff; /*light blue */
    border: 1px solid red;
    margin-top: 3px; /*just some extra margin to make it more clear */
}
#container{/*you might consider removing this */
    width:940px;
    min-height:80px;/* percentage is nice when it contains elements with heightso i stretches till the height of the inner element */
    height: 100%;
    background:#5F6565; /*brownish crap*/
    border:1px solid blue;
    overflow:hidden; /* !!!!-> to wrap around the floated elements left&rightcolumn because they float  <-!!!!*/
    padding: 3px 0; /*just some padding top and bottom so divs are more clear */
}
#leftcolumn{
    width:700px;
    min-height:100px;
    background: white;
    border:1px solid red;
    margin-left: 8px; /* get some margin from left since it is floated left!! this is probbaly not the right amount of pix */
}
#rightcolumn{
    width:220px;
    min-height:100px;
    background: #cccccc; /*grey*/
    border:1px solid white;    
}

Love to hear if this was useful

cheers!

Johanna

P.s. nice designs on your site, what program you use for such 3d stuff?

haku · December 7, 2010

I probably should have actually looked at the site before posting my last post.

You can fix the problem by adding:

overflow: auto;

To #container.

shazman · December 7, 2010

Thanks. Overflow worked perfectly.

fortnox007 · December 7, 2010

Thanks. Overflow worked perfectly.

i hope you took the time to read the post above that too took quite some time to custom make that. ::)

Sign In

CSS Columns

Recommended Posts

shazman

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

fortnox007

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

shazman

Link to comment

Share on other sites

fortnox007

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information