<div id="container"> | ExpressionEngine Community Forums

Visual Binary

Posted: 10 May 2008 04:04 PM

[ Ignore ]

Lab Assistant

Total Posts: 195

Joined 02-26-2008

I was helping a few people with their HTML/CSS on another forum today and in almost every piece of code I looked at, there was the ubiquitous

<div id="container">

   ...

</div>

surrounding all other code. It’s almost as if it’s required HTML syntax like the <head> or <body> tags. I understand why people use it—to center or confine their fixed-width websites.

But what ever happened to the <body> or <html> tags? They’re containers just like anything else. Each of the below will achieve the same result (all other things remaining same)

#container {
   margin:0 auto;
   width:900px;
}

body {
   margin:0 auto;
   width:900px;
}

Using a system like ExpressionEngine with embeds and dynamically generated code etc… I can get really messy if there are open <div> tags (or any other tags). I generally feel the less markup used, the better (assuming the result is the same). So just wanted to post this tip for those that don’t know it or have ignored the poor <body> tag.

Maybe it’ll be of use to someone?

Profile

vinnyio

Posted: 11 May 2008 07:44 AM

[ Ignore ] [ # 1 ]

Research Assistant

Total Posts: 733

Joined 03-22-2004

...or that you can put a class on your body tag. Which is great for applying a unique id or class to different sections of a site.


<body id="homepage">


<body class="gallery">

Profile

Andy Harris

Posted: 12 May 2008 03:05 AM

[ Ignore ] [ # 2 ]

Research Assistant

Total Posts: 696

Joined 02-15-2008

I’ve never styled the body tag with a width before, but then I think (hope!) I’m right in saying that once you set body to width=900px, you’re unable to add any coloring/graphics to the “full” background so it would only be of use if you’re using solid white?

Always use the body ID though, really useful for styling per-page elements and for being able to find stuff in CSS.

Signature

Andy Harris | Pepper Digital | Malvern, UK | Twitter | New to ExpressionEngine? Start here!
Remember - If at first you don’t succeed, you’re not Chuck Norris

Profile

Mark Bowen

Posted: 12 May 2008 03:14 AM

[ Ignore ] [ # 3 ]

Sr. Research Associate

Total Posts: 4883

Joined 04-15-2006

Andy Harris - 12 May 2008 03:05 AM
I’ve never styled the body tag with a width before, but then I think (hope!) I’m right in saying that once you set body to width=900px, you’re unable to add any coloring/graphics to the “full” background so it would only be of use if you’re using solid white?

Well not entirely true

You could always use :

html {
    background-image: url(backing.jpg);
}

couldn’t you?

Best wishes,

Mark

Signature

Full List Of Plugins Here!!

Retrieve Statuses
Maximum Posts Reached
Neat Link
Redirect
Fetch URI

Profile

Andy Harris

Posted: 12 May 2008 03:23 AM

[ Ignore ] [ # 4 ]

Research Assistant

Total Posts: 696

Joined 02-15-2008

Of course you can yes, I was being a chump!

Signature

Andy Harris | Pepper Digital | Malvern, UK | Twitter | New to ExpressionEngine? Start here!
Remember - If at first you don’t succeed, you’re not Chuck Norris

Profile

wolferey

Posted: 12 May 2008 06:27 PM

[ Ignore ] [ # 5 ]

Grad Student

Total Posts: 45

Joined 03-15-2008

I think its mostly because people think of <html>/<body> tags as special tags, while divs are ment for layout, thus people use a <div id="container"> to fix the width of a site.

Profile

minimal design

Posted: 13 May 2008 07:55 PM

[ Ignore ] [ # 6 ]

Lab Assistant

Total Posts: 267

Joined 07-31-2007

Two reasons from the top of my head:

1. IE6 in quirks-mode won’t render as intended *at all* with the code you propose.
2. backgrounds on <body> will repeat all the way down viewport independently of content, in a div it won’t (which might ok, but you can’t say it achieves the same result.)

Hope that helps!

Signature

-------------------------------------
ExpressionEngine 1.6.2 - Build: 20080206

Profile

grantmx

Posted: 16 May 2008 04:14 PM

[ Ignore ] [ # 7 ]

Research Assistant

Total Posts: 888

Joined 06-05-2007

You can style html{}, but I’ve found that it gave me issues in IE6.

Also giving body a width may give you extra work for IE6, Since you have to either hack or add a conditional comment for the “IE Box Model”. Yeah, remember the dreaded Box Model.

Signature

Profile

walpow

Posted: 22 May 2008 09:08 AM

[ Ignore ] [ # 8 ]

Grad Student

Total Posts: 80

Joined 04-03-2008

I’m on a quest on my new, EEified version of my site to eliminate all extra levels of divs. On the old version I have a wrapper div (same idea as container), and within that a header, a main area, and footer. Then within the main area I have a content div and ones for left and right sidebars. And it all worked fine, but it always bugged me to have so many layers of divs.

So on the new site I’m down to simply header, content, sidebar (only using one now), and footer. And it all has been working out fine ... except for one thing.

In the old version, I have (only relevant code shown):

html,
body {
  margin: 0;
}
#wrapper {
  margin: 6px auto;
}

In the new one:

html,
body {
  margin: 0 auto;
}

This works fine to center the page in the viewport in Firefox and Safari. But not in IE7, which insists on leaving it on the left. The old version, with the margin:auto on the wrapper div, works in all three. I know earlier versions of IE had problems with margin:auto, but supposedly IE7 was okay with it. If I have to wrap everything in a wrapper div to get the margins to work right I will, but it don’t want to.

Any ideas on why margin:auto on html/body isn’t working in IE7?

Thanks,
Nathan

Profile

minimal design

Posted: 22 May 2008 09:14 AM

[ Ignore ] [ # 9 ]

Lab Assistant

Total Posts: 267

Joined 07-31-2007

you probably want to remove the “html” part from the declaration. Not tested though…

Signature

-------------------------------------
ExpressionEngine 1.6.2 - Build: 20080206

Profile

walpow

Posted: 22 May 2008 09:26 AM

[ Ignore ] [ # 10 ]

Grad Student

Total Posts: 80

Joined 04-03-2008

Minimal, I just discovered the opposite: when margin:auto is only on the body tag, it doesn’t work in any browser. When it’s only on the html tag, it works in Firefox and Safari, but not in IE7, just like when I had it on both.

Profile

minimal design

Posted: 22 May 2008 09:34 AM

[ Ignore ] [ # 11 ]

Lab Assistant

Total Posts: 267

Joined 07-31-2007

No, it does work on Safari, FF etc… not sure on IE7, but I think it does too. As long as the body has a specific width off course… which is probably your problem from what you’re saying…

But anyway, the HTML tag is “special” and treated differently by a bunch of browsers, as you can see above, I’m one of those who recommend a #wrap tag

Signature

-------------------------------------
ExpressionEngine 1.6.2 - Build: 20080206

Profile

grantmx

Posted: 22 May 2008 02:11 PM

[ Ignore ] [ # 12 ]

Research Assistant

Total Posts: 888

Joined 06-05-2007

If memory serves me correct, I believe you have to use text-align:center (for some reason) for the parent. Then you have to make all of the children text-align:left.

---------

But another reason why styling <html> doesn’t really cut down on the markup.

Signature

Profile

walpow

Posted: 22 May 2008 02:29 PM

[ Ignore ] [ # 13 ]

Grad Student

Total Posts: 80

Joined 04-03-2008

I just couldn’t get the whole thing to center in IE without using a wrapper (aka container) div. So that’s what I did. It lives in embeds at the top and bottom of my templates and I never have to look at it. Feh. Sometimes I wish we were back in the days when we did everything with tables.

Profile

grantmx

Posted: 22 May 2008 02:38 PM

[ Ignore ] [ # 14 ]

Research Assistant

Total Posts: 888

Joined 06-05-2007

Sometimes I wish we were back in the days when we did everything with tables.

What! Oh No, no, no.... Don’t want to go there.

Signature

Profile

‹‹ embedded templates format Is there a way to make a background image appear before other images? ››

Username		Remember Me?
Password		forgot password?

Post Marker Legend
	New posts	Hot Topic with new posts	New Poll	Moved Topic	Sticky topic
	No new posts	Hot Topic with no new posts	Old Poll	Closed Topic	Announcements

Visitor Statistics
The most visitors ever was 1149, on July 16, 2007 10:33 AM
Total Registered Members:	60694	Total Logged-in Users:	48
Total Topics:	73125	Total Anonymous Users:	33
Total Replies:	394386	Total Guests:	584
Total Posts:	467511