SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS control Content Positioning

    Hi,

    I not very good at CSS and I need to create a page that shows divs in other order that are in the script:

    in my page i want to be something like this:

    Code:
    <body id="body" > 
       <div id="bodyHolder" > 
          <div id="mainHolder" > 
              <div id="mainColumn">Here will be the main content</div> 
             <div id="leftColumn" > Left Column</div>
          </div> 
          <div id="topLogoHolder">Site Logo</div>
          <div id="topMenuHolder" > Top Menu</div > 
       </div>
       <div id="footerHolder"> Footer</div>
    </div>
    but I want to be displayed in the following order:

    Site Logo, Top Menu, Left Column, Main Column, Footer

    My problem is with Footer. I can't get to put it at the bottom of page (not at the window) because the Main Column is not fixed.

    The CSS code is :

    Code:
    body {margin:auto; background:url('../imgs/bg.body.jpg') repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #FFFFFF;}
    #bodyHolder {margin:auto; width:1006px; text-align:left;} 
    #mainHolder {width:1006px; text-align:left; display:block; float:left; clear:both; background-color:#FFFFFF; margin:0px; padding:15px 0px 15px 0px; position:absolute; top:150px;}
    #mainColumn {text-align:left; display:block; float:right; margin-right:10px;  width:810px;} 
    #leftColumn {text-align:left; display:block; float:left; width:180px; } 
    #topLogoHolder {width:1000px; text-align:left; display:inline; margin-left:6px; float:left; clear:both; height:112px; position:absolute; top:0px;}
    #topMenuHolder { text-align:left; display:block; margin:0px 0px 0px 6px; padding:0px; background:url('../imgs/bg.top_menu.jpg') no-repeat; width:1000px; height:38px;position:absolute; top:112px;}
    #footerHolder {margin:auto; background:url('../imgs/bg.footer.jpg') repeat-x; height:234px; font-family:Arial, Helvetica, sans-serif; padding:0px;width:100%; display: block;  position: absolute; bottom:0px; height:100%; clear:both;}
    I do not know what to try anymore (google gives me no clue... all my attempts failed )

    I'll appreciate any help! Thanks a lot in advance

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,711
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm

    Check out that sticky footer . You will need to place #footerHolder outside of #mainHolder and then apply the CSS in that page
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But #footerHolder it's already outside of #mainHolder. Is directly on <body id="body" >

    And i'm not looking for a sticky footer. I want the user get to the Footer after they scroll down to the end of the page

    P.S. Before I put "position:absolute; top:ypx" for #mainHolder, #topLogoHolder, #topMenuHolder the Footer was on the bottom of the page

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,711
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Then you have an extra </div>. I wasn't counting at all I just visually looked how you lined things up .

    Perhaps a visual representation of what the end result is to look like (along with what it looks like now) would help .

    If you could provide a link to your current code that would be helpful, if not, then provide full HTML and CSS.

    At least I need the visual reference
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is the testing-link: new.onestop.ro

    And if you look carefully, you'll see that is not any extra </div>

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,711
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dangabitza View Post
    this is the testing-link: new.onestop.ro

    And if you look carefully, you'll see that is not any extra </div>
    Look at your code you posted. You have a </div> where it should be </body> . That's why it confused me. I don't care (personaly) if hte page has enough closing divs, I'm just saying the example you posted didn't have the tags match up

    There's alot of absolute positioning going on there, you use it for containers..when it shouldn't be .

    Ok, so that's your current page, however whta exactly is wrong with it? What's the end result supposed to look like? I need those answered . The latter with a visual graphic please.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Ryan
    Ok, so that's your current page, however whta exactly is wrong with it? What's the end result supposed to look like? I need those answered . The latter with a visual graphic please.
    Ryan:
    the footer's at the top of the page, but it's a little hard to see because it is behind the abso-po'd top elements.

    To the OP:
    <div id="bodyHolder" style=" display: block; clear:both; height:100%;">

    bodyHolder can't be 100% high... in the CSS specs they say a box can only have a % height if its parent has an explicit (non%) height. So bodyHolder is doing just height: auto actually.

    While I think a sticky footer would make this layout work better, the point is, as you noticed, that you can't be absolutely positioning your main content if you want the footer to be pushed down.

    Hm...
    Code:
    <body id="body" > 
       <div id="bodyHolder" > 
          <div id="mainHolder" > 
              <div id="mainColumn">Here will be the main content</div> 
             <div id="leftColumn" > Left Column</div>
          </div> 
          <div id="topLogoHolder">Site Logo</div>
          <div id="topMenuHolder" > Top Menu</div > 
          <div id="footerHolder"> Footer</div>
        </div><!--bodyHolder-->
    </body>
    Not sure why the body has an id of "body" as that's generally a bad idea (half the time your CSS may say "body" and the other half may say "#body" and that's damn confusing), so I'm going to refer to it by its tag, not its id.
    Notice I did move the closing div of bodyHolder and made the last div </body> as Ryan mentioned... you may not have had this on your site but it was a mistake in your example... anyway, if the footer's inside teh bodyHolder then it can just get naturally centered inside bodyHolder... otherwise, there is no point to bodyHolder unless it exists as a background image hook, because it's not doing anything that mainHolder isn't, otherwise.

    If this isn't acceptable let us know.

    Site Logo, Top Menu, Left Column, Main Column, Footer

    ok.... I measured the total height of the logo and menu area and I got 163px, so if you try this and something is off, my measurement might have been off...

    Code:
    * {
      margin: 0;
    }
    
    img {
      vertical-align: bottom;
      border: 0;
    }
    
    body {
      padding: 0; 
      background: #fff url('../imgs/bg.body.jpg') repeat-x;
    }
    
    #bodyHolder {
      position: relative; /*for abso-po'd boxes*/
      width: 1006px;
      margin: 0 aut0;
      padding: 163px 0 0; /*top padding pushes main content down without abso-po-ing it, so #footer behaves*/
    }
    
    #mainHolder {
      width: 100%; /*redundant, but this sets Haslayout too, so you're good here*/
      overflow: hidden; /*this'll wrap the floats in other browsers*/
    } 
    
    #mainColumn {
      float: right;
      width: 810px;
    }
    
    #leftColumn {
      float: left;
      width: 180px;
      margin-right: -6px; /*I forget, there's some neg margin to get around IE6, but I'm writing this outta my butt and not testing this...*/
    }
    
    #footerHolder {
      clear: both;
      background:url('../imgs/bg.footer.jpg') repeat-x;
    }
    
    #topLogoHolder {
      position: absolute;
      top: 0;
      left: 6px; /*this is supposed to be top and left of positioned ancestor, #bodyHolder, however I vaguely remember an IE bug with non-direct parents being the positioned ancestor...*/
      width: 1000px;
      height: 112px;
    }
    
    #topMenuHolder {
      position: absolute;
      top: 113px; /*or whatever sets it under Logo*/
      left: 6px;
      width: 1000px;
      height: 38px; /*you may not want a set height on a menu like this*/
      background:url('../imgs/bg.top_menu.jpg') no-repeat;
    }
    I'd do something like that.... basically the only absolutely positioned elements are the logo area and menu. I'd have the little ad thingie on the right just be in the logo box.

    I noticed almost every major box on your page had this kind of code:

    width:1006px; text-align:left; display:block; float:left; clear:both; background-color:#FFFFFF; height: 112px;

    Text-align left is a default. display: block is a default. You can make your code more readable by not stating the obvious (unless you are trying to trigger Haslayout for IE). If your box is inside a container with a width: 1006px, then none of your static boxes need a width, because they will be that width. The Float left is not needed here at all. The clear: both is only necessary on boxes who are coming after a float in source, not something you need to put on floats themselves (unless you have a bunch of floats and want one to always start a new line).

    Setting widths on boxes is usually ok but do it only when necessary. Setting heights on boxes can be dangerous (because height: auto accommodates the content). It's maybe good to leave heights set on abso-po'd elements, but in the case of your menu, I'd still make it a min-height (and just set height for IE6 only, who doesn't understand min-height) so that if your menu needs to grow, it can (though in this case, yes, a growing menu if someone enlarges text will not bump down the main content... however if bodyHolder's top padding were set in em's it could help).

    I think when you're trying all sorts of stuff to get a page to work, it's a good idea to take stuff out when you know you don't need it, to stop code clutter. Code bloat makes it harder for you to read it and see what's going on.

    My above code may also have some other IE bugs I'm forgetting (there's a bug where an abso-po'd box is sammiched between two floats and it vanishes... the easy fix for this was an empty, non-floated div somewhere in the sammich too... but if I were going for that layout that's the code I'd start out with.

    *ps I noticed the form in the logo box is waaaaaay too huge for the box it's in. The set height may be hiding it but I personally like my boxes to fit whether you can see it or not. Maybe cause it's kinda like underwear to me... yeah, nobody sees my underwear but I want it sitting right anyway.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,468
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    These points have already been covered above but to get your footer to the bottom remove the absolute positioning from the footer styles and form the mainHolder styles. Just set a margin-top:150px for mainholder instead.

    Remove the 100&#37; height from bodyHolder because it will get height from the body element and will not expand.

    Code:
    <body id="body" style="height:100%; ">
            <div id="bodyHolder">
                <div id="mainHolder"  style="margin-top:150px;">
    ....
    
    <div id="footerHolder"style="width:100%; display: block;clear:both;">
            <div id="footer">

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Remove the 100% height from bodyHolder because it will get height from the body element and will not expand.
    I thought in order for bodyHolder to be able to do that height: 100%, not only the body but also the html element had to have height: 100%... I thought otherwise, with only a height: 100% on the body, the bodyHolder div would collapse to height: auto;

    I only did a quick look through the code but I looked for height set on the html element.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,468
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I thought in order for bodyHolder to be able to do that height: 100%, not only the body but also the html element had to have height: 100%... I thought otherwise, with only a height: 100% on the body, the bodyHolder div would collapse to height: auto;

    Yes you are right the html also need to be 100% except for IE6 (which is what I was thinking about) but of course as IE6 treats height as min-height anyway the issue wouldn't arise.

    However, I hate to see height:100% in pages because it's a problem just waiting to go wrong.

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    However, I hate to see height:100% in pages because it's a problem just waiting to go wrong.
    Agreed; or it makes someone think there's a height set when it's auto, which can confuse.

  12. #12
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys,

    Thanks for your answers. I managed to solve this problem by making these changes:

    Code:
    <body>
    	<div id="bodyHolder">
    		<div id="mainHolder" style="margin-top:150px;">
    			<div id="mainColumn">Here will be the main content</div>
    			<div id="leftColumn" >Left Column</div>
    		</div>
    		<div id="topLogoHolder" style="position:absolute; top:0px;">Site Logo</div>
    		<div id="topMenuHolder" style="position:absolute; top:112px;">Top Menu</div >
    	</div>
    	<div id="footerHolder">Footer</div>
    </body>
    The problem was "mainHolder" div. So, I replaced "position:absolute; top:150px;" just with "margin-top:150px;" and now the footer is at the bottom of page.


    Thank you very much

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,468
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dangabitza View Post
    The problem was "mainHolder" div. So, I replaced "position:absolute; top:150px;" just with "margin-top:150px;" and now the footer is at the bottom of page.


    Thank you very much
    Just like I said

    Glad it's sorted now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •