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

vertical stretching divs

Status
Not open for further replies.
JKdesignz

JKdesignz

Technical User
Feb 2, 2005
18
NL
allright, i managed to stretch a div horizontally, now i bumped into another problem which you probably can guess...
vertical stretching :S, i put up a css file, so it can be examined more easily, my page is still very premature so normally i would make a css file when i got the design perfectly clear. enough talk, here are my codes

my xhtml:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
		<head>
			<style type="text/css" media="screen">@import url(dcon.css);</style>
		</head>
		<body>
			<div id="topbar"></div>
			<div id="navbar"></div>
		</body>
</html>

my css:
Code: 
body
{
	margin: 0px; 
	padding: 0px
}

#topbar
{
	background-color: green;
	width: 100%;
	height: 90px;
}

#navbar
{
	position: relative;
	background-color: green; 
	width: 90px;
}

Thou shalt be victorious!!
 
Sort by date Sort by votes
I want to stretch my div vertically on the left so it fills the whole left side even when the page overflows and people have to scroll down

Thou shalt be victorious!!
 
Upvote 0 Downvote
Try putting the NAVBAR div at the end of the XHTML after all the content, so the page is fully constructed when the browser goes to format the NAVBAR div. Counter-intuitive, I know, but it might work.



Mike Krausnick
Dublin, California
 
Upvote 0 Downvote
ok, i get it.. but atm this is my whole page so the navbar div is already at the end. the problem is, when i render the page you can see the navbar, but it's not stretched, on the contrary, it's rendered just a bit :S

Thou shalt be victorious!!
 
Upvote 0 Downvote
Upvote 0 Downvote
so i don't color the div? can you give a code example, so i can visualize what yo mean

Thou shalt be victorious!!
 
Upvote 0 Downvote
Hard to show code, it's a graphic trick.


umm
Imagine the following is my background "tile"
Code: 
< ------- entire width of my page ---------->
 ____________________________________________
|  blue   |            yellow                |
|_________|__________________________________|

<-- nav --><--------- content area ---------->

So you have a thin, wide strip with the nav background colour at one end.
Put this as the background to your page body with CSS, like so

Code: 
body { background:url(myImage.jpg) top left repeat-y; }

So the strip repeats vertically only leaving you with a full page that has a coloured strip down the one side.

Now, create your code as before, but set the background of your nav div to be transparent, showing the colour underneath.
It then doesn't matter if the div itself doesn't extend down the page as the page background makes it appear that way.

This may not be the right solution for what you wish to do, but it is much easier than making the nav div extend the full height of the window.

It's a trick called "Faux Columns" you can read a much better description of it at

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
305
tyutghf
tyutghf
k4ghg
  • Locked
  • Question
Liquid vertical bar 1
Replies
2
Views
95
k4ghg
k4ghg
yaknowss
  • Locked
  • Question
Create divs with different background colors
Replies
1
Views
82
ChrisHirst
ChrisHirst
southbeach
  • Locked
  • Question
Help with DIVs and CSS to render ROWS/COLS like grid
Replies
4
Views
118
southbeach
southbeach
tshad
  • Locked
  • Question
Aligning divs
Replies
16
Views
182
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top