0

So, I am working on a fansite, and I can't figure out why my "content" class div will not stretch. It's supposed to be 100% min-height, but it's not doing that. Also, I can't get it to stretch to the "column2" div, which is seated inside of it. Sorry if this is a simple fix, I'm very new to this. I wouldn't know where to start as far as posting coding for you guys to reference, so if you want, just go to here and view the page source.

Chimera
  • 5,884
  • 7
  • 49
  • 81
FrowningBrownie
  • 29
  • 5

1 Answers1

1

Actually, it does stretch to the bottom --- the bottom of the html element. The problem is that your right column is position: absolute. Whenever you set an element to absolute positioning, it is detached from the normal flow, and so its container will not strech to contain it (which is a desired effect in drop-down menus and such).

Instead, you should use the float: right property on the right column and then add an empty div at the bottom which is clear: both, to ensure that the div stretches correctly.

jforberg
  • 6,537
  • 3
  • 29
  • 47
  • Well, I applied the height: 100% property and it fixed my stretching issue. However, now my footer on my "enemies" page is for some reason right below. *sigh* Why am I so bad at CSS? lol – FrowningBrownie Jul 13 '12 at 23:17
  • @FrowningBrownie: What happened when you tried my suggestion? – jforberg Jul 13 '12 at 23:19
  • I'm not sure what you mean by "clear: both," so I haven't done it. What does that do? – FrowningBrownie Jul 13 '12 at 23:20
  • Get used to looking properties up --- you'll be doing it a lot. For now, let me google that for you: http://www.w3schools.com/cssref/pr_class_clear.asp . In short, 'clear' elements will be pushed down until they are clear of any floats. This ensures that your right column does not poke out of your content div – jforberg Jul 13 '12 at 23:24
  • I have been looking up lots of stuff, I just wasn't sure quite how to verbalize that, as I didn't know what you meant by that. Thanks for looking it up for me, however. I tried floating that right column to the right, and putting a "clear: both" div at the bottom. I'm not sure if it fixed it or not, because it for some reason stretched the div on the left column to a really long length. :/ – FrowningBrownie Jul 13 '12 at 23:27
  • Try removing the *margin-left* property on your right column and you should be alright. – jforberg Jul 13 '12 at 23:36
  • That fixed the stretching of the div. However, for some reason the footer still insists on being as close to the bottom of his div buddy as possible. Sorry for all the questions, and I appreciate your helpfulness. Apologies if the above comments came off as rude/lazy. I just hadn't gotten around to check the "clear" element, not that I'd ignored your suggestion. – FrowningBrownie Jul 13 '12 at 23:41
  • I figured it out. It was seated within column 1 instead of within the #content. Thanks for all your help, jfor! :) – FrowningBrownie Jul 13 '12 at 23:47