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

Make DIV tag expand to bottom of page. 2

Status
Not open for further replies.
ironhide1975

ironhide1975

Programmer
Feb 25, 2003
451
US
How do you get a CSS to tell a DIV to expand to the bottom of the page or expand as text is needed vertically.

 
Sort by date Sort by votes
A div should expand vertically with its content anyway

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
What if I want one DIV to match a DIV to the side of it that expands farther?

 
Upvote 0 Downvote
do you need the div's to be X in height or is the content completely random?

does height:100%; work?, I guess a real hackish way could be to use JS with
Code: 
onload="getElementById('DIV2').style.height=getElementById('DIV1').style.height.value;"
or make it a function call.




"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
100% doesn't work, I have two div's right next to each other and I want them to be equal length, even if one has less content than the other.

 
Upvote 0 Downvote
do you know which div will have the most content? or would you be happy to make them fixed and have an overflow scroll bar?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Is this an issue of making a background color of one div expand to match the same length of the background color of the adjacent div? If so you can use the faux column method to achieve this:


-kaht

Looking for a puppy?

silky-icon-left.gif
[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
silky-icon-right.gif
 
Upvote 0 Downvote
I read this link and this would not work on the site I am designing. I have two columns, the left column has to have a graphic at the bottom of the page, and the right will vary in length. The left has to be able to match whatever the right is expanding to.



 
Upvote 0 Downvote
ok my original post was wrong, here is a working example..
Code: 
<html>
<head>
<script>
function setheight() {
document.getElementById('DIV2').style.height=document.getElementById('DIV1').offsetHeight + "px";

}
</script>
</head>
<body onload="setheight();">
<div id="DIV1" style="width:40%; float:left; border-style:solid;">DSFsdfsdf sdfs df sdf sdf sdfsdf  sdfsdfsdf<br />
sdf fsdfsdfsdf<br />
dsfsdf<br />
sdf<br />
sdf<br />
sd<br />
fsd<br />
fsd<br />
f<br />
sdf<br />
sd<br />
fsd<br />
</div>
<div id="DIV2" style="width:40%; float:left; border-style:solid;">DSFsdfsdf sdfs df sdf sdf sdfsdf  sdfsdfsdf<br />
sdf fsdfsdfsdf
</div>
</body>
</html>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Can I just add that I've never yet found a layout I cannot do using the faux column method (go on, someone prove me wrong :) )

Its often simply a case of taking a step back and reconsidering how your page is structured.
Putting a graphic at the bottom of one of the columns should not be that difficult.
Have you considered putting the graphic outside the column and using a negative margin or absolute positioning to get it in the right place?

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
 
Upvote 0 Downvote
I beleive you foamy, you guys normally know the "right" way of doing things, I never claimed this was anything other than "hackish" ;-)

I'd also point out that my example displays slightly different in I.E. to FF , but that is probably default margin/padding that needs addressing.

The problem i find with CSS is the long way (using JS and lot's more code) is easier to understand and acheive results than CSS, maybe this is because of browser issues not CSS itself, or maybe it's because CSS is such a different concept to the old way of doing things it takes time to get your head round it.

I would also point out that the 'faux column method' , makes the div stretch to the lenght of the page, not make 2 divs same in length dependent on one columns dynamic content :p


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
I would also point out that the 'faux column method' , makes the div stretch to the lenght of the page, not make 2 divs same in length dependent on one columns dynamic content
Click to expand...

Think about it a bit more.
And contemplate that different way of thinking.


It actually will expand the columns to the height of the containing element. Who said anything about that being the page?

:)

Horses for courses really. I've done it with Javascript too, but prefer using a CSS method since you are dealing with style and not behaviour.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
 
Upvote 0 Downvote
Who said anything about that being the page?
Click to expand...
they did - lol
The cheat
The embarassingly simple secret is to use a vertically tiled background image to create the illusion of colored columns. For SimpleBits, my background image looks something like Figure 2 (proportions changed for demonstration), with a decorative stripey thing on the left, a wide white section for the content column, a 1 pixel border, and a light brown section for the right column’s background followed by the reverse of the left side’s decorative border.


Figure 2

The whole image is no more than a few pixels tall, but when vertically tiled, it creates the colored columns that will flow all the way down to the bottom of the page — regardless of the length of content in the columns.
Click to expand...


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
You guys have completely lost me at this point. I am not sure on the negative column margin. Can I get more explanation some of these attributes.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
783
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
205
lmcate
lmcate
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
718
bdwilcox
bdwilcox
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
724
Mike Lewis
Mike Lewis
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top