Float:bottom

<!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.

.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.)

There is no such property as {float:bottom}.

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

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.

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.

These are several ways of creating a “sticky footer”.

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

http://www.pmob.co.uk/temp/sticky-footer-auto-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.

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?

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.)

Hi,

You’re asking for the impossible now lol :slight_smile:

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.:slight_smile:

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.

<!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.

Something like this perhaps:


<!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>


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.

.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

.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?

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.


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