CODEWITHSUNDEEP
htmlcss
Gasim
Gasim

Reputation: 7971

how to center and elements content while have a background 100%

I am trying to setup a layout where the content (can be text or anything), is in the middle while the background color or image is in the entire width. My solution was to create an element-container with the background and a child element with smaller width and margin: 0 auto;

(http://jsfiddle.net/kp4D8/1/).

Has anyone else come up with another workaround for a situation like that thats simpler?

Thanks, Gasim

Upvotes: 0

Views: 39

Answers (1)

Daniel Imms
Daniel Imms

Reputation: 50209

Your method is how you go about doing this and is probably the best way.

One alternative method you could use though if you wanted to use minimal markup was to cut out the <section> element and just apply the margin to elements under .element-container like this:

jsFiddle

.element-container * {
    padding: 5px;
    width: 50%;
    text-align: justify;
    margin: 0 auto;
}

.element-container h2 {
    text-align: right;
}

The reason I would prefer to go with your original method is so I can style the background of the inner element more easily and style everything together without the use of the * selector.

Upvotes: 1

Related Questions