The thin lines going down are to illustrate the page sides.
I would like to have a black area across the bottom of the page that stretches the full width of the window.
My problems is I want the height of the black area to be different heights on either side of page with a step down on the page itself.
How would I go about coding this up so the page width is responsive and the height of the white area can go taller to shorter with content and still have the black area at different levels on the different sides of the page.
Show us some code. What have you done so far? I’m unable to tell what sets the heights of the white areas, especially since the “step” is within the center section of the page. Is the height of the step fixed or does it change with content? What would control/set the heights of the white areas along the sides of the page? You realize that “responsive” implies that a desktop sized page usually gets considerably longer when viewed on mobile devices. How is this design supposed to behave “responsively”?
It’s an interesting idea, but I’m not sure what you have in mind for the content. Could you elaborate, please?
The height of the white area will be determined by it’s content which will get taller as the page gets narrower.
The red area is just a section in the page who’s title I wanted to show in a stepped up block which then goes off the page.
So as you can see the background color is 100% width. On the left side it is higher than the right side.
Here I have done it by creating a white block and positioning it absolutely next to the title and making the width enough to strech off the page, but it is too wide and causes scroll bars on thre bottom.
So how can I do this so it is responsive and without the scroll bars.
Is the red area and title supposed to scroll off-page bottom as the content becomes taller (narrower widths, perhaps)? or is the red area and title supposed to be fixed to the bottom of the viewport? or something other?
Give this a try, please, and see if it is in the ballpark.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title of the document</title>
<style type="text/css">
html,body {
height:100%;
padding:0;
margin:0;
}
body {
color:#fff;
font-family:sans-serif;
overflow-y:scroll; /* optional */
padding:0;
margin:0;
}
.outer {
display:table;
height:100%;
outline:1px dashed #f00; /* Test Outline */
max-width:800px;
margin:0 auto;
}
.trow {
display:table-row;
}
p {
color:black;
margin:2em 0;
}
.tcell {
display:table-cell;
height:1px;
}
.stripe1 {
-webkit-box-shadow: -799px 0px 0px #f00;
-moz-box-shadow: -799px 0px 0px #f00;
box-shadow: -799px 0px 0px #f00;
}
.titlebar {
/* outline:1px solid lime; /* Test Outline */
background:white;
}
h2 {
display:inline-block;
color:#fff;
background:#f00;
padding:.5em 2em .5em 0;
margin:0;
}
.tcell.stripe2 {
height:auto;
background:#f00;
-webkit-box-shadow: -799px 0px 0px #f00, 799px 0px 0px #f00;
-moz-box-shadow: -799px 0px 0px #f00, 799px 0px 0px #f00;
box-shadow: -799px 0px 0px #f00, 799px 0px 0px #f00;
}
.last .tcell.stripe2 {
height:30px;
}
</style>
</head>
<body>
<div class="outer">
<div class="trow">
<section class="tcell">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
<div class="trow">
<section class="tcell stripe1">
<div class="titlebar"><h2>Section Title</h2></div>
</section>
</div>
<div class="trow">
<section class="tcell stripe2"></section>
</div>
<div class="trow last">
<section class="tcell stripe2"></section>
</div>
</div>
</body>
</html>
Slightly improved. The fourth row was unnecessary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
http://www.sitepoint.com/forums/showthread.php?1212291-How-to-page-structure
2014.06.16 17:53
ttmt
-->
<title>Title of the document</title>
<style type="text/css">
html,body {
height:100%;
padding:0;
margin:0;
}
body {
color:#fff;
font-family:sans-serif;
overflow-y:scroll; /* optional */
padding:0;
margin:0;
}
.outer {
display:table;
height:100%;
outline:1px dashed #f00; /* Test Outline */
max-width:800px;
margin:0 auto;
}
.trow {
display:table-row;
}
p {
color:black;
margin:2em 0;
}
.tcell {
display:table-cell;
height:1px;
}
.stripe1 {
-webkit-box-shadow: -799px 0px 0px #f00;
-moz-box-shadow: -799px 0px 0px #f00;
box-shadow: -799px 0px 0px #f00;
}
.titlebar {
/* outline:1px solid lime; /* Test Outline */
background:white;
}
h2 {
display:inline-block;
color:#fff;
background:#f00;
padding:.5em 2em .5em 0;
margin:0;
}
.tcell.stripe2 {
height:auto;
background:#f00;
-webkit-box-shadow: -799px 0px 0px #f00, 799px 0px 0px #f00;
-moz-box-shadow: -799px 0px 0px #f00, 799px 0px 0px #f00;
box-shadow: -799px 0px 0px #f00, 799px 0px 0px #f00;
padding-bottom:30px;
}
</style>
</head>
<body>
<div class="outer">
<div class="trow">
<div class="tcell">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="trow">
<div class="tcell stripe1">
<div class="titlebar"><h2>Section Title</h2></div>
</div>
</div>
<div class="trow">
<div class="tcell stripe2"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style type="text/css">
*{
color: white;
font-family: sans-serif;
margin: 0;
padding: 0;
}
.wrap,
section{
width: 100%;
}
.page{
margin: 0 auto;
max-width: 800px;
position: relative;
}
.page h2{
padding: 10px;
color: #eee;
position: absolute;
top: -45px;
background: red;
}
.top-section p{
color: black;
margin: 100px 0;
}
.bottom-section{
background: red;
min-height: 500px;
}
.block{
width: 1000px;
height: 50px;
background: red;
position: absolute;
top: -45px;
left: -1000px;
}
</style>
<title>Title of the document</title>
</head>
<body>
<div class="wrap">
<section class="top-section">
<div class="page top-page">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</section>
<section class="bottom-section">
<div class="page bottom-page">
<h2>Section Title</h2>
<div class="block"></div>
</div>
<div class="knock-out-2"></div>
</section>
</div>
</body>
</html>
I would avoid the absolute positioning as that limits you to set heights and also makes it difficult for zoom to scale that section well.
I would draw the line using :before and use absolute positoioning for the red line but relative to the h2 so that it stays pace with the h2 whatever its size.
Be careful with your universal selector usage as that kills inheritance. Only use it globally for properties that don’t inherit such as margin and padding otherwise you destroy the cascade which is the very essence of CSS.
Here’s how I would do it using most of your code but tidied up a bit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
color: white;
background:red;
font-family: sans-serif;
}
.wrap, section {
width: 100%;
background:#fff;
}
.page {
margin: 0 auto;
max-width: 800px;
position: relative;
}
.page h2 {
padding: 10px;
color: #eee;
background: red;
}
.top-section{padding:100px 0 0}
.top-section p {
color: black;
margin:0 0 100px;
}
.page h2 {
display:inline-block;
position:relative
}
.page h2:before {
content:" ";
position:absolute;
top:0;
bottom:0;
left:-999em;
width:999em;
background:red;
}
</style>
<title>Title of the document</title>
</head>
<body>
<div class="wrap">
<section class="top-section page top-page">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</section>
<section class="bottom-section page bottom-page">
<h2>Section Title</h2>
</section>
</div>
</body>
</html>
Note that I set the body background to red so that there’s no need for heights at all. The page wrapper is set to white so that you get the remainder of the page as red as required.
Don’t add divs for the sake of it. You have added a section so why add another div unless you are dividing that section up. If you hadn’t used the section element you wouldn’t use 2 divs to do the job so why use section and a div?
