How do I make this div longer???

jayeskreezy

macrumors 65816
Original poster
Mar 3, 2005
1,135
0
Here is a pic of a screenshot of some of the page with the div on it

....the div is on the left (green part )...I want it to extend the entire length of the page...i have a stylesheet attached to it, but I just cant figure it out....



this is the stylesheet

thanks macrumors :)
 

panphage

macrumors 6502
Jul 1, 2003
496
0
mnkeybsness said:
make it a background image for whatever div encloses the left column and the main copy... it's called 'faux columns' look it up on google or a list apart.
Yep, this is the only way, the guy at simplebits does it, use his technique. Browsers don't support extending containing elements vertically beyond what it takes to contain the child element's contents.
 

panphage

macrumors 6502
Jul 1, 2003
496
0
ChicoWeb said:
Can't you set the margin to 0?
Like the man said, no. A container cannot be made vertically larger than it's contents reliably. You can set some bottom padding on the last contained element, but that's not likely to sync up to your other div, at least not in any flexible way. The simplebits guy has the only solution I've ever heard of with the fake columns using a background image. http://www.alistapart.com/articles/fauxcolumns/

Here's another take on the same idea: http://www.pixy.cz/blogg/clanky/css-3col-layout/

Or you can do what I used to do at turtleneck.net, just make the background color of the body the same as your short column. This is a bit more limited in it's potential, but doesn't require any fixed widths at all.
 

Mitthrawnuruodo

Moderator emeritus
Mar 10, 2004
13,807
179
Bergen, Norway
There is no problem making a div 100% in height...

Something like:
Code:
div.sidebar {
  position: fixed;
  width: 10em; height: auto;
  top: 0; right: auto; bottom: 0; left: 0;
  background: green;
}
...should make the trick (you might hace to play a bit with the numbers...)

Check out more about (fixed) positioning of divs...
 

Rower_CPU

Moderator emeritus
Oct 5, 2001
11,219
0
San Diego, CA
Mitthrawnuruodo said:
There is no problem making a div 100% in height...

Something like:
Code:
div.sidebar {
  position: fixed;
  width: 10em; height: auto;
  top: 0; right: auto; bottom: 0; left: 0;
  background: green;
}
...should make the trick (you might hace to play a bit with the numbers...)

Check out more about (fixed) positioning of divs...
Yeah, but then you'd have to do all kinds of gymnastics to get around the fact that you just made an element that should scroll with the page not do its expected behavior in most everything but IE.
 

jayeskreezy

macrumors 65816
Original poster
Mar 3, 2005
1,135
0
thanks for the help yall...i found out the easiest way for me to do what I needed it to do was to place the divs in a two column table...it made everything much faster and simpler :)
 

Mitthrawnuruodo

Moderator emeritus
Mar 10, 2004
13,807
179
Bergen, Norway
Rower_CPU said:
Yeah, but then you'd have to do all kinds of gymnastics to get around the fact that you just made an element that should scroll with the page not do its expected behavior in most everything but IE.
You don't need to go with position: fixed;, and as long as it's fixed, when you scroll, it will stay put, at least using Firefox and Safari, don't actually know about IE, as there are issues with fixed positioning and IE... but if I understand you correctly, and this sidebar will stay put in IE (as it actually should), then there really is noe problem... :)
 

Rower_CPU

Moderator emeritus
Oct 5, 2001
11,219
0
San Diego, CA
Mitthrawnuruodo said:
You don't need to go with position: fixed;, and as long as it's fixed, when you scroll, it will stay put, at least using Firefox and Safari, don't actually know about IE, as there are issues with fixed positioning and IE... but if I understand you correctly, and this sidebar will stay put in IE (as it actually should), then there really is noe problem... :)
Yes, IE does it wrong and gives you the behavior you want and compliant browsers do it right and don't give you the behavior you want - not a good solution.
 

Mitthrawnuruodo

Moderator emeritus
Mar 10, 2004
13,807
179
Bergen, Norway
Rower_CPU said:
Yes, IE does it wrong and gives you the behavior you want and compliant browsers do it right and don't give you the behavior you want - not a good solution.
I don't understand... :confused:

I use divs with fixed positioning for my new home page design (it's a work in progress, so be gentle with me... ;)). I try to get the menu bar at top, and the bottom bar to stay put, and just scroll the middle div, and it seems to work fine in Firefox and Safari on Mac...

...and according to the css standard, "fixed boxes do not move when the document is scrolled", and that's exactly the behaviour I'm trying to achieve...
 

Rower_CPU

Moderator emeritus
Oct 5, 2001
11,219
0
San Diego, CA
Sorry, too many negatives in my reply - it's easy to get turned around. :)

When I say "not the behavior you want" in this context I'm referring to a typical navigational column that scrolls with the page - this is what I'm pretty sure the original poster had in mind. The irony of the fixed position solution for this problem is that IE, in ignoring the fixed positioning, would give you the behavior you expect.

Another thing to note with the solution you suggested is that it would only be 100% of the viewport, not necessarily 100% of the content area. But then we're off on another tangent and he's decided to go with icky tables anyway. :p
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.