Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Kristina Nelson
Kristina Nelson
4,196 Points

How do I create 3 sections (top, middle, bottom) that span across the entire page?

Hi,

I'm trying to practice some css and html. I want to create a page that has a white section on the top, a gray section in the middle, and a black section on the bottom. All three sections I want to span across the entire page to the edges of the browser window.

I know how to apply a color to the html tag, but that changes the entire background to only one color.

Any clues?

Thanks,

Kristina

Corey Baker
Corey Baker
4,890 Points

A little bit more expansion on this would be great in order to better answer the question....

Do you basically want to create three empty boxes with color? Also, you will find that if you want to stretch them across the entire page that you will still be left with a little gutter on either side. Then you will have to use something like Reset CSS. There are many options to choose from put this will give you a clean slate to work with...

<div class="box-one">

</div>

<div class="box-two">

</div>

<div class="box-three">

</div>

.box-one,.box-two,.box-three {
width:100%;
height:4em;
}

.box-one {
background:cyan;
}

.box-two {
background:dodgerblue;
}

.box-three {
background:hotpink;
}

/*The positioning is up to you*/
Kristina Nelson
Kristina Nelson
4,196 Points

Thanks - this was very helpful. I figured it out with your code help.

Corey Baker
Corey Baker
4,890 Points

No problem. Glad that I could help.

Kristina Nelson
Kristina Nelson
4,196 Points

So I input the css code and it worked out well! But than I came across the next problem.

My divs of color now stretch across the page nicely and there are no margins or padding on them. Great. But now the text portions of my content are on the sides of the html page. And previously, to center them, I used the code:

body { width: 100%; margin: auto; }

But if I do that, it centers the divs and they no longer stretch across the page.

Basically, how do I keep the divs nicely stretched cross the page, and then center my text content inside the web browser?

Thanks,

Kristina

David Lane
David Lane
33,414 Points

Make a container for the full width of the page and a viewport container.

For example if you wanted you content to be 980px wide and centered in the page, you would do something like this. 

<div id="top_container">
  <div id="top_content"></div>
</div>

<div id="middle_container">
  <div id="middle_content"></div>
</div>

<div id="bottom_container">
  <div id="bottom_content"></div>
</div>

Then your style would be:

#top_container, #middle_container, #bottom_container {
width: 100%;
height: 33%;
}

#top_content, #middle_content, #bottom_content {
width: 980px;
margin: 0 auto;
}

Then just set the background for the container and content divs for each section to the same color.

Corey Baker
Corey Baker
4,890 Points

When you write 

body {
margin: 0 auto
}

It is taking everything within the <body> and applying that style to it. Which is definitely why those divs are now not spanning across the width of the page. I'm assuming that the text you want to center are inside of these divs correct? And you want to just make the text in all three of these divs (i.e. the boxes) be perfectly centered. Well, if you want all of this text to be centered (like any text you ever want to put in that div to be centered) than this can be done like this:

<div class="box-one">
  <p>Lorem ipsum dolor sit amet</p>

</div>

<div class="box-two">
  <p>Lorem ipsum dolor sit amet</p>

</div>

<div class="box-three">
  <p>Lorem ipsum dolor sit amet</p>

</div>

.box-one,.box-two,.box-three {
width:100%;
height:4em; /* You can take this out and let the content decide the height of your boxes if you want.... */
text-align:center;
}

.box-one {
background:cyan;
}

.box-two {
background:dodgerblue;
}

.box-three {
background:hotpink;
}

If you want to be more specific and just target the <p> paragraphs inside that containing <div> than you could write

``css .box-one,.box-two,.box-three p { text-align:center; }

Hope that helps.
Corey Baker
Corey Baker
4,890 Points

Markdown fail on the last bit of code should look like this

.box-one,.box-two,.box-three p {
  text-align:center;
}
Kristina Nelson
Kristina Nelson
4,196 Points

Will this technique still be used if I wish to create a vertical number of links on the left side (still centered on the page) and then include some content directly aligned with the side panel of links?

Basically, a side panel of links. And some content to the right of it. Like a ton of websites out there. I'm assuming I should figure out a grid system to put the link panel and content panel side by side?

