Member Avatar for Frensi

Hello all,

I'm trying to make a webpage that has about 200px padding on the left and right side and 0 padding at the top and bottom, i would like my content to be viewed in that small area. I'm wanting the background color where my content will be to be grey but i want the padded sides to stay white. Is this possible?

Like this http://www.cssbasics.com/, you see how the sides are grey and the content area is in a different color, how can i do this?


Thank you!

  • 4 Contributors
  • 4 Replies
  • 606 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by sarah newton

Dani AI

Generated

Short answer: yes. Keep the page (body) background the gutter color (white) and put the grey area inside a centered content element. was on the right track with an outer/inner approach; below is a minimal, easy-to-read implementation plus two alternatives (CSS gradient and a responsive fallback).

/* body stays white */
body {
  margin: 0;
  background: #fff;
}

/* central content looks like "200px left/right padding" */
.content {
  margin: 0 200px;        /* creates the white gutters */
  background: #e0e0e0;    /* content area color */
  padding: 0 20px;        /* inner spacing if needed */
}

Using margin: 0 200px gives exactly the 200px left/right space while keeping top/bottom at 0. If a fixed gutter causes horizontal scroll on small screens, switch to a responsive rule or use max-width + margin: 0 auto instead.

Another markup-free option (no extra wrapper) is a background gradient on the body:

body {
  margin: 0;
  background: linear-gradient(
    to right,
    #fff 0px,
    #fff 200px,
    #e0e0e0 200px,
    #e0e0e0 calc(100% - 200px),
    #fff calc(100% - 200px),
    #fff 100%
  );
}

That paints white gutters and a grey center without extra HTML, but it is best for static gutter widths and modern browsers.

Note: if using tables (as mentioned) table-cell padding can work, but semantic div/layout or the wrapper method is preferred for flexible layouts. Add a simple media query to reduce gutter size on narrow screens to avoid overflow.

Recommended Answers

All 4 Replies

Member Avatar for drjohn

Use two divs, one inside the other.

give the outer div a background color.
give the inner one a different color.
give them both a width, and make that of the inner one smaller by the sum of the left and right "padding".
(eg outer width=800px, inner = 600px)
Set the margin-left and margin-right of the inner one to the "padding". (ie margin:whatever 100px; where whatever is top and bottom)

Learn CSS.

Edited by drjohn because: n/a
commented: Works perfectly thanks! +0
Member Avatar for flubberdub

"Learn CSS."

Crall back under your bridge, the guy was just asking if there was a better way. I was wondering myself, being new to CSS. You're not a genius, I had worked out your suggestion as the OP probably did, but he wanted confirmation. Cretin.

Edited by flubberdub because: 'Idiot' is too good for this guy.
Member Avatar for drjohn

Thanks for your kind words.
Such a nice introductory post from a new member.

My answer to the above thread, about 15 weeks ago, was correct.

Encouraging someone to learn css is always good advice. is one of the sites I often recommend to people seeking to learn about css, so it was nice to see that the original poster had been there. They've had a face lift to their own css. They set the body background to one colour, and the main div background to a different colour, but that would not be the correct solution for the original poster's question, of course, for the obvious reasons.

Oh, and yes with an IQ measured at 154, I don't need to worry about your opinion on my intellect. And you spelt crawl wrongly. ;)

But if you have any problems, do just ask for help, and I'll see if I can find a solution for you. Or give help, of course.

Member Avatar for sarah newton

Yah, you can set the padding of the table as per the space required.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.