2 replies [Last post]
burton
Offline
Regular
NC
Last seen: 15 years 17 weeks ago
NC
Joined: 2007-02-13
Posts: 11
Points: 0

Hello, I am extremely new at css, just learning now from other templates and tutorials I have found on the internet. Pretty much all the design jobs in my area have started requiring CSS knowledge or consider it a plus. So I guess it's time to get wit it. . . anyway, heres the problem . . .

#wrapper only goes below the navigation bar, even though it's div is closed at the end of the document? . . . I want it to be a container for the whole page, not just the header and nav bar, it should contain #centercolumn #rightcolumn and #footer, any one have some insight on this?

Preview code at
http://www.godly411.com/

CSS CODE

* {

padding: 0;

margin: 0;

}

body {

font-family: Arial, Helvetica, sans-serif;

color: #666666;

font-size: 12px;

}

#wrapper {

width: 915px;

margin: 0 auto;
border: 1px solid #ccc;

}

#navbar {

border: 1px solid #ccc;

margin: 5px 5px 5px 5px;

padding: 4px;

background-color: #A3A38F;

}

#header {

border: 1px solid #ccc;

margin: 5px 5px 0px 5px;

height: 105px;

padding: 0px;

background-color: #C9C9BE;

}

#centercolumn { /* Parent Wrapper for inside boxes */

border: 1px solid #ccc;

margin: 0px 5px 0px 5px;

display: inline; /* IE Hack */

padding: 4px;

width: 71.3%;

float: left;

min-height: 300px;

}

* html #centercolumn {height:300px} /* IE Min-Height Hack */

#rightcolumn {

margin: 0 5px 0px 0px;

padding: 4px;

display: inline; /* IE Hack */

width: 24%;

float: left;

border: 1px solid #ccc;

background-color: #DAC8BF;

min-height: 300px;

}

* html #rightcolumn {height:300px} /* IE Min-Height Hack */

#footer {

background-color: #A3A38F;

margin: 5px 5px 5px 5px;

display: inline; /* IE Hack */

padding: 4px;

float: left;

width: 97.7%;

}

HTML CODE

CSS Layouts - 2 Column Layout - 15

This is my Navigation Bar

This Column is My Main Content Area

 

 

 

 

 

 

 

 

This is my Right Column

 

 

 

 

 

 

 

 

 

 

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

A very common question, css

A very common question, css grasshopper. You need to contain your floats. There are a number of ways, do a search for more in depth information. One way is to add overflow: hidden; to #wrapper.

burton
Offline
Regular
NC
Last seen: 15 years 17 weeks ago
NC
Joined: 2007-02-13
Posts: 11
Points: 0

I guess I was searching all

I guess I was searching all the wrong keywords .. . anyway, thanks for your help, your solution worked for me Smile.