SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Question concerning CSS definitions

    Should you ALWAYS define height and width values when defining any kind of container div? For example, I am working on a website where I am trying (yet again) to make a website like the pros over at Zen Garden. Well, I have my preamble stuff set at a width of 700px and a width of 92px due to my background image.

    1.) What I'm not sure about is what height I should give my "content" div. Should I simply leave it undefined or give it a height value of 100%?

    2.) If a parent has a set width, does that mean that you have to define children width values if you simply want them to be the same width of the parent???

  2. #2
    SitePoint Guru
    Join Date
    Aug 2003
    Location
    CT
    Posts
    643
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should only set a pixel width when you want a fixed layout. width and height will auto fill the view port until it overflows. i
    nline will display the width of the element, unless otherwise specified.
    block will take up 100% of the width, unless specificed otherwise.

    While some of the designs at the Garden are very nice, The markup is very impractical and has a lot of bloat (which makes it usuable for all the different designs).
    My Blog: SkeyMedia.com

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd say that you should rarely, if ever, set an explicit width of your container. And never a height (unless you're doing one of those amateurish look-at-my-cool-design-without-any-content sites that are centred vertically and contain nothing but a few pretty pictures).

    A layout should be fluid, within limits, so that it will adapt to the viewport size. Setting a minimum and a maximum width is much better than having a fixed width that really only suits one single viewport size.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could one say this is acheived by utilizing percentage and em units then? I feel like it's obvious that a normal website should maintain a set width of at 750px or 760px based on a 600x800 monitor standard...

    Am I wrong for using a set width on my wrapper like this (should I use em's instead)?

  5. #5
    SitePoint Guru
    Join Date
    Aug 2003
    Location
    CT
    Posts
    643
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no. Thats the whole point of a fluid layout.

    its 750-ish wide in small browsers, and for those of us with more modern monitors, we can make it 2000+ pixels wide if we wish. And if your site is fluid, it will take up the same amount of screen width. Of course, within reason. And that's why the max-width tag exists...
    My Blog: SkeyMedia.com

  6. #6
    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 Wolf_22
    Could one say this is acheived by utilizing percentage and em units then? I feel like it's obvious that a normal website should maintain a set width of at 750px or 760px based on a 600x800 monitor standard...

    Am I wrong for using a set width on my wrapper like this (should I use em's instead)?
    This is what I mean. A 750px wide layout will work perfectly on 800600, provided that the browser window is maximised and that there are no sidebars open. It will look a bit silly on 1024768 and quite forlorn in larger windows. But the main problem is that it will require horizontal scrolling on anything less than 800px wide, like many handheld computers and mobile phones which have quite good CSS support these days.

    I prefer a constrained fluid/elastic layout, where side columns have a 'fixed' width in ems and the main content column is constrained with a minimum and maximum width (both in ems). That way the layout will adapt to both the window size and the text size, but it will not generate overly long lines of text in a large window. With a minimum width, there will be horizontal scrolling at some point, but that point can be a lot less than 800px.
    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
  •