Float at the bottom?

HTML & CSS
1

I suppose I could start by asking if one could float (not AP) an element at the bottom (left or right), but I already know the answer is “no” so it may be better to describe what I am trying to achieve.

I have a div that contains one or more block elements and i wanted an image to always be at the bottom right corner of this container element. This would be easy enough to do with a bg image, but then the content would appear on top of the image, and I don’t want that, or to add padding right to the children of the container,but if I have a lot of content it becomes obvious there is a COLUMN of white space above the image… what I am looking is more of a text wrap effect

A more clumsy attempt would be to put it on the last child element. the problem with this being are that if the last element does not have enough text to offset the height of the image OR if I place the image at the end of the text , the image itself will stretch the container leaving white space bellow the text. not what I want. If there is too much text however the text will wrap bellow the image , so the image wont be at the right bottom edge.

In case you wanted to visualize what I mean:

I am stuck… has anyone here achieved such an effect?

2

Like this… http://www.visibilityinherit.com/code/float-pusher.php

3

so the only way to do it is with javascript? :(.

4

You haven’t stated whether the text content is dynamic so I am taking the easy way out by assuming it isn’t.

Then a pure css work around is to place the <img> in the appropriate location within your text so that it simulates being floated in the bottom right hand corner of the container as per this example.

The down side, every time the text content changes you will most likely have to reposition the image to create the float effect.

 
<!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">
<head>
<title></title>
<style type="text/css">
 
#wrap {
width: 950px;
border: 1px solid red;
margin: 0px auto 0px auto;
padding: 20px 20px 20px 20px
}
 
#wrap img {
float: right;
}
 
</style>
</head>
<body>
 
<div id="wrap">
Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel. 
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce 
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut, 
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id, 
aliquam non, taciti<img src="pic1.jpg" alt="" width="300px" /> donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor, 
volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec 
ante sed, ac turpis dis dui vestibulum aut.
Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante 
turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc 
posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede 
voluptas libero, sed mauris tincidunt, ultrices praesent. Iaculis vivamus sapien id, lorem ante aliquet, commodo pede imperdiet 
congue, dictum integer eget sed orci. Suscipit vitae quis, massa elit faucibus massa, interdum nam pharetra nulla sed, sollicitudin 
egestas, magna viverra.
</div>
 
</body>
</html>

Hopefully there is a better css solution.

5

Hi,
To clear the air, there was a float:center quiz but there has never been a float:bottom quiz.

It is simply not possible to do, or should I say that a “simulated effect” with CSS only has not been achieved as of yet.

