Jump to content

floats position to bottom of div


tessarian
 Share

Recommended Posts

I'm making a header and on the left the div is taller (121px) on the right the div is shorter (height varies)When I float the divs left and right they work fine beside each other.However; the second shorter div goes to the TOP right I'd be looking for it to go to the bottom right.To be clear I don't mean the bottom of the page, I mean the bottom of the div both floated divs are contained in.Here's a VERY clear example of what I have compared to what I want. Although in this example the elft div is the short one .. same idea applies thoughPay Attention to div-1a ( the red div ) WHAT I CURRENTLY HAVE / THE WAY FLOATS SEEM TO WORK BY DEFAULT -> http://goo.gl/jeNpOTHE WAY I WOULD WANT IT WITH THE FLOAT GOING TO THE BOTTOM AS OPPOSED TO THE TOP http://goo.gl/WJizhI'd prefer to do this without tables to avoid the extra mark upand without using padding or margin to push the div down as the shorter div may very in heightThanks for any advice!

Edited by tessarian
Link to comment
Share on other sites

To be clear I don't mean the bottom of the page, I mean the bottom of the div both floated divs are contained in.
without current code example it is difficult to pinpoint a solution...but basically you want to position the smaller DIV ABSOLUTE from the bottom of the containing DIV.see explanation and conditions athttp://www.w3schools.com/Css/pr_class_position.aspGuy
Link to comment
Share on other sites

#div-1a { float:left; width:190px;}#div-1b { float:left; width:190px;}#div-1c { clear:both;

this is what that looks like http://goo.gl/jeNpOthis is the way I want it with the shorter red div (div 1a) not positioned at the top but at the bottom http://goo.gl/WJizhI've tried fiddling around with absolute position but It just isn't happening.I'm 10% probably doing something wrong

Link to comment
Share on other sites

Yes, there are a few things wrong. You did not include HTML code so we can't see the rest but it seems you forgot to put an OUTER container with a position other than STATIC for the ABSOLUTE positioning to work.Here is a complete example with the CSS in the header - just move it about when ti is working as you want it.There might be a reason why 1B needs to float left but I don't see it in this example. If there is nothign to the right of 1B then it does nto need to float.Try this out

<html><head><style>.container	{	position:	absolute;		/* so the floated element can be absolute*/	background:	#fed;			/*for testing remove when done*/	}#div-1a {/* float: left; */		/*not needed*/ width:190px; background: red;	/*for testing - remove when done*/ position: absolute;	 bottom: 0px;		/*anchor to bottom of container*/ left:	0px;		/*position to the left side*/}#div-1b { float:left; width:190px; margin-left: 190px;  /*offset it by the width of the absolute element*/ background: yellow;	/*for testing - remove when done*/}#div-1c { clear:both;</style></head><body><div class="container" >	  <div  id = "div-1a"><ul><li>one<li>two<li>three</ul>  </div>	  <div id = "div-1b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam ut dui convallis tincidunt. Vivamus facilisis cursus congue. Nunc id felis in ligula interdum varius. Morbi felis justo, volutpat quis pretium quis, interdum sit amet lorem. Suspendisse eu orci enim, vitae congue nibh. Nunc posuere tincidunt hendrerit. Praesent ac<br><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam ut dui convallis tincidunt. Vivamus facilisis cursus congue. 	  </div></div></body></html>

Guy

Edited by Guy Cousineau
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...