Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS column height 2

Status
Not open for further replies.
MasterRacker

MasterRacker

New member
Oct 13, 1999
3,343
US
I thought this would be easy, but nothing in my world is easy... ;-)

I am trying to emulate a table in css where I have a full width header and footer and two columns in the middle section. My problem is that I can't get the left column to match the height of the right column. I have both columns encapsulated in a "content" div and I was hoping that a height:100% would expand to the height of the container - but it appears that both FF3 and IE7 expand that to the full height of the window. The left column will be a menu and always shorter vertically than the right column. I feel like I'm missing something very basic here.

CSS:
Code: 
body {
	margin: 0px;
}

#header {
	height: 75px;
	background-color: #EEEEFF;
}

#content {

}

#footer {
	background-color: #EEEEFF;
}

#leftcolumn {
	width: 150px;
	position: absolute; 
	left: 0px;
	padding: 10px 0px 10px 0px;
	background-color: #EEEEFF;
	border: 1px solid #333333;
/*	height: 100%;  */
}

#rightcolumn { 
	padding-left: 155px; 
	background-color: #FFFFF7;
	border: 1px solid #333333;
}
Test page:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="textstyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="header"><div id="headertext"><br />----------Header Text</div></div>
    
    <div id="content">  
      <div id="leftcolumn">
        Left Item 1 <br />
        Left Item 2 <br />
        Left Item 3 <br />
        Left Item 4 <br />
      </div>
      
      <div id="rightcolumn">
        Right Item 1 <br />
        Right Item 2 <br />
        Right Item 3 <br />
        Right Item 4 <br />
        Right Item 5 <br />
        Right Item 6 <br />
        Right Item 7 <br />
        Right Item 8 <br />
        Right Item 9 <br />
        Right Item 10 <br />
        Right Item 11<br />
      </div>
    </div>
  
    <div id="footer"><div id="footertext">----------This is footer text</div></div>

</body>
</html>
Feel free to point out where I'm missing the obvious or making a noob mistake....
[bugeyed]

_____
Jeff
[small][purple]It's never too early to begin preparing for [/purple]International Talk Like a Pirate Day
"The software I buy sucks, The software I write sucks. It's time to give up and have a beer..." - Me[/small]
 
Sort by date Sort by votes
So it really is difficult without tables. I don't want to use javascript in this particular instance so I'll just format it to hide things.

The javascript from that link will be very useful for some other things I have in mind though. Thanks.

_____
Jeff
[small][purple]It's never too early to begin preparing for [/purple]International Talk Like a Pirate Day
"The software I buy sucks, The software I write sucks. It's time to give up and have a beer..." - Me[/small]
 
Upvote 0 Downvote
See faux columns among other css methods. (Or google/search for 'faux columns css').

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
I would suggest you remove the absolute positioning. floating may make things easier. After that, give your container a height, so that your columns inside know what to be 100% of.

And also remember that padding, margins and borders add to the final dimensions of the elements.

So try this modified CSS, and see how it works:

Code: 
#content {
height:200px;
}

#footer {
    background-color: #EEEEFF;
}

#leftcolumn {
    width: 150px;
    float:left;    
    padding: 0px 0px 0px 0px;
    background-color: #EEEEFF;
    border: 1px solid #333333;
    height: 100%;  
}

#rightcolumn {
    float:left;
    padding-left: 155px;
    background-color: #FFFFF7;
    border: 1px solid #333333;
    height: 100%;  
}


That should get your columns to be the same height.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Problem is, the right column will vary depending on content. The javascript solutions in the other links care of that except for a couple of applications I want to be script free if at all possible. I like the float idea though.

It would be so nice if CSS had a height inheritance specifier, but I suppose that would violate the basic model at some point.

_____
Jeff
[small][purple]It's never too early to begin preparing for [/purple]International Talk Like a Pirate Day
"The software I buy sucks, The software I write sucks. It's time to give up and have a beer..." - Me[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
822
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
652
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
705
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
234
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top