Hopefully I explained that correctly.

Corey Baker
Corey Baker
4,890 Points

Can you provide a reference link to a website that has this. I'm not quite sure I'm totally understanding what you're looking for.

Kristina Nelson
Kristina Nelson
4,196 Points

Of course. Here is an example:

http://www.chemicalguys.com/?Click=19971&gclid=CNbkvInA7rkCFeYWMgodJC0ACg

So, the whole website is centered. There is a side panel of links. There is a content area.
Both are adjacent to each other.
Plus, the website has a top area box that fits nicely over both the side panel of links and the content area.

I'm wondering - how do I get the content area adjacent to the side panel of links - and center the whole website within the web browser. And top it all off with a head section.

Is it going to take a complicated grid system to accomplish this? Kristina

Corey Baker
Corey Baker
4,890 Points

Well, they wrapped the whole page in a wrapper and used this for the margins....

margin: 31px auto 0 auto;

That being said, what you're asking about now would go beyond the scope and availability of posting an answer. You can do everything that you want to do, but it's going to take actually doing it to learn the how.

I would suggest completing, if you haven't already, the Web Designer learning adventure. Most of the questions that you have been asking are in regards to layout. Yes, you may want to use a grid for your site that you're building, but it really depends on what the content is. I would also suggest reading up on everything you can about CSS positioning. In the learning adventure there is a Responsive Design section that will clear up how they were able to center all of the content in the middle of the page.

I know this probably wasn't an exact answer to your question. But I think this is a situation where more education is going to really give you the answers you are looking for. Also, the reason I know the exact CSS they had on the page was Developer Tools . These are available in most browsers, but are very robust in Chrome and Firefox (aka. Firebug)...Treehouse I believe also has some courses on using them as well.

Kristina Nelson
Kristina Nelson
4,196 Points

All right. Sounds good. I know what to study!

Thanks,

Kristina

5 Answers

ahl
ahl
1,935 Points
ahl
ahl
1,935 Points

I'm not sure if I understand your question right, but should you not just put your 3 sections into some <div> tags, and then apply a color to them in CSS?

Kristina Nelson
Kristina Nelson
4,196 Points

Well, here are 2 examples. The basic concept: the sections span across the page, rather than sitting in the center of the page.

THIS ONE SHOWS THE TOP AND BOTTOM SECTIONS SPAN ACROSS THE PAGE http://www.resume-now.com/lp/rnarsmsm63.aspx?cobrand=RSMN&tag=131027144817504&hitlogid=177266196&utm_source=GAD&utm_medium=SEMK&utm_campaign=Resume-9027

THIS ONE SHOWS THE TOP SECTION SPANNING ACROSS THE PAGE http://www.cnn.com (notice how the top of the website spans across the entire website)

Let me know if you need more examples.

Kristina

David Lane
David Lane
33,414 Points
David Lane
David Lane
33,414 Points

Something like this? I have used inline styles just to make it easier to see whats happening.

<div style="width: 100%; height: 33%; background: white;"></div>
<div style="width: 100%; height: 33%; background: grey;"></div>
<div style="width: 100%; height: 33%; background: black;"></div>
James Barnett
James Barnett
39,199 Points

Just say no to inline CSS

David Lane
David Lane
33,414 Points

I completely agree. But in this example it was the easiest way to show the PO what style was applied to which element. I didn't see the point in breaking it up for such a simple demonstration.

Chris Mitchell
Chris Mitchell
12,719 Points
Chris Mitchell
Chris Mitchell
12,719 Points

Reset CSS

HTML Header Main content Footer

CSS Modify those 3 HTML tags to your hearts content

Does this make sense?

Kristina Nelson
Kristina Nelson
4,196 Points
Kristina Nelson
Kristina Nelson
4,196 Points

Thanks everyone. I finally understand.

Chris Mitchell
Chris Mitchell
12,719 Points
Chris Mitchell
Chris Mitchell
12,719 Points

Which one helped the most? Just so I can understand better too

Kristina Nelson
Kristina Nelson
4,196 Points

They were all helpful. I ended up using Corey's example to practice.

Kristina