mreddy Posted March 30, 2006 Share Posted March 30, 2006 How do I float image A left and image B and C right aligning them vertically to the bottom of the parent box???This is what I have.This is what I want. Link to comment Share on other sites More sharing options...
carinemaz Posted March 30, 2006 Share Posted March 30, 2006 If you want to use the float property to do that, I would suggest creating an other div that would push your images to the bottom of your main box by using the height property.Make sens?<div id="main"> (your wrapper)<div></div> (the one with the height)<div id="a"></div><div id="b"></div><div id="c"></div></div>But you can also use the absolute positionning to do that! Depends what you're trying to do...Did that help? Link to comment Share on other sites More sharing options...
mreddy Posted March 31, 2006 Author Share Posted March 31, 2006 Thanks for your answer, but No. That pusher-div does not align the a, b and c divs to the bottom, it merely moves them down by X pixels. The ABC are different heights so they need to be aligned - so A moves X pixels, B moves Y pixels and C moves Z pixels down..Is it really this bloody difficult?And NO, absolute positioning is not an option.Oh yeah, and here is the source: <html><head><title></title><style type="text/css"><!--#outerbox{width:500px;height:200px;border-style:solid;border-width:1px;}#leftbox{width:100px;height:100px;border-style:solid;border-width:1px;float:left;}#rightbox{width:100px;height:50px;border-style:solid;border-width:1px;float:right;}--></style></head><body><div id="outerbox"><div id="leftbox"></div><div id="rightbox"></div><div id="rightbox"></div></div></body></html> Link to comment Share on other sites More sharing options...
carinemaz Posted March 31, 2006 Share Posted March 31, 2006 Is this what you want? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><html><head><style type="text/css"><!--#outerbox{width:500px;height:200px;border-style:solid;border-width:1px;}#leftbox{width:100px;height:100px;border-style:solid;border-width:1px;float: left;margin: 98px 0 0 0;}.rightbox{width:100px;height:50px;border-style:solid;border-width:1px;float:right;margin: 148px 0 0 0;}--></style></head><body><div id="outerbox"><div id="leftbox"></div><div class="rightbox"></div><div class="rightbox"></div></div></body></html> All I did was add a margin to your divs, and by the way you can't use an id twice in the same document, so I replaced your id rightbox by a class...Hope it helps, otherwhyse, you may want to check this tutorial:http://css.maxdesign.com.au/floatutorial/index.htm Link to comment Share on other sites More sharing options...
mreddy Posted April 1, 2006 Author Share Posted April 1, 2006 Thank you for your reply! However... that does not really help me much. It certainly fixes my example. But let's say that I have multiple changing images that have different heights. I want them all to always be aligned to the bottom. I guess this could be done by dynamically finding out the height of each image and adjusting the margin accordingly.But what I really would want is a universal vertical-aligning-thingie... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now