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.

CSS Reverse Vertical Positioning

Discussion in 'CSS' started by CriminalOrigins, May 28, 2008.

0
Page 2 of 2
  1. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #21
    Hmmm... I'll have to add this one to the notebook.

    Usually I read the answer to something useless, and then the next day the very question arises! Meaning, on Monday I'll need to use this technique on something.

    So, top: 100% sets the third box's bottom at the bottom of the body, or the TOP of that box? Or is that what IE5.5 is doing (which would explain why it's always after the bottom of the screen...)? Ah nevermind, I'm just being lazy. Test page, going on the server. Thanks for playing with this one, ds.
     
    Stomme poes, Jun 6, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #22
    Well, this one is kind of hard to explain - you are correct, as you describe it that is exactly what IE 5.x is doing.

    In the specification for the box model, there's a little discussed detail about position:relative. When you set something to position:relative and overflow:hidden or auto - regardless of the containers height, absolute positioning declared in percentage inside it is based on what in javascript would be scrollHeight - aka the height of the content NOT the height of the container.

    As such, 100% from the TOP inside a position:relative overflow:hidden ends up the bottom of that container if the height is dynamic.

    In standards compliant browsers height:100% on body is always treated as min-height. For some reason if you exclude this you will not get scrollbars in standards compliant browsers. (I forget why exactly) - as a bonus it trips haslayout making IE 6 & 7 behave better too.

    The scrollbar is actually building on the HTML element, which is why IE 5.x doesn't work as it doesn't actually build HTML as different from BODY. You might be able to make it work in 5.x by adding a containing DIV and applying the trick there, then hard-settings HTML and BODY to height:100%; overflow:auto;

    Not sure on that though.
     
    deathshadow, Jun 6, 2008 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #23
    Huh, with a wrapping div it's even simpler - you can leave the div in it's normal behavior, the position:relative of course working in standards mode for the absolute. Body will always wrap positive height absolute positioned elements, just leaving use to need to trip haslayout - we use width for that because standards compliant browsers will calculate position based on the exact height regardless of the content height.

    <!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"
	lang="en"
	xml:lang="en"
><head>

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

<title>
	reverse positioning demo
</title>

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

#container {
	width:100%; /* trip haslayout */
	position:relative;
}

.three {
	position:absolute;
	top:100%;
	background:#EEF;
}

.two {
	background:#FEE;
}

.one {
	background:#EFE;
}

</style>

</script>

</head><body>

<div id="container">

	<div class="three">
	   <p>MAIN BODY CONTENT</p>
	   <p>MAIN BODY CONTENT</p>
	   <p>MAIN BODY CONTENT</p>
	   <p>MAIN BODY CONTENT</p>
	   <p>MAIN BODY CONTENT</p>
	   <p>MAIN BODY CONTENT</p>
	   <p>MAIN BODY CONTENT</p>
	</div>

	<div class="one">
	    CONTENT
	</div>

	<div class="two">
	   <ul>
	      <li>List 1</li>
	      <li>List 2</li>
	      <li>List 3</li>
	      <li>List 4</li>
	      <li>List 5</li>
	      <li>List 6</li>
	      <li>List 7</li>
	      <li>List 8</li>
	      <li>List 9</li>
	      <li>List 10</li>
	   </ul>
	</div>

<!-- #container --></div>

</body></html>
    Code (markup):
    A nice feature is that we can declare width on #container, meaning you could easily implement fixed layouts with it if desired.

    One thing that would be difficult with this is adding a footer after all three DIV - The easy way would be just to slap it inside 'three', but I think the best approach for that would be to set 100% min-height on #container, hiding height:100% in a * html hack, padding the bottom of 'three' equal to your footer height - just like you were building a normal 100% min-height model - though I'm uncertain if it would clear the absolute positioned part... Well, hang on, lemme try.

    -- edit -- Nope, trying to add a footer, even absolute positioned just won't clear the absolute positioned content - so you are stuck putting any 'footer' inside "three"
     
    deathshadow, Jun 6, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #24
    Damn, I tried every which way (footer)... If div three had at least a percentage height, it could be done... A lot of the time a client will say variable height when, looking at the pages of the site, the variation isn't much. Usually, some box remains within some percentage of the page size anyway...
     
    Stomme poes, Jun 7, 2008 IP
Page 2 of 2