Best solution for an inner container

[marklove039]

Hello.

I need to wrap some content that’s inside some other element within a container – easy stuff. Typically you would just add an extra .container div inside that element, but I hate extra markup. I would like to do this without any extra markup. I put together a small pen with a few examples of how I would do it. I trust they’re self explanatory.

http://codepen.io/faviouz/pen/mCauo

What’s the best way to do this? Are none of my solutions ideal? Note the third example specifically. Is using the * selector like that a good idea? Is it even worth worrying about that extra div that would otherwise be necessary? It really bothers me personally.

Thanks!

[Paulie_D]

Simplest is best: http://codepen.io/Paulie-D/pen/oGKtA and easiest to manage.

I’m not worried about the odd wrapping div.

[croydon86]

@Paulie_D is right.

You shouldn’t be afraid to add extra markup if needed. Remember divs have no semantic meaning so won’t harm anything by doing so. By all means keep your HTML code nice and tidy, but not to the extent where you need to try and over-think an alternative solution for a simple problem.

Your first example is the way to go.

With your second example, you would have to remember to extend the class to every new selector you add, and what if you wanted to give one of those inner elements a smaller width? It isn’t a robust solution.

Your third example is not wise either. #third > * may be slightly better but this whole solution seems a bit hacky to me

[marklove039]

Thanks guys! I appreciate the input.

I’ll stick with the extra div approach. On second thought it’s not such a big deal. :)

[Author]

Posts