SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation image align right bottom

    Greetings
    I am setting up pages for a friend. Her page design has line border on her container div. She wants to have an image aligned to the bottom right of the container div. It needs to be a float so the image will stay bottom right aligned no matter how much text she has on the individual pages.

    Here is some of the relevant stylesheet
    Code:
    /* Sets the green border around the logo and content*/
    #container  {
    	margin-left:  155px;
    	text-align: left;
    	color: #fff;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	border: 2px solid #669966; /*this forms the expanding green box */
    	line-height: 115%;
    	padding-top: 125px;
    	width: 700px;
    }
    .floatimgrightbottom {
    	float:right;
    	margin:10px, 0px, 10px, 10px;
    	vertical-align: bottom;
    }
    I can of course use absolute positioning but then the image and text overlap. I need it to float so it wraps. Been really banging my head on this one.

    Any assistance is appreciated

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not entirely sure how you want it to look, but what I might do is give #container position:relative; and some bottom padding and then absolutely position the image.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolute positioning doesn't work for two reasons. First each page had differing amounts of content that the user will be frequently editing. Second the text needs to wrap around the image.
    Here is a prototype jpg. this particular page has a left bottom aligned vs right but hopefully it will demonstrate the issue involved.http://70.87.13.10/~sacred/images/proto.jpg
    Any assistance is greatly appreciated.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only way to do that is to put the <img> near the end of the source for that section.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried that. However, it gets bumped around if they do text editting and in different browsers. I am really surprised how difficult this has turned out to be.
    Any other ideas?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,381
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The only way to do this is as kravvitz said and you have to place the img in the source manually at a point that will give you the effect you want.

    There is no other way to do this if you want the text to wrap the image. It would be easy if the image was clear of obstruction as you could absolutely place it at the bottom.

    You cannot float the image after the text because it won't wrap and if you drag it up with negative margins then the text won't reflow because it doesn't know about the html that followsd afterwards.

    There is no automatic solution to this and is a known layout problem without a real answer other than manually placing the image at a point in the text that gives the effect you want. I have looked at this many times over the years and there just is no automatic way to do it

    That's what you get when non web designers design the page image. There are just some things that won't work


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
  •