CSS page container

englishpremier

englishpremier

englishpremier

Soldato
Joined
15 Feb 2003
Posts
10,194
Location
Europe
Just wondering if one of you bright CSS experts could help me out.

I'm currently desigining a site for myself. TThe site is uses a page container set at 800px ovbiousuly all elements fall within this container, e.g header, footer contents etc.. However I have one section (a horizontal row appearing mid page) that i want to take up the full width of the screen.

Is there a way within the CSS to allow this row to take up the full screen width, this everything else falls within the container?
 
hmm i'm not quite sure i understand or at least i don't know how to go aobut it.

It is not the content that I want to be full width but an image (background) so this is all set in the CSS.

Here is my current code. Its the Banner background that I want to be full width. The content in this banner however should stay at 800px width


Code: 
html, body {
    margin: 0;
    padding: 0;
        text-align: center; /**** centre alignment for IE5.5****/
}


body {
    font-family: Arial, Helvetica, Verdana, Sans-serif;
    font-size: 12px;
    color: #666666;
    background: #ffffff;
}



.hidden {
    display: none;
}



#page-container {
    width: 800px;
    margin: auto;
        text-align: left;  /**** correcting centre alignment ****/
}

#main-nav {
    height: 36px;
    }

#header {
    height: 162px;
    background: #ffffff
              url(../images/headers/logo.gif);
  background-repeat: no-repeat;

}


#banner {
clear: both;
    background: #ffffff
              url(../images/banner.gif);
background-repeat: repeat-x;
height: 250px;
line-height: 18px;
}

#content {
        line-height: 18px;
}

#columna {
float: left;
    width: 267px;
        line-height: 18px;
}

#columnb {
    float: left;
width: 267px;
    line-height: 18px;


}

#columnc {
float: right;
width: 266px;
    line-height: 18px;

}


#footer {
    clear: both;
    height: 66px;
        line-height: 18px;
        font-family: Tahoma, Arial, Helvetica, Sans-serif;
    font-size: 10px;
    color: #c9c9c9;
    border-top: 1px solid #efefef;
    padding: 0px 25px;


}

#footer a {
    color: #c9c9c9;
    text-decoration: none;
}

#footer a:hover {
    color: #db6d16;
}

#footer #altnav {
    width: 350px;
    float: right;
    text-align: right;
    padding-top: 13px;

}

#footer #copyright {
    padding-top: 13px;
}




h1 {
    margin: 0;
    padding: 0;
}


/********navigation********/
#main-nav ul
{
list-style: none;
padding: 0;
margin: 0;
padding-left: 10px;
} 

#main-nav li
{
float: left;
margin: 0 0.15em;
    padding-top: 13px;
    } 


#main-nav li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 125px;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
} 

/* Hide from IE5-Mac \*/
#main-nav li a
{
float: none
}
/* End hide */ 


#main-nav 
{
width:70em
} 


 /***** stip margins in banner content and columns & add padding  *****/ 

#banner h2 {
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
    }
        
#banner p {
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
}

#content h3 {
    margin: 0;
    padding: 0;
        padding-bottom: 15px;
}

#content p {
    margin: 0;
    padding: 0;
        padding-bottom: 15px;
}



#columna h4 {
    margin: 0;
    padding: 0;
        padding-bottom: 15px;
        
}

#columna p {
    margin: 0;
    padding: 0;
        padding-bottom: 15px;
}

#columnb h4 {
    margin: 0;
    padding: 0;
        padding-bottom: 15px;
}

#columnb p {
    margin: 0;
    padding: 0;
        padding-bottom: 15px;
}

#columnc h4 {
    margin: 0;
    padding: 0;
        padding-bottom: 15px;
}

#columnc p {
    margin: 0;
    padding: 0;
        padding-bottom: 15px;
}

 /***** 25px further padding in banner content and columns  *****/ 


#banner .padding {
    padding: 25px;
}

#content .padding {
    padding: 25px;
}

#columna .padding {
    padding: 25px;
}

#columnb .padding {
    padding: 25px;
}

#columnc .padding {
    padding: 25px;
}
 
You must log in or register to reply here.
Back
Top Bottom