CSS page container

englishpremier

englishpremier

englishpremier

Soldato
Joined
15 Feb 2003
Posts
10,154
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?
 
Separate out the container into two containers - one above the full width section and one below the full width section.
 
yep was gonna say the same thing

you need two containers one with everyting within the 800px container and the other one within a container set to 100% width
 
Tiger33 said:
yep was gonna say the same thing

you need two containers one with everyting within the 800px container and the other one within a container set to 100% width
Click to expand...

Actually he will need 3.

As Huppy said, he will need to split the fixed width container into 2.

So it would be:

<------Container one, width: 800px;-------->

<------Full width container, width: 100%;--->

<------Container two, width: 800px;-------->
 
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;
}
 
create a new div called bannerbackground, set the width to 100%, then inside this have another div called banner that will hold the content.

#banner {
width: 800px;
margin-left: auto;
margin-right: auto;
}

have you got a link to the webpage you are working on? or are you developing it locally?
 
You must log in or register to reply here.
Back
Top Bottom