How to achieve Bottom Align floated div that sizes to it's container.

Posted by Davy8 on Stack Overflow See other posts from Stack Overflow or by Davy8
Published on 2011-01-12T23:33:08Z Indexed on 2011/01/13 0:53 UTC
Read the original article Hit count: 123

Filed under:

css

|

vertical-alignment

How can I achieve the following layout? Specifically the positioning of Image and DIV

I've found that unless I set a specific width for the Div, it will just go on to the next line and take up the full width of the container. Additionally aligning it relative to the bottom of the image is giving me trouble. Currently they're both float:left

alt text

Edit: The two solutions so far work if the image is a constant width which I guess I could work with, but it's going in a Wordpress theme for an author's profile page and it's possible that images would have slightly variable widths. Is there a solution that would have the Div right next to the image (minus padding) regardless of how wide or narrow the image is? Basically having the div adjust its width to accommodate the image width.

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about vertical-alignment

Vertical alignment problem in textbox in MS Word 2007

as seen on Super User - Search for 'Super User'
Hi, I pardon as its not a programming question at all. But if anybody can answer this it will be usefull for me. In MS word 2007 I drew a textbox and entered some text. Then I right clicked on textbox and went to format shape Then went to TextBox tab and reduced the top internal margin to 0.1… >>> More
Vertical alignment problem in textbox in Microsoft Word 2007

as seen on Super User - Search for 'Super User'
I pardon as its not a programming question at all. But if anybody can answer this it will be usefull for me. In MS word 2007 I drew a textbox and entered some text. Then I right clicked on textbox and went to format shape Then went to TextBox tab and reduced the top internal margin to 0.1 cm. But… >>> More
Vertical Alignment In a List Box

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I use a listbox in (visualC++ 2008) as a log window, and I use SetItemHeight() to obtain some space between entries. How can I align my entries vertically so that they are vertically centered? Thank You!!! >>> More
Visibility.Collapse does not work in WPF

as seen on Stack Overflow - Search for 'Stack Overflow'
Visibility.Collapse doesnt work in my case. below is the XAML. If i try to hide the lblCountry and cmbCountry a white space is shown between zip and practice fields. There is no option to hide an entire row of a Grid. <Grid> <Canvas Name="canDemographic" > </Canvas> … >>> More
Visibility.Collapse doesnt work

as seen on Stack Overflow - Search for 'Stack Overflow'
Visibility.Collapse doesnt work in my case. below is the XAML. If i try to hide the lblCountry and cmbCountry a white space is shown between zip and practice fields. There is no option to hide an entire row of a Grid. <Grid> <Canvas Name="canDemographic" > </Canvas> … >>> More