Help with CSS layout - stretch to page

[mattastic]

Hi Folks,

Can anyone please tell me how I can achieve the attached layout.

I want the blue background color to stretch the full width regardless of resolution and stretch to the bottom of the page.

I'd like the content center aligned, attached is a sample layout.

sample.gif

Many thanks

[tom8]

Specifying the height of the image 100% should stretch to the full width. Centering the content you simply use text-align:center. Post your code, members here might able to suggest codes to use.

[RyanReese]

To center the content, well, the container of hte content (thus everything gets centered) you should set a width on the containing element and set margin:0 auto; which will allow the eleemnt to get centered.

I don't have access to the attachment yet, due to it not being approved , though do you have an attempt? Code? If so, provide it to us (whetehr you just copy paste the code here, or give us a link to the page (which is preferable)

[Conquer]

This is the way I would do this.

<div id="top-section"> <!-- Try to make these divs meaningful divisions and name them something semantic -->

  <div class="content-wrapper">

	<!-- Top content here -->

  </div>

</div> <!-- End top section -->

<div id="bottom-section">

  <div class="content-wrapper">

	<!-- bottom content here -->

  </div>

</div> <!-- End bottom section -->

And the CSS:

#top-section {
	background-color: #fff;
}
  
#bottom-section {
	background-color: #06c;
}

.content-wrapper {
	width: 80%;   /* Specify whatever width you want here */
	margin: 0 auto;   /* Setting left and right margins to auto will center any element with this class */
}

[TehYoyo]

This is the way I would do this.

<div id="top-section"> <!-- Try to make these divs meaningful divisions and name them something semantic -->

  <div class="content-wrapper">

	<!-- Top content here -->

  </div>

</div> <!-- End top section -->

<div id="bottom-section">

  <div class="content-wrapper">

	<!-- bottom content here -->

  </div>

</div> <!-- End bottom section -->

And the CSS:

#top-section {
	background-color: #fff;
}
  
#bottom-section {
	background-color: #06c;
}

.content-wrapper {
	width: 80%;   /* Specify whatever width you want here */
	margin: 0 auto;   /* Setting left and right margins to auto will center any element with this class */
}

I don't think you need the div w/ id="top-section" or "bottom-section". Wrapping a div in a div and not applying any styles or having it hold anything? I would just cut it down to top-section and bottom-section and not have any of your pointless content-wrapper divs.

Then, combine the CSS in .content-wrapper w/ #bottom-section, except changing width to 100%.

~TehYoyo

[Conquer]

I don't think you need the div w/ id="top-section" or "bottom-section". Wrapping a div in a div and not applying any styles or having it hold anything? I would just cut it down to top-section and bottom-section and not have any of your pointless content-wrapper divs.

Then, combine the CSS in .content-wrapper w/ #bottom-section, except changing width to 100%.

~TehYoyo

But then it doesn't do what mattastic is trying to achieve. The content wrapper divs aren't pointless. They are there to center the content on the page, while the top and bottom sections' backgrounds take the full width of the window.

[faisalirfan]

Hello!
this could be achieved by two ways

first you can use this as background for your body tag (1px width for white and blue line and repeat-x)

or secondly divide your page in following manner
.header-out{
background-color:#fff;
}

.contents-out{
background-color:blue; (enter which ever you like)
}

.header,.contents{
width:1000px; (just an example you need to put as much as you want)
(lines below will keep your divs in center)
margin-left:auto;
margin-right:auto;
}



<div class="header-out">
<div class="header">
your text here
</div>
</div

<div class="contents-out">
<div class="contents">
your text here
</div>
</div>


I have test above code this works but if you need help, I will be glad too,

Best

----------------
Faisal Irfan

[TehYoyo]

But then it doesn't do what mattastic is trying to achieve. The content wrapper divs aren't pointless. They are there to center the content on the page, while the top and bottom sections' backgrounds take the full width of the window.

It could be done w/ padding.

~TehYoyo

[TechnoBear]

It could be done w/ padding.

Have you tried that? I can't see a way to make it work. As Conquer explained, the outer divs #top-section and #bottom-section need to stretch the entire width of the viewport, to provide the two background-colour sections required. You can't centre content using padding without knowing both the width of your content and the width of the viewport. As the latter is outwith your control, setting a centred inner div in each section is the easiest solution.

I agree with you in principal, that having extra, unnecessary divs is a bad practice. But when a div is the right tool for the job, use it.

Having said all that, I would do it slightly differently. The easiest way to get the blue to stretch to the bottom of the page irrespective of content length is to set it on <body>, so

<div id="top-section">

  <div class="content-wrapper">
 
Top section content here

  </div>

</div> <!-- End top section -->

<div class="content-wrapper">


Lower section content here

</div>

body {margin: 0;
	padding: 0;
	background-color: #06C;
	color: #fff;
	}
 
#top-section {
	background-color: #fff;
	color: #333;
	margin: 0;
	}
 
.content-wrapper {
	width: 80%;   /* Specify whatever width you want here */
	margin: 0 auto;   /* Setting left and right margins to auto will center any element with this class */
}

[TehYoyo]

Well couldn't you just define left-padding:10%; and right-padding:10%; ?

~TehYoyo

[TechnoBear]

Well couldn't you just define left-padding:10%; and right-padding:10%; ?

If you set an 80% width on a div, you can also set a max-width to prevent it becoming too wide on a large screen, or a min-width, to prevent it becoming too small. If you use 10% padding, you're stuck with your content at 80% of the viewport, however large or small it may be.

[TehYoyo]

If you set an 80% width on a div, you can also set a max-width to prevent it becoming too wide on a large screen, or a min-width, to prevent it becoming too small. If you use 10% padding, you're stuck with your content at 80% of the viewport, however large or small it may be.

OK. So it's a bad idea to use it. Gotcha. You seem to be correcting me a lot, TB

~TehYoyo

[TechnoBear]

You seem to be correcting me a lot, TB

I prefer to think of it as guiding you and encouraging you to think things through properly. You've got the right idea, just take your time and think. Or better still, set up a test case and see what happens.

[TehYoyo]

I prefer to think of it as guiding you and encouraging you to think things through properly. You've got the right idea, just take your time and think. Or better still, set up a test case and see what happens.

I suppose that's how we all learn

Thanks
~TehYoyo