PDA

View Full Version : Column Heights



pmontesi
Nov 16th, 2006, 07:28 PM
Hi,

I have created a two column layout with a header and a footer. I have used one table to make the main layout grid. Everything else is done via CSS.

For the most part, this works out beautifully on all the broswers. But, I run into height problems with the two columns #navigation and #content. They don't have the same height like I want in Firefox or Opera. IE works fine.

It seems like Opera renders the heights the worst.

Take a look:

http://www.ncsmtg.com/index3.htm

http://www.ncsmtg.com/applycss.htm

The style sheet is use is styles2.css

Can anyone help me?

pmontesi
Nov 16th, 2006, 08:40 PM
Here's my style page to make things easier


html, body {
margin: 0;
padding: 0;
height: 100%;
text-align: center;
font-family: times;
color: #000000;
background-image: url('images/brick.gif');
}

p {
color: black;
font-family: times;
font-size: 12pt;
margin: 15px;
}

.asterisk {
color: red;
}

h2 {
color: blue;
margin: 10px;
}

h3 {
color: gray;
}

.center {
text-align: center;
}

/* main grid */

#header {

margin: 0px;
width: 800px;
}

#content {
padding: 0px;
margin: 0px;
width: 600px;
height: 100%;
background-color: #fff;
}

#navigation {
margin: 0px;
padding: 0px;
width: 200px;
height: 100%;
color: #fff;
background-color: #09c;
}

#footer {
margin: 0px;
width: 800px;
background-color: #0ff;
}

/* divs for header */

#logo1 {
border: solid thin #0099CC;
border-width: 1px;
}

/*divs for navigation bar */
#navlist {
list-style: none;
}

#navlist li {
padding-left: 20px;
padding-bottom: 5px;
background-image: url('images/bullet-news.jpg');
background-repeat: no-repeat;
}

A.navnews:link {color: #FFFFFF; text-decoration: none}
A.navnews:visited {color: #FFFFFF; text-decoration: none}
A.navnews:hover {color: #8b008b; text-decoration: underline}
A.navnews:active {color: #FFFFFF; text-decoration: none}

/*divs for content */

.heading {
float: left;
margin: 10px;
}

.pic {
float: right;
margin: 10px;
}

.highlight {
padding: 5px;
margin: 20px;
}

.housing {
float: left;
margin: 10px;
}

.seal {
float: right;
margin: 10px;
}

/* form divs */

form p {
width: 550px;
clear: both;
}

form p label {
display: inline;
float: left;
width: 330px;
}

form p input, form p textarea, form p select {
margin: 0;
}

/* divs for footer */

.insideBracket {
color: blue;
}