SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive Image position in div

    I have two divs. Both 50% width, one on the right and one on the left. Inside the right div is an image set to max-width: 100%.

    This all works fine until you view in a tablet. The text on the left side are relatively longer - longer than the height of the image on the right div. Because of the properties of the image, I need it to always sit on the bottom of its div. I can't use position: absolute as this breaks the responsive sizing of the image. Can anyone suggest an alternative?

    Thanks in advance.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    You could maybe try giving the divs display: table-cell and vertical-align: bottom.

  3. #3
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply but unfortunately that didn't work as the image is still at the top.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Generally this is not easy to do without out using positioning. We need to see an example.

  5. #5
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've attached two images. One with the view in a desktop (left) and the other in the problematic tablet.

    There will eventually be navigation at the top and other content below but what I need is for the model to sit nicely at the bottom of the div no matter the device. The problem is that in the tablet the width of the text is reduced and consequently the div becomes longer.
    I guess it might mean just using media queries to make sure there is a top margin for the image if it is a tablet?

    desktop.jpgtablet.jpg

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Hlforr View Post
    Thanks for your reply but unfortunately that didn't work as the image is still at the top.
    What I suggested in post 2 does work. Make sure to put vertical-align: botton on the table-cell divs.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style media="all">
    .wrap {display: table;}
    .wrap div {display: table-cell; vertical-align: bottom; width: 50%;}
    </style>
    	
    </head>
    <body>
    
    <div class="wrap">
    	<div>
    	<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    	
    	<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    	
    	<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    	</div>
    	<div>
    	<img src="image.gif">
    	</div>
    </div>
    
    </body>
    </html>

  7. #7
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it works in the example. It must be something conflicting in mine. This is great though because now I have this working I can peel down the rest of the code and start again. Thanks for your help, much appreciated.


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
  •