SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align Image Bottom Issue

    I'm trying to make sure that the image in the right container aligns with the breaklin at the bottom regardless of height of the left container which has text in it as per http://boots2010.togetheragency.co.u.../vibha-mistry/

    The issue I have is that if the text increases then the image floats and stays in the same place as per http://boots2010.togetheragency.co.u...rica-devereux/

    How can I align it so it always shows on the bottom?

    Thanks in advance?

    Code CSS:
    @charset "utf-8";
     
    #ourstoriespageheader {
    	float: right;
    	width: 636px;
    	padding-bottom: 0px;
    	margin-bottom: 0px;
    	border:0px solid red;
    	}
     
    #ourstoriesheaderquote { 
    	padding-top: 10px;
    	width: 636px;
    	overflow: hidden;
    	border:0px solid red;
    }
     
    #ourstoriespageheadertitle { 
    	width: 636px;
    	overflow: hidden;
    }
     
     
    #ourstoriespageheadertitle h1 {
    	color: #00498F;
    	font-weight: bold;
    	font-size: 26px;
    	margin: 0;
    }
     
    #ourstoriespageheadertitle p {
    	font-size: 19px; 
    	color: #44A5DC;
    	margin-top: 6px;
    }
     
    #ourstoriespagesubtitle {
    	font-size: 26px; 
    	color: #44A5DC;
    	margin-top:0;
    	padding:0;
    	border:0px solid red;
    }
     
     
    #ourstoriesinstruction {
    	padding-top: 10px;
    	font-size:12px;
    	color:#605764;
    	margin-top:10px;
     
    }
     
    #ourstoriesboxes	{
    	float:right;
    	width: 636px;
    	overflow: hidden;
    	background: transparent url('../images/common/dotted-splitter.gif') left top repeat-x;
    	padding-top: 22px;
    	margin-top:10px;
    	border:0px solid red;
    }
     
     
    .ourstoriesrow	{
    	clear:both;
    	float:left;
    	width:100%;
    }
     
    .ourstoriesboxleft {
    	width:208px;
    	height:101px;
    	margin-bottom:7px;
    	border:0px solid red;
    	float:left;
    	}
     
    .ourstoriesboxcenter {
    	width:208px;
    	height:101px;
    	margin-bottom:7px;
    	border:0px solid red;
    	float:left;
    	margin-left:6px;
    	}
     
    .ourstoriesboxright{
    	width:208px;
    	height:101px;
    	margin-bottom:7px;
    	float:right;
    	border:0px solid red;
    	}
     
     
    #ourstoriesbreakline {
    	background: transparent url('../images/common/dotted-splitter.gif') left bottom repeat-x;
    	margin-bottom: 10px;
    	padding-top:10px;
    	float:right;
    	width: 636px;
    	overflow: hidden;
    	border:0px solid green;
    }
     
    #ourstoriesbreaklinenopadding {
    	background: transparent url('../images/common/dotted-splitter.gif') left bottom repeat-x;
    	margin-bottom: 10px;
    	padding-top:1px;
    	float:right;
    	width: 636px;
    	overflow: hidden;
    	border:0px solid green;
    }
     
     
    #oustoriestitle	{
    	color:#00498e;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:18px;
    	margin-bottom:5px;
    	}
     
    #ourstoriestext {
    	float:left;
    	width:312px;
    	border:0px solid red;
    	}
     
    #ourstoriestext p {
    	font-size:12px;
    	color:#605764;
    	margin-bottom:13px;
    }
     
    #ourstoriestext p strong {
    	font-weght:bold;
    	color:#00498e;
    }
     
     
    #ourstoriespicture	{
    	margin-left:45px;	
    	border:1px solid red;
    	vertical-align:bottom;
    	float:left;
    	}
     
    #ourstoriesfooter {
    	float:left;
    	margin-top:0px;
    	width: 637px;
    	border:0px solid red;
    	}
     
    #ourstoriesfootertitle	{
    	color:#00498e;
    	font-weight:bold;
    	font-size:14px;
    	font-family:Arial, Helvetica, sans-serif;
    	margin-bottom:10px;
    	}
     
    #furtherstories {
    	border:0px solid red;
    	}
     
    #furtherstories ul {
    	list-style-type:none;
    	margin:0;
    	padding:0;
    }
     
    #furtherstories ul li {
    	float:left;
    	border-right:1px solid #c0c0c0;
    	width:158px;
    	height:80px;
    }
     
    #obacklink {
    	float:right;
    	font-weight:bold;
    }
     
    #obacklink .morelink a {
    	float: left;
    	text-decoration: none;
    	font-weight: bold;
    	height: 19px;
    	line-height: 19px;
    	vertical-align: middle;
    	padding-right: 24px;
    	color: #00498F;
    	background: transparent url('../images/common/arrow_button_a.png') right center no-repeat;
    }
     
    #obacklink  .morelink a:hover {
    	background-image: url('../images/common/arrow_button_b.png');
    }
     
     
    #ourstoriesfooterspacer {
    	float:left;
    	width:100%;
    	margin-bottom:40px;
    	}

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't test it but if set position: relative for #ourstoriesboxes you could set position absolute for .ourstoriesboxright.

    By the way you limit yourself by giving certain divs a height. Better let it grow depending on the content.

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Spot on


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •