SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: float:bottom

  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    float:bottom

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layOut017</title>
    <style type="text/css">
    *{margin:0;padding:0;color:gray}
    
    
    .overflowHidden{overflow:hidden}
    
    .bdr2{border:2px}
    .b-r15{border-radius:15px}
    
    .solid{border-style:solid}
    .bdColorGray{border-color:gray}
    .bgColorSilver{background:silver}
    .bgColorYellow{background:yellow}
    .bgColorLavender{background:lavender}
    
    .colorWhite{color:white}
    .floatL{float:left}
    .floatR{float:right}
    
    .alignLeft{text-align:left}
    .alignCenter{text-align:center}
    
    .pdg5{padding:5px}
    
    .fEm05{font-size:0.5em}
    .fEm2{font-size:2em}
    .fEm3{font-size:3em}
    .fEm4{font-size:4em}
    .fEm5{font-size:5em}
    
    .m-t5{margin-right:50px}
    .m-r5{margin-right:5px}
    
    .inlineBlock{display:inline-block}
    .clearBoth {clear:both}
    
    .hite5{height:5px}
    .hite10{height:10px}
    
    
    </style>
    </head>
    <body class="pdg5">
    
    
    <div>
      <div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid m-t5 m-r5">sub</div>
      <div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid">logo</div>
      <div class="fEm5 floatR bdr2 b-r15 bdColorGray pdg5 solid">guest</div>
    </div>
    
    
    <div class="clearBoth hite5"></div>
    <div>
      <div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid m-r5">navigator</div>
      <div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid">title</div>
      <div class="fEm5 floatR bdr2 b-r15 bdColorGray pdg5 solid">logIn</div>
    </div>
    
    <div class="clearBoth hite5"></div>
    <div class="alignCenter">
      <div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid">left<br>Menu</div>
      <div class="fEm5 floatR bdr2 b-r15 bdColorGray pdg5 solid">right<br>Menu</div>
      <div class="fEm5 pdg5">
    
        <div class="inlineBlock bgColorLavender">screen/<br>contents</div>
    
      </div>
    </div>
    
    
    <div class="clearBoth hite5"></div>
    <div>
      <div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid m-r5">search</div>
      <div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid">writer</div>
      <div class="fEm5 floatR bdr2 b-r15 bdColorGray pdg5 solid">footer</div>
    </div>
    
    
    
    </body>
    </html>
    I have the code above at http://dot.kr/x-test/layOut/017.php.

    I like to put the "search and writer box" AND "footer box" to bottom of any browsers.

    so I tried the code below at http://dot.kr/x-test/layOut/017_1.php, but failed.
    Code:
    .floatB{float:bottom}
    How can I put the "search and writer box" AND "footer box" to bottom?

    (if a browser's height is taller than the height of the contents, the boxes should be in the bottom.
    if a browser's height is not taller than the height of the contents, the scroll bar will be appeared.)

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    There is no such property as {float:bottom}.

    The choices are {float:left|right|none}

    http://reference.sitepoint.com/css/float


    Do you want the boxes attached to the bottom of the page, or do you want them to appear at the bottom of the window if the content is shorter than the height of the window in a "sticky footer"? In both cases, a scroll bar will appear if the content is taller than the window.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Do you want the boxes attached to the bottom of the page, or do you want them to appear at the bottom of the window
    I want the boxes attached to the bottom of the page.
    When the contents is shorter than the window, then i wnat the boxes attathed to the bottom of the window.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    These are several ways of creating a "sticky footer".

    The modern, easy way is demonstrated here: (IE8+)

    http://www.pmob.co.uk/temp/sticky-fo...uto-height.htm

    If this is not satisfactory, there are several other methods demonstrated on Paul's site, and you will find more here, too.

    Let us know.

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Let us know.
    I am still on the way of work at http://dot.kr/x-test/layOut/autoH7.php.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,532
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dotJoon View Post
    I am still on the way of work at http://dot.kr/x-test/layOut/autoH7.php.
    Seems to be working ok. Are you having problems with it?

  7. #7
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Seems to be working ok. Are you having problems with it?
    Yes, I am.
    I am having a problem at http://dot.kr/x-test/layOut/autoH8.php.


    I like to stretch the both div which is id="left" AND div id="right" in pink to the top line of "search box", "dotKorea", and "writer" from the bottom line of "logo box", "navigator box", and "title box".

    AND, the text "leftText", "rightText" in blue and the div which is id="screen" in greenYellow is vertically centered between the bottom line of "logo box", "navigator box", and "title box" and the top line of "search box", "dotKorea box", and "writer box".

    (the text "leftText", "rightText" in blue should be vertically centered in each stretched box.)
    Last edited by dotJoon; Jul 28, 2013 at 15:32. Reason: color change

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

    You're asking for the impossible now lol

    I think this is what you are after.

    However, I would test with care as I have just baked it and it shouldn't really be working as well as it does (as far as I can see) so there must be a flaw somewhere.

  9. #9
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Thank you very much for the your newly baked code for me, Paul O'B.

    I am on the way of applying your code at http://dot.kr/x-test/layOut2/sticky11.php which has the code below.
    Code:
    <!DOCTYPE html>
    <html class="hiP100 hiAuto">
    <head>
    <meta charset="utf-8">
    <title>sticky11</title>
    <style type="text/css">
    *{margin:0;padding:0}
    
    .alnBottom{vertical-align:bottom}
    .alnCenter{text-align:center}
    .alnLeft{text-align:left}
    .alnMiddle{vertical-align:middle}
    
    .bgColorGray{background:gray}
    .bgColorGreenYellow{background:greenYellow}
    .bgColorLavender{background:lavender}
    .bgColorYellow{background:yellow}
    
    .bdr2{border:2px}
    .b-r15{border-radius:15px}
    
    .dplnline-block{display:inline-block}
    .dpTable{display:table}
    .dpTable-cell{display:table-cell}
    .dpTable-row{display:table-row}
    .dpTr{display:table-row}
    
    .fEm05{font-size:0.5em}
    .fEm2{font-size:2em}
    .fEm3{font-size:3em}
    .fEm4{font-size:4em}
    .fEm5{font-size:5em}
    
    .flL{float:left}
    .flR{float:right}
    
    .hiAuto{height:auto}
    .hiP100{height:100%}
    
    .hite1{height:1px}
    .hite200{height:200px}
    
    .marginAuto{margin:auto}
    .mgn5{margin:5px}
    
    .pdg5{padding:5px}
    
    .solid{border-style:solid}
    
    .wide400{width:400px}
    .wiP100{width:100%}
    </style>
    </head>
    
    <body class="hiP100">
    <div class="wiP100 hiP100 dpTable">
      <div class="hite1 bgColorLavender dpTable-row">
        <p class="fEm5 flL bdr2 b-r15 bdColorGray pdg5 solid">sub</p>
        <p>Testing the header</p>
        <p>Testing the header</p>
      </div>
      <div class="dpTr">
        <div class="alnMiddle bgColorGreenYellow dpTable-cell">
          <div class="alnCenter">
            <div class="left hite200 bgColorLavender flL pdg5">Left1</div>
            <div class="right hite200 bgColorLavender flR pdg5">Right</div>
            <div class="wide400 alnLeft bgColorYellow dplnline-block pdg5">Middle</div>
          </div>
        </div>
      </div>
      <div class="dpTr">
        <div class="hite1 bgColorYellow dpTable-cell">
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
        </div>
       </div>
    </div>
    
    </body>
    </html>
    I like to put the text "middle" in the yellow box to vertically centered from the bottom line of the greenYellow box to the top line of the greenYellow box.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,532
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Something like this perhaps:

    Code:
    <!DOCTYPE html>
    <html class="hiP100 hiAuto">
    <head>
    <meta charset="utf-8">
    <title>sticky11</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0
    }
    .alnBottom { vertical-align:bottom }
    .alnCenter { text-align:center }
    .alnLeft { text-align:left }
    .alnMiddle { vertical-align:middle }
    .bgColorGray { background:gray }
    .bgColorGreenYellow { background:greenYellow }
    .bgColorLavender { background:lavender }
    .bgColorYellow { background:yellow }
    .bdr2 { border:2px }
    .b-r15 { border-radius:15px }
    .dplnline-block { display:inline-block }
    .dpTable { display:table }
    .dpTable-cell { display:table-cell }
    .dpTable-row { display:table-row }
    .dpTr { display:table-row }
    .fEm05 { font-size:0.5em }
    .fEm2 { font-size:2em }
    .fEm3 { font-size:3em }
    .fEm4 { font-size:4em }
    .fEm5 { font-size:5em }
    .flL { float:left }
    .flR { float:right }
    .hiAuto { height:auto }
    .hiP100 { height:100% }
    .hite1 { height:1px }
    .hite200 { height:200px }
    .marginAuto { margin:auto }
    .mgn5 { margin:5px }
    .pdg5 { padding:5px }
    .solid { border-style:solid }
    .wide400 { width:400px }
    .wiP100 { width:100% }
    /*   */
    
    .alnCenter.dpTable { width:100% }
    .tc2 { vertical-align:middle }
    </style>
    </head>
    
    <body class="hiP100">
    <div class="wiP100 hiP100 dpTable">
    		<div class="hite1 bgColorLavender dpTable-row">
    				<p class="fEm5 flL bdr2 b-r15 bdColorGray pdg5 solid m-t5 m-r5">sub</p>
    				<p>Testing the header</p>
    				<p>Testing the header</p>
    		</div>
    		<div class="dpTr">
    				<div class="alnMiddle bgColorGreenYellow dpTable-cell">
    						<div class="alnCenter dpTable">
    								<div class="dpTable-cell">
    										<div class="left hite200 bgColorLavender flL pdg5">Left1</div>
    								</div>
    								<div class="dpTable-cell tc2">
    										<div class="wide400 alnLeft bgColorYellow dplnline-block pdg5">Middle</div>
    								</div>
    								<div class="dpTable-cell">
    										<div class="right hite200 bgColorLavender flR pdg5">Right</div>
    								</div>
    						</div>
    				</div>
    		</div>
    		<div class="dpTr">
    				<div class="hite1 bgColorYellow dpTable-cell">
    						<p>content</p>
    						<p>content</p>
    						<p>content</p>
    						<p>content</p>
    				</div>
    		</div>
    </div>
    </body>
    </html>

  11. #11
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Something like this perhaps:
    Yes, that's it. thank you again.
    I applied your code at http://dot.kr/x-test/layOut2/sticky13.php.

    I like to make some padding in <body>
    so I add the code below to the page.

    Code:
    .pdg5{padding:5px}
    
    <body class=" pdg5">
    Then the scrollbar is unexpectedly shown in the bottom of the browser.
    I tried to add the code like the below
    Code:
    .pdg5{padding:5px}
    
    <body>
    <div class="pdg5"> /* the outer div
    With the padding, how can I remove the horizental scrollbar at the bottom of the page http://dot.kr/x-test/layOut2/sticky13_1.php?

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

    You can't add padding or borders to a 100% element as that makes it too wide and that's why you get a scrollbar. You should be able to add box-sizing to change the box layout.

    e.g.

    Code:
    .wiP100 {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;     
        border: 5px solid #FFFFFF;
        width: 100%;
    }


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
  •