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.

  1. #1
    Hey there,

    I've been trying to figure this out for a couple weeks at least. I have some code like this (not the exact code obviously, and this code is inside of an existing layout):

    
    <div class="one">
        CONTENT
    </div>
    <div class="two">
       <ul>
          <li>List 1</li>
          <li>List 2</li>
       </ul>
    </div>
    <div class="three">
       MAIN BODY CONTENT
    </div>
    
    Code (markup):
    What I need is for the code to look like this, but still have divs one and two displaying above div three on the page:

    
    <div class="three">
       MAIN BODY CONTENT
    </div>
    <div class="one">
        CONTENT
    </div>
    <div class="two">
       <ul>
          <li>List 1</li>
          <li>List 2</li>
       </ul>
    </div>
    
    Code (markup):
    All divs have a variable height depending on the page, so we can't have any fixed heights in the CSS code. I've been able to make it work with fixed heights in FF.

    What would be the best way to position these using CSS?

    Thanks
     
    CriminalOrigins, May 28, 2008 IP
  2. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #2
    I don't see a way to do what you're asking. I also don't see why you would do it this way unless you're working with some prefabricated script that spits out data in a specific sequence.
     
    Greg-J, May 28, 2008 IP
    CriminalOrigins likes this.
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It depends on where you want One Two and Three to appear on the page which you haven't really specified..They can all be shoved exactly where you want most of the time with either the use of negative margins or positioning if need be.

    Edit: I've just understood your problem a bit better, well if Divs 1 and 2 have a variable height hmm i'm not too sure i'll have to have a go at it myself if I get some time, although i'm sure somebody else will know. If there is no way maybe via the implementation of some conditional statements? It really depends what's going on in Div's One and Two.
     
    wd_2k6, May 28, 2008 IP
    CriminalOrigins likes this.
  4. CriminalOrigins

    CriminalOrigins Peon

    Messages:
    276
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I have a client that wants this for SEO purposes. He wants the SE robot to see his actual content first on the page. I personally don't think it's necessary, since there's minimal content in these two divs; plus, search engine bots are more advanced nowadays, and they can easily sift through the content.

    Thanks for the help so far. :)
     
    CriminalOrigins, May 28, 2008 IP
  5. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #5
    I am 99% sure I know your client - I've only ever had 1 client who requested something so strange (having your subpage links down the bottom of the page decreases their value which is BAD - meaning him going too extreme is actually having a detrimental effect)

    I did it by putting absolute positioning them all, because the header+menu had a fixed height, and I didn't want to dick around all day trying to figure out a way to do it without absolute positioning.

    Try this, though:

    Theory behind that is that the 3rd will go to the top, and I add float so that I can get 1st to clear and go below it. Probably won't work because its absolutely positioned its taken out of the flow, I'll screw around now and see what I can come up with.
     
    rochow, May 28, 2008 IP
    CriminalOrigins likes this.
  6. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #6
    Except he said All divs have a variable height depending on the page, so we can't have any fixed heights in the CSS code.

    Tell your client he's an idiot. If you want his money though, tell him there's simply no way to do what he's asking. If he asks you if you can do it with javascript, tell him not without charging him extra for development time and then add a stupid tax to your bill.

    Seriously though, tell him to stop trying to game search engines. It's a waste of your time and requesting it only makes him feel smarter. He obviously has no idea what he's talking about. I've had clients ask fairly odd things that only the uninformed would ask, but this is just stupid.
     
    Greg-J, May 28, 2008 IP
  7. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #7
    It's impossible with html and css. I fixed the height because it was the only way to get it done.
     
    rochow, May 28, 2008 IP
  8. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #8
    Right, except you're providing an answer to a question he didn't ask... The question wasn't could he order them in the desired order with fixed or fluid heights, he said fixed and fluid. He specifically said he couldn't have it fixed, yet you provided the answer anyway. That's the point I was making.
     
    Greg-J, May 28, 2008 IP
  9. web_doctor

    web_doctor Peon

    Messages:
    164
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    mostly if you make your divs on the position:absolute; has cross browser issues, be sure to deal with this issues.
     
    web_doctor, May 28, 2008 IP
    CriminalOrigins likes this.
  10. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #10
    There is no answer to his question, so I provided him with an alternative solution that he can present to the client.
     
    rochow, May 28, 2008 IP
  11. LittleJonSupportSite

    LittleJonSupportSite Peon

    Messages:
    386
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Sigh.

    You realize that you are trying to teach calculus to a 1st grader right?

    People like this will simply never understand what your telling them.

    I deal with idiots on a daily basis and if they want to run into the wall five times before they say: "Hey that hurts"

    Then I say pull up a chair and crack a brew because it is entertaining.

    Now on to your answer. You can do this with some crafty usage of floats. But I highly recommend staying clear of it.

    Targeting your keywords for SEO should be done elsewhere and not force a complete navigational change.

    I would much rather see you spend 2 weeks on .htaceess mod rewrites for articles and terms you are going after.

    Anyway. good luck bud.
     
    LittleJonSupportSite, May 28, 2008 IP
    CriminalOrigins likes this.
  12. CriminalOrigins

    CriminalOrigins Peon

    Messages:
    276
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Thanks for the help, guys! I suspected that this was not possible with variable heights, but this confirms it.

    +Rep to you all.

    Thanks!
     
    CriminalOrigins, Jun 3, 2008 IP
  13. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #13
    Reminds me of a period when I was receiving constant requests for special code hierarchy while working with CSS and content columns. Pushing less important side column source (advertising blocks etc.) to the bottom and let the more important go up the top for SEO purposes. This is probably a case with similar scope, however impossible to achieve.
     
    Clive, Jun 3, 2008 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #14
    You know... Hmm. This is a good one. *** Cracks Knuckles ***

    There is a quirk of the overflow:hidden property combined with position:relative on the body tag in relation to absolute positions that go off the bottom of the page in standards compliant browsers, that combined with IE's mishandling of height:100% can... Yeah, check this out.

    <!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>
    	inline demo
    </title>
    
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    
    body {
    	height:100%:
    	overflow:hidden;
    	position:relative;
    }
    
    .three {
    	position:absolute;
    	top:100%;
    	background:#EEF;
    }
    
    .two {
    	background:#FEE;
    }
    
    .one {
    	background:#EFE;
    }
    
    </style>
    
    </script>
    
    </head><body>
    
    <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>
    
    </body></html>
    Code (markup):
    Never say never. Does NOT work in IE 5.x (oh well), but does work in IE6, 7, FF, Opera and Safari.

    In IE height:100% is treated as min-height, but overflow:hidden makes it collapse. In standards compliant browsers height:100% becomes height:auto because html doesn't have a height set on it, but it still trips height calculations for % measured from the top. Net result, an absolute position at the bottom of your 'in flow' content that WILL give you scrollbars.

    The only part of it that's 'broken' in IE 5 is that the content appears after the bottom of the screen height.

    Damn I'm good.
     
    deathshadow, Jun 3, 2008 IP
    rochow likes this.
  15. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #15
    If customer agrees to use quirks and ignores cross-browser compatibility then be it :)
     
    Clive, Jun 3, 2008 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #16
    Well, it IS cross browser compatable since it works in everything IE6 or newer - Seriously, how many 'new' pages work in IE5 in the first place.

    and at least said 'quirk' is valid code AND is how the specification SAYS it should work.
     
    deathshadow, Jun 3, 2008 IP
  17. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #17
    No-one likes a hero :D

    He said the source should be in this order: 1,2,3 and appear in this order: 3,1,2

    Your example has the source in the order 3,1,2 and appears in the order: 1,2,3
     
    rochow, Jun 3, 2008 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #18
    Uhm, no. No he didn't...

    Which is what I did. Above code, rendering 1,2,3 - Can't people READ anymore?

    Side Note - I have the feeling div one should be a h1, and that there shouldn't even BE a div around the UL since that's most likely the main menu.
     
    deathshadow, Jun 4, 2008 IP
  19. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #19
    This is what I read:

    Meaning that's what he wants the source to look like, but wants it to display on the page like example #2.

    Now I re-read the post 10 times, it sort of, possibly, makes sense. He could have said all of that in half the space and it would have made sense to start with. What he wrote above was like a massive double negative. Almost like bad directions "drive along, see that next left? ignore it and keep driving. you'll see a petrol station on the right, keep going for 400m and you'll come to an intersection, keep going. take the next right"

    When a simple "drive straight, take the first right after the intersection" would have done the trick.

    And yes, I always get lost with bad directions, I'm too busying looking for all the stuff I'm not taking I can't remembering what I am taking :(
     
    rochow, Jun 4, 2008 IP
  20. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #20
    Then you'd love my directions. I'm a New Englander - "Ya cahn't get theyah from heeyah."
     
    deathshadow, Jun 4, 2008 IP