1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Please Help! - Auto-size height of Div

Discussion in 'CSS' started by bandit8, Aug 6, 2007.

0
  1. #1
    Hi,

    I have been struggling with what I hope someone can easily help me solve...

    My problem is that I'm trying to set a site up a set that is composed of three main divs: a header, main body section, and a footer. The header and footer have fixed heights, but I need the main body div to automatically expand its height based on the content within it, and push the footer down with it as it does.

    The thing is that within the main div, I have 'sub' div's that will hold various content....this is where my problem is, as the sub div's show up, but the main div does expan to accomodate them--they spill outside of it..and therefore the footer does not get pushed down as it should, and the sub div's overlap the footer.... (please see attached screenshot below)

    I need the main div to have no fixed height, as the amount of content from page to page will differ.

    Can any one help me out? I have attached the css and html file. All suggestions will be greatly appreciated.

    Thanks!
    -b.
     

    Attached Files:

    bandit8, Aug 6, 2007 IP
  2. runningthingz

    runningthingz Active Member

    Messages:
    396
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    58
    #2
    You can take a look at this site I did to get an idea. The main div that contains everything should enclose all the other divs. IF you have a repeating background set it on the main div and then put your header, main content and footer divs inside of that. If you have multiple columns inside the main content div make sure to use floats to control them.
     
    runningthingz, Aug 6, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Well, your biggest problem is you are absolute positioning everything - and absolute positioned content is 'removed from flow'

    What does 'removed from flow' mean? It means that no attention is paid to it for the sake of containing elements when calculating those containers sizes.

    In general you've got a LOT of extra/unneccessary CSS in there in terms of positioning code... Though it is an excellent example of why NOT to use absolute positioning for layout of fixed elements.

    hang on, I'll toss up a rewrite for you after dinner.
     
    deathshadow, Aug 6, 2007 IP
  4. bandit8

    bandit8 Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yeah, I just realized that absolute positioning didn't make any sense for this...and that, if anything, it should be relative, so that everthing continues the flow... I have gone through and redone everything using 'relative' positioning...but still not getting the results I want-- for some reason the bottom content box isn't spaced 19px below the middle one, like I specify...and the footer is still over lapping it.

    Look forward to your help...when you go to do it, can you please base it on this latest attached file? It will help me out more.

    Thanks for all of your help!
    -b.

     

    Attached Files:

    bandit8, Aug 6, 2007 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

#container {
	width:898px;
	margin:0 auto;
}

.noflow {
	position:absolute;
}

#header {
	background-color:#0CC; /* choppers? */
	padding:11px 8px;
}

#header .logo {
	background:#30C;
	width:566px;
	height:68px;
	margin:0 auto;
}

#content {
	background:#090;
	padding:0 8px;
}

.content_box {
	width:566px;
	margin:0 auto;
}

#content_box1 {
	background:#609;
	height:133px;
	margin-bottom:19px;
}

#content_box2 {
	background:#F63;
	height:221px;
	margin-bottom:19px;
}

#content_box3 {
	height:127px;
	background:#99F;
}

#footer {
	padding:11px;
	background:#FF9;
}

</style>

</head><body>

<div id="container">

	<div id="header">
		<div class="noflow">headerDiv</div>
		<div class="logo">logo div inside of headerDiv</div>
	</div>

	<div id="content">

		<div class="noflow">mainDiv</div>

		<div id="content_box1" class="content_box">
			maincontent_box1
		</div>

		<div id="content_box2" class="content_box">
			maincontent_box2
		</div>

		<div id="content_box3" class="content_box">
			maincontent_box3
		</div>

	</div>

	<div id="footer">
		this is the footer
	</div>

</div>

</body></html>
    Code (markup):
    I tossed the label texts in absolute positioned containers so as not to disturb the layout - you do plan on deleting that stuff on the live site, right?

    I used the margins because I was unsure if you were adding side columns or not - if so, you'd want to use a float based layout.

    Absolute positioning is NOTHING but a headache - oh, and I'd also axe the fixed-height containers in the content... that's just bad policy.
     
    deathshadow, Aug 6, 2007 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Actually, if you are using position:anything for anything more than fixing render errors on large componants there's a 90% chance you are working towards a broken layout... Too often I see people using position:relative; top:20px; when they should just be using margin-top:20px;

    Notice the total LACK of positioning code in my example except for using pos:absolute to remove your temporary labels from flow.
     
    deathshadow, Aug 6, 2007 IP
  7. bandit8

    bandit8 Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks so much for your help!

    For some reason I had been under the assumption that everything should either have some sort of postioning attached to it, whether it be absolute or relative...guess I was way off! haha

    Thanks for clearing this up for me.

    And to answer your questions, yes the labels won't be staying there...they were just for testing purposes to help me sort out what was what when stuff was overlapping (and to give you a clear indictation of what was where)...and also, the reason I have fixed heights set to the 3 content containers is because there will be some graphical elements in them.. And finally, I do plan on adding something kind of like a side bar in there so I'll be sure to take your advice with the floats... I'll let you know if I have any problems once I get to that point in the next day or two.

    Thanks so much again, it is truly appreciated. :D
     
    bandit8, Aug 6, 2007 IP
  8. bandit8

    bandit8 Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    hey deathshadow,

    so everything was going great....i had the extra side column added in, and everything was lined up perfectly...and looked perfect in safari & firefox on mac..and firefox on pc...but as soon as i loaded it up onto (the piece of garbage) internet explorer, everything went to shit... its all because of the margins that I used to place various elements.

    is there an easy way to deal with this? ... if only IE would be obolished....

    thanks,
    b.
     
    bandit8, Aug 6, 2007 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    If you have a valid doctype, for the most part IE6 should 'behave'

    Upload a copy of your current progress, one of us here can likely take a look when we get a chance. (I'm heading out for ice-cream right now...)
     
    deathshadow, Aug 6, 2007 IP
  10. bandit8

    bandit8 Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    ice cream eh? mmmmm... :p

    after a bit of research i was able to find a method that fixed it... apparently when you use both float + margins, IE renders it wrong and doubles the margins.....

    anyway, i just added 'display:inline' after anywhere that i used float:left, and now everything is displaying in its proper positions in both firefox and IE! pretty simple solution, i had a sick feeling when i first spotted it..assuming that it was going to be a pain to fix. everything still validates properly with it, so (for the moment at least, lol) all is well.

    thanks again for all the help, and hope your ice cream was great!

    ttyl,
    -b.
     
    bandit8, Aug 6, 2007 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    Usually only if you are in quirks mode if you omit a valid doctype, but it does occasionally rear it's ugly head in standards mode too.

    display:inline is a nice quick-easy fix, even if it does semi-break the W3C guidelines since floats are ALWAYS display:block - to the point browsers are supposed to ignore ANY setting of the display attribute on floated elements...

    But there's no accounting for the strange things that 'fix' IE.
     
    deathshadow, Aug 7, 2007 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Sounds like the double-float margin bug has bitten you in the bum. As you noticed, changing the status from block to inline killed the bug since inline elements cannot have margins applied to them.

    (So deathshadow, this is what you were working on when you went out for ice cream the other night.)
     
    Dan Schulz, Aug 8, 2007 IP