However, Paul did get something that worked in IE8. (See posts #11 & #13)

I gave up on float:bottom after many failed attempts.

6

Yes post 13 was the closest I got and works in Firefox 3.5.:slight_smile:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Float Bottom 1</title>
<style type="text/css">
h1{text-align:center;}
body{line-height:1.2}
.test {
    text-align:justify;
    width:50%;
    margin:auto;
    border:4px solid red;
    height:105px;
    display:table;
    line-height:25px;
    background:#EEE;
}
.test p {
    margin:0;
    padding:10px;
}
b {
    float:right;
    width:3px;
    height:100%;
    margin-bottom:-115px;
    display:table;
}
span {
    width:98px;
    height:98px;
    float:right;
    border:2px solid red;
    margin:0 5px 0 5px;
    clear:right;
    position:relative;
}
</style>
</head>
<body>
<h1>Float bottom in Firfefox 3.5 only</h1>
<div class="test"> <b></b><span>float</span>
    <p> START text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text END</p>
</div>
</body>
</html>

I managed to get the float in safari to the bottom but the text wouldn’t wrap.

7

Hi Paul,

Yes I was just playing around with it some more. In regards to your comment from post#13 of that thread:

Yes, it’s a connundrum :slight_smile: The 1px float pusher that has a height 100% (via js) is the only way that really works for all.

This works in Firefox 3.5 but other browsers don’t like it (not sure why yet).
The float on the <b> is overriding the display:table in all other browsers, they are ignoring the display:table when the float is present.

Same thing happens with display:table-cell; and float. The table-cell automatically sets it’s height at 100% of the parent but cannot be floated either.

8

I suspect this may have something to do with the <b> element being a nested table in all but FF3.5+

If I float the main table (.test) and then float the <h1> and clear it then all browsers can handle that.

That is the same concept of what you are doing inside the .test table but others choke on that nested table condition.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Float Bottom 1</title>
<style type="text/css">

body{line-height:1.2}

[B]h1[/B]{
    [COLOR=Blue]float:right;
    clear:right;[/COLOR]
}
[B].test[/B] {
    text-align:justify;
    width:50%;
    [COLOR=Red]/*margin:auto;*/[/COLOR]
    [COLOR=Blue]float:right;[/COLOR]
    border:4px solid red;
    height:105px;
    [COLOR=Blue]display:table;[/COLOR]
    line-height:25px;
    background:#EEE;
}
.test p {
    margin:0;
    padding:10px;
}
b {
    float:right;
    width:3px;
    height:100%;
    margin-bottom:-115px;
    display:table;
    background:green;
}
span {
    width:98px;
    height:98px;
    float:right;
    border:2px solid red;
    margin:0 5px 0 5px;
    clear:right;
    position:relative;
}
</style>
</head>
<body>

[B]<div class="test">[/B] <b></b><span>float</span>
    <p> START text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text text
        text text text text text text text text text text text text text text END</p>
[B]</div>[/B]

[B]<h1>Float bottom in Firfefox 3.5 only</h1>[/B]

</body>
</html>
9

Yes they all lose the 100% height on the floated table which is a shame. I thought I was getting somewhere with Safari because I noticed that the floated table does n fact take 100% height as long as the parents height is in pixels and that the table isn’t
greater than the 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Float Bottom 1</title>
<style type="text/css">
h1 {
    text-align:center;
}
body {
    line-height:1.2
}
.test {
    text-align:justify;
    width:50%;
    margin:auto;
    border:4px solid red;
    height:400px;
    display:table;
    line-height:25px;
    background:#EEE;
    padding:0 0 5px;
}
.test p {
    margin:0;
    padding:10px;
    height:100%;
}
.fl {
    width:98px;
    height:98px;
    float:right;
    border:2px solid red;
    margin:0 5px 0 5px;
    clear:right;
    position:relative;
}
.pusher {
    overflow:hidden;
    width:10px;
    display:table;
    height:100%;
    background:blue;
    float:right;
    margin-bottom:-110px;
}
</style>
</head>
<body>
<h1>Float bottom in Firefox 3.5 only</h1>
<div class="test">
    <div class="pusher"></div>
    <div class="fl">float</div>
    <p>START text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text END</p>
</div>
</body>
</html>

If you open the window you’ll see that the blue table is 100% high while the parent table is at the 400px height set on it. However if you close the window and the table height increases then the float rises to the top which is rather strange as I would have expected it to stay in the middle somewhere.

It seems that when the height of a table exceeds the height set then you can’t base the inner floated tables height on it. Which seems a little incongruous to me.

10

It seems that when the height of a table exceeds the height set then you can’t base the inner floated tables height on it. Which seems a little incongruous to me.
There just seems to be to many differences in the way the UAs’ handle this to find a common solution.

Along the same line as what you just mentioned about setting a height on the parent (using % below) Webkit will accept a height on a floated table-cell when FF will not.

But the same thing happens when the content exceeds the parent height, as you pointed out.

Working off the code you just posted:


.test {
    display:table;
    [COLOR=Blue]width:80%;
    height:40%;[/COLOR]
    margin:0 auto;
    padding:0 0 5px;
    border:4px solid red;
    line-height:25px;
    background:#EEE;
    text-align:justify;
}
.pusher {
    [COLOR=Blue]display:table-cell;[COLOR=Black]/*webkit only until content exceeds parent*/[/COLOR][/COLOR]
    float:right;
    width:10px;
    [COLOR=Blue]height:100%;[/COLOR]
    background:blue;
    margin-bottom:-110px;
}
11

@dresden_phoenix

is the div containing all your elements having a fixed height?

12

It’s not fixed height. It will stretch with content, that’s what I was trying to explain in my original post.

Paul’s solution is amazing. I must admit would never even have thought of that approach or understand why I dont even know why that is working FF (or doesnt work in other browsers).

It would be nice if i could reposition the “wrap effect” that a float causes.

13

if the div would have a specified height, there is a solution. otherwise, i guess it has to do with another classic problem: 100% height for a child element in a parent with height:auto.

14

Well Yes if it WERE a fixed size a slew of other options would become available. I could even use Eric’s solution w/o the js. But then It would not be a very flexible design and in this case it would defeat the purpose of the design. So far, however I am thinking of calling “float at the bottom” an unachievable holy grail ( even with CSS3) and reconsidering my thinking.

I suppose what I was looking for was something more like the “box punch” effect but on the bottom on the element and w/o the white space…

http://meyerweb.com/eric/css/edge/boxpunch/demo.html

15

unachievable holy grail ( even with CSS3) and reconsidering my thinking.

It’s achievable but only in Firefox 3.5+ :slight_smile: