SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align <div>'s using CSS?

    Is there any way to align divs so that this first picture:



    Looks like this:


    (the information is left aligned to the left edge of the black)


    To see this in action go to www.fletchy.net/site/about.php

    Thanks

  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)
    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
    May 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eek, theres so many, which one?

  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)
    You shouldn't use <h5>s like that.

    In Firefox it's rendering further to the left than in IE. I'm not sure why. You're already floating the elements left.

    You could use relative positioning to move it further left in IE.
    Code:
    /* hide from IE/Mac \*/
    * html .AboutUsContainer {
      position: relative;
      left: -20px;
    }
    /* end hide */
    Why do you have this on so many elements?
    Code:
    	background-position: center;
    	background-color: #000000;
    	background-repeat: no-repeat;
    background-position and background-repeat are only useful if a background-image is set.
    Writing Efficient CSS
    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
    May 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok ill fix up that dodgy CSS thanks, that relative positioning also worked, but how can I get it to work in FF (works in IE) because they will need a different number of pixels to position correctly.

    Also, what do you mean by "/* hide from IE/Mac \*/"

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you really want it positioned right up against the left side when someone's browser window isn't wide enough for the dark grey body background color to be displyed?

    Anyway, here's how you would do it. This gives one value for all browsers except IE/Win and then one for IE/Win.
    Code:
    .AboutUsContainer {
    	background-color: #000000;
    	height: 150px;
    	width: 600px;
    	float:left;
    	position: relative;
    	left: -20px;
    }
    /* hide from IE/Mac \*/
    * html .AboutUsContainer {
    	left: -40px;
    }
    /* end hide */
    That is the Holly Hack. It's used to hide CSS from IE/Mac. It is often used in conjunction with the "* html" hack to give values to IE/Win only.
    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.

  7. #7
    SitePoint Member
    Join Date
    May 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works well, thanks heaps

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    That is the Holly Hack. It's used to hide CSS from IE/Mac. It is often used in conjunction with the "* html" hack to give values to IE/Win only.
    Er ... the Holly Hack is actually the hack where you set a very small height to something to get around the hasLayout bug (or whatever it's called) in IE.

    The escaped comment hack is often used together with the Holly Hack to prevent it from being served to IE/Mac, which usually doesn't need it (and may be harmed by it).

    I don't know who came up with the escaped comment hack, and I haven't seen a specific name for it.
    Birnam wood is come to Dunsinane

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome, Fletchy.

    Tommy, I suppose you're right. The holly hack is a combination of the height:1%, '* html', and 'escaped comment end' hacks.

    This is one of the pages that describe it.
    http://www.dithered.com/css_filters/...mment_end.html

    IE/Mac doesn't expand containers like IE/Win. The Holly Hack article explains.
    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.

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    Tommy, I suppose you're right. The holly hack is a combination of the height:1%, '* html', and 'escaped comment end' hacks.
    Now this is of no importance whatsoever, but ... it's hard being a perfectionist!

    The Holly hack: height:1%
    The Tan hack: * html
    The escaped comment hack: /* ... \*/

    These three are often used in combination, for the reasons you outlined.
    (The star-html hack is also called the Tan hack, after its inventor, Edwardson Tan.)
    Birnam wood is come to Dunsinane


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
  •