Grow your CSS skills. Land your dream job.

Semantic idea/question

  • # May 8, 2008 at 2:46 pm

    The other day I had to resize a site built with tables and a little CSS.
    the programmer had set the body width the the formerly desired size, something like 780px, and had given that a margin of 0 auto achieving the centered layout commonly used.

    it confused the heck out of me bc i havent done that this way before and i thought it was a little goofy. i always use a container and to wrap everything and set that but it made me think. in terms of semantics do we need that container div?

    he had a bkgd color for the body despite having a smaller width, the color filled the entire page. i can only assume a the effect would work for images, however even if that did not work you could apply the images to the html, which a lot of people dont use.

    so essentially what im getting at is the body of any website is the body. and if the content, the body, needs to be 960px wide, shouldnt that dictate the body being 960px? and the bkgd be applied to the html level? skipping the container div all together?

    in terms of semantics, this makes much more sense to me despite initially thinking it was stupid. now there may be some bugs and breaks that have lead probably most of us to using a container div and setting the width there. but typically when a person thinks of "the body" they think of the content weather it be images or type. the body IS the site not just the base upon which the content has been laid on.

    maybe im talking crazy and maybe theres a very good reason for using a container div.

    his reasoning was that he didnt like doing the text-align:center for the body and resetting it with left on a container. he didnt trust it haha. regardless ive been thinking about it and wanted to share. see what you guys think.

    box
    # May 8, 2008 at 6:09 pm

    I will often make use of the html and body tags in this way. It makes for a leaner html file and, like you say, can often be more semantic. Container divs are useful if you have a complicated layout with multiple background images – but this is very close to adding mark-up for styling reasons – which is strictly speaking non-semantic – although common practice. Having said that, if the movement for establishing accepted web design patterns gathers apace, it might be deemed acceptable to conform to a container/wrapper div for the sake of design consistency across the web. Time will tell.

    # May 8, 2008 at 6:17 pm

    You can indeed just set a width for the body element and use it like you would a "page-wrap" div. I think this is a pretty good idea, really. Less tags. In fact, setting a global background image is often better to do on the html element instead of the body element because of the way some versions of Safari will "stop short" of filling the whole page with the background image.

    The only browser that gets is way wrong is IE 5.5, which will ignore your set width and fill the entire browser window with the body element.

    I am pretty accustomed to using a div for a page wrapper… I wonder if there is something else going on here that I don’t know about…

    Here is a test page:
    http://css-tricks.com/examples/CenterBody/

    # May 8, 2008 at 8:36 pm

    all good stuff.

    So far i have yet to test any of our new sites in 5.5 as nobody has requested it. I’m hoping with 8 gaining some ground in the future this will seal the deal on anything below 6 and then something like what we’re talking about will for sure not be an issue.
    there are some instances where using different types of bkgd’s will probably require the use of a container div,

    but if you dont mind sacrificing IE5.5, which i dont haha, this would seem a more semantic approach that is a fairly new concept to me.

    *edit:
    I took a look in the other browsers and it does work in the major ones but falls apart in 5.5.
    you could still set your maincontent and sidebar to the desired widths and they would work, they would just lose the centered alignment.

    # May 8, 2008 at 9:46 pm

    Yeah dude, screw IE 5.5. I was just saying… that is probably why it’s not as widely used.

    # May 9, 2008 at 6:29 am

    It’s a good semantic way of getting rid of an unnessecary wrapper-div. And when it comes to IE5.5 users…well…yeah?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".