SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Problem with image alignment and div...

    My website is www.eleytech.com - I am adding an image to the home page.

    Below is an attachment with the problem highlighted - the image is float: right and the text moves out of the way but the div border/size doesn't. Any clue how to get the "important" div (the one with yellow background) to get out of the way of the picture? I am making pictures like this for each major page.

    I'm trying to make the site CSS and XHTML compliant (strict) so I really want to do it right, no hacks. Any thoughts?
    Attached Images Attached Images

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

    The only way of doing this without hacks is to give your imortant class a width.

    Otherwise the default behaviour of backgrounds and borders alongside floated elements is for the background and border to extend under the float. Floats only add padding to the content and not the background of the content.

    IE usually does clear its backgrounds automatically but that is the wrong behaviour according to the specs.

    IF you cant set a width on .important (for some reason) then I can only offer hacks for ie and mozilla.
    Code:
    .important {
    	margin: 0px 15px 0px 15px;
    	padding: 0px 5px 0px 5px;
    	background-color: #FFC;
    	border: 1px solid #CCC;
    	overflow:auto;
    }
    /* commented backslash hack v2 \*/ 
    * html .important {height:1%;}
    /* end hack */
    Adding overflow:auto to an element next to a float causes mozilla to clear the content and the background automatically. The height :1% gives ie layout (haslayout) and it works as it normaly does.

    However opera will not be so kind and will only move out of the way with a width.

    Sorry but thats all the solutions I know to this behaviour.

    Paul

  3. #3
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Well, if that's the only way I guess I don't have a choice. I don't think that will prevent it from validating will it?

    Anyway, it looks much better now... thank you very much!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It will validate fine in the format I gave Just make sure theres a space between * and html e.g. * html and not *html

    Paul


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
  •