Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

How do I make this div longer???

J

jayeskreezy

macrumors 65816
Original poster
Mar 3, 2005
1,137
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....

sitecapture.jpg


this is the stylesheet

thanks macrumors :)
 
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.
Click to expand...
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.
 
ChicoWeb said:
Can't you set the margin to 0?
Click to expand...
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.
 
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...
 
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...
Click to expand...

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.
 
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 :)
 
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.
Click to expand...
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... :)
 
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... :)
Click to expand...

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.
 
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.
Click to expand...
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...
 
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
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back