#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    3
    Rep Power
    0

    [Solved] Positioning problem - text and images not aligning properly


    Hi everyone, I'm going nuts over this and would be very grateful for some input! It's the first time for me to build a more complex layout so the answer may be really simple... still, please spare me a minute

    I have a promo banner on the top of my page, which needs to be laid out as follows. The red box is the banner outline.
    http://img138.imageshack.us/img138/9637/helptq.jpg

    Basically if more text is entered than what the design has (3 lines), the curly pattern image to the right of the text should move down as well, to always be aligned to the bottom right corner of the div holding the text, button and image.

    I've tried every type of positioning and alignment (including z-indexes) I can think of, but I can't achieve both the correct positioning AND the flexibility of movement of the image. The image either stays where it is making it unsuitable for longer paragraphs, or it jumps to above/below the text area or button. Currently my CSS is as follows for the area in question (the text is aligned correctly now, it's just the images playing up).
    Code:
    #text {
    	position: relative;
    	display:inline-block;
    	text-align:left;
    	margin-right: 375px;
    	margin-bottom: 20px;
    	margin-left: 35px; }
    	
    #text p {
    	margin-right: 105px;
    	color:#FFF; }
    	 
    	
    #text img {
    	position:absolute;
    	margin-right: 2px;
    	margin-bottom: 27px;
    	 }
    	
    #featured img{
    	display:inline-block;
    	float:right; }
    Thank you in advance for any advice!
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    The way to do what you require is to add the image as a background image to the text div instead, align it the the bottom right and add padding the the width of the image (minimum) so that the text doesn't overlap it.

    Code:
    #text {
    	position: relative;
    	display:inline-block;
    background: url(link_to_your_image) no-repeat bottom right;
    padding-right: width_of_image_minimum;
    	text-align:left;
    	margin-right: 375px;
    	margin-bottom: 20px;
    	margin-left: 35px; }

    Comments on this post

    • Kravvitz agrees
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    3
    Rep Power
    0
    Thank you so much, simplypixie! Indeed, such a simple solution, and I didn't even think of making it a bg image
    Could have saved myself hours of banging my head against the wall
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    Welcome to DevShed Forums, b4rbika.

    I recommend that you read Choosing between inline and background images.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo