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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS DIV height problem

Status
Not open for further replies.
mkrausnick

mkrausnick

Programmer
Apr 2, 2002
766
US
I'm trying to convert my table-layout site to a CSS-based site. I have defined a colored-backgound left-side navigation bar div, with HEIGHT=100% specified in the CSS definition. If the content is longer than the screen height, the left-side nav bar stops at the bottom of the screen instead of extending the full length of the content like I want.

The content-area div is specified with no HEIGHT parameter. The content is enclose in a <blockquote>.

The problem can be seen at
How do I fix this?

Thanks,

Mike Krausnick
Dublin, California
 
Sort by date Sort by votes
mkrausnick,

Here's what you can do: Create a page with a table of two coloumns. The navigation menu goes inside the left cell (in another table if you like) and the contents goes into the right cell (in a new table if you like).

That way, you're sure that the two cell are the same height!

Good Luck §;O)


Jakob
 
Upvote 0 Downvote
... by the way: your link doesn't work... heh! §;O)


Jakob
 
Upvote 0 Downvote
Try setting the min-height instead. That way it will be at least as long as the window but will stretch to fit its contents.

Kevin
A+, Network+, MCP
 
Upvote 0 Downvote
dkdude, Thanks for the feedback. My bad on the link - I ended the sentence with a period, which gets included in the link if you click it. Without the period, the link works.

I already have an 8 cell (4 rows x 2 columns) table that formats the page. I was trying to see if I could format the page without using tables for formatting. Personally I think tables are very convenient for formatting (I suppose that's why everyone uses them) but I'm trying to retrain myself to meet the future.

Philote, Thanks for the suggestion, I'll try it tonight and post the result.





Mike Krausnick
Dublin, California
 
Upvote 0 Downvote
Nevermind, my idea's not going to work.

Kevin
A+, Network+, MCP
 
Upvote 0 Downvote
Mkrausnick,
I am facing almost the problem.If u view my page in 1024*768
resolution u will notice that the left side (the gray one) does not fill the whole left side.
U can see it at If u have some solution then please let me know.

Vikram
 
Upvote 0 Downvote
OK, I got it to work, mostly. thread215-624840 gives a technique that uses basically what Kevin said - enclosing the DIVS in a wrapper DIV. It's the style of the outer div that makes it work.

thread215-644411 gives another example that uses a similar but slightly different technique.

To summarize:
[/code]
<html>
<head>
<style type=&quot;text/css&quot;>
div.canvas { width: 100%; position: relative; top: 0; left: 0; }
div.menu { position: absolute; top: 90px; float: left; width: 144px; height: 100%;
background-color: #006666; }
div.content {position: relative; top: 135px; left: 144px;
width: 80% height: 100%; padding: 2px;
background-color: #FFFFFF; }
</style>

<body>

<div class=&quot;canvas&quot;>
<div class=&quot;menu&quot;> Menu selections </div>
<div class=&quot;content&quot;> Content </div>
</div> <!-- class=&quot;canvas&quot; -->
<div class=&quot;clear&quot;></div> <!-- Turns off all float -->
<div class=&quot;footer&quot;>footer</div>
</body>
</html>

[/code]



Mike Krausnick
Dublin, California
 
Upvote 0 Downvote
Mkrausnick,

Thanx for ur help.But it does not work for me.
I still face the same problem.
 
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
785
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
622
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
664
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
210
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top