TwentyTen Theme: Container/Content Implementation

[sterlo]

I was inspecting some elements inside the TwentyTen theme and noticed following CSS:

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}
#content {
	margin: 0 280px 0 20px;
}

Is there a documented reason for using this method?

Is it not better to use the below code?

#container {
	float: left;
	width: 700px;
}
#content {
	margin: 0 20px;

}

I could not think of a UseCase where a 100% width and a negative margin would be appropriate.

[sterlo]

Relevant

Author:

The CSS structure of the theme is a little different to what I am used to though. For example, the container class uses a width of 100% instead of a fixed width. It then determines the size of the main content area using a negative fixed width (e.g. margin: 0 -240px 0 0;). I have seen this before in stylesheets though previously most WordPress themes would use positive values. 

Commenter:

I like 2010 as well but one thing I don’t get is why the main container includes a huge negative margin to accomdate the sidebar instead of just nesting the sidebar within it.
This creates an issue where I’m trying to place a single pixel border around the container but the right border is not really at the edge of the content area so there is no border drawn.

Source: ​http://www.wpmods.com/my-first-impressions-of-the-twenty-ten-theme

[sterlo]

Using GitHub (via the WP mirror) - this has been around since its initial import:
​https://github.com/dxw/wordpress/commit/b9f78dd91537f7497603ade027bcc09a871c6bda#diff-24

[urbandev]

Changing

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}
#content {
	margin: 0 280px 0 20px;
}

to

#container {
	float: left;
	width: 680px;
}
#content {
	margin: 0 20px;
}

Seems to look identical on

Apple Mac OS X 10.6 Intel
Firefox 3.6.13 
1229 x 625 (Viewport dimensions)

Before:

After:

Currently testing in Safari and IE variants.

[dd32]

What about RTL environments? Do they shift things around, Is it easier via the current method perhaps? (Just throwing an idea out there)

[sterlo]

If you look at:
​https://github.com/grok/wordpress/blob/master/wp-content/themes/twentyten/rtl.css

#container {
float: right;
margin: 0 0 0 -240px;
}
#content {
margin: 0 20px 36px 280px;
}

That could probably just be:

#container {
  float: right;
}
#content {
  margin: 0 20px 36px 200px;
}

I don't understand the 36 pixels on the bottom...that seems to be inconsistent between Left to Right VS Right to Left?

[ocean90]

There is no patch.

[SergeyBiryukov]

There is now :)

[WraithKenny]

I think the width:100% could've existed in Kubrick (maybe the origin, possibly earlier) but I don't know.

As for a UseCase, it looks like a partial attempt at liquid layout with a fixed side column... but ultimately useless unless the layout is, in fact, liquid. Probably borrowed from an earlier theme that had artifacts of liquid.

You could always just ask the designer...

But anyway, changing this now simply to use "better" code would probably screw any child theme that worked around this particular CSS to adjust the content width... Which, as it happens, could be several of my clients' themes ;-)

Recommending "wontfix" or "pleasedontfixmyclientswillkillme"

[sterlo]

Replying to WraithKenny:

Recommending "wontfix" or "pleasedontfixmyclientswillkillme"

Keeping bad ideas because we built stuff using them doesn't make the ideas any better.

I think we should strive for perfection...small incremental steps towards such an idea.

If the idea is flawed...and could cause unexpected behavior - as it did for me and others - then maybe it should be fixed.

I will leave this up to the judgment of someone wiser and has a beard.

[WraithKenny]

No, keeping existing behavior because it might break existing implementations doesn't make the original idea better, but the quality of the original idea is irrelevant. (In fact, there still may be a reason that this CSS is used; no one has asked the designer). But Breaking Existing Sites so that your job is easier is the worst kind of idea.

The easy "Fix" is to simply change the CSS in your own child-theme/mod. This is built in functionality and standard practice and one of the simplest tasks in Theme writing.

#container {
	float: left;
	width: 680px;
	margin: 0px;
}
#content {
	margin: 0 20px;
}

Add that to the child and it'll over-ride the offending code.

About my client example; I have no idea if I wrote CSS that would break if this was adjusted, but the possibility exists (I'd have to spend a lot of time examining several live sites before updating, as would countless others). It defeats the idea that you can update a parent theme without breaking your child theme, which did in fact happen when I updated Thematic (and it really sucked).

Since this is merely a "preferred style" of writing CSS and not in any way an actual bug, there's no actual bug to fix. Hopefully, if the author didn't have a legitimate reason (he may have) for this CSS, he'll use your suggested methods in his next theme, thereby "striving for perfection" in a responsible way.

P.S. I have a beard.

[sterlo]

Replying to WraithKenny:

No, keeping existing behavior because it might break> Since this is merely a "preferred style" of writing CSS and not in any way an actual bug, there's no actual bug to fix. Hopefully, if the author didn't have a legitimate reason (he may have) for this CSS, he'll use your suggested methods in his next theme, thereby "striving for perfection" in a responsible way.

P.S. I have a beard.

You win - oh bearded one!

[dd32]

As someone else with a beard: We're now in TwentyEleven, Keep your eyes out for the 2011 theme and make your voice heard on the structure of that theme. Keep an eye on ​http://make.wordpress.org/ (Specifically the UI group) and Trac for when the new theme is incoming (I'm not sure when it's due, But it should be early this year)