Full page layout with responsive web design

HTML & CSS
1

Hi

I wondered if anyone can help me with this. I am a beginner to mid level user of css. I am trying to get to grips with Responsive Web Design(RWD) and I purchase a book from A List Apart about RWD.

I am having a problem that I am sure I should be able to fix but cannot. Its probably simple to someone else. I want my header and footer to appear the full width of the page but it still has some white space around it. The css and html I have so far is minimal because I am following the tutorial in the book. But can anyone point out why my header will not expand the full width of the page please?

/************************************************************************************
GENERAL STYLING
*************************************************************************************/
body {

/*background: #366774;*/
/*background: #cab49a;*/
background: #FFFFFF;
font-family: Verdana, Geneva, sans-serif;

}

img,
embed,
object,
video {
max-width: 100%;
}

/************************************************************************************
HEADER
*************************************************************************************/
#header {
width:100%;
/background-color: #203b44;/
background-color: #363333;

}

/************************************************************************************
Page wrapper
*************************************************************************************/
#page {
/margin: 36px auto;/
width: 100%;

}

/************************************************************************************
Content
************************************************************************************/
.content {
margin: 0 auto 53px;
width: 93.75%; / 900px / 960px */

}

.content .main {
float: left;
width: 62.8888889%; /* 566px / 900px */
background: Red;
}

.content .other {
float: right;
width: 36.7777778%; /* 331px / 900px */
background: Blue;
}

<!doctype html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>

<!-- disable iPhone inital scale –>
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

<title>RWD</title>

<!-- main css –>
<link href=“newstyle.css” rel=“stylesheet” type=“text/css”>

<!-- media queries css –>
<link href=“media-queries.css” rel=“stylesheet” type=“text/css”>

<!-- html5.js for IE less than 9 –>
<!–[if lt IE 9]>
<script src=“http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

<!-- css3-mediaqueries.js for IE less than 9 –>
<!–[if lt IE 9]>
<script src=“http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>

</head>

<body>

<header id=“header”>
<div id=“headerImg”><img src=“images/logo.jpg” alt=“RWD” /></div>
</header>
<!-- /#header –>

<div id=“page”>
<div class=“content section”>
<div class=“main”>
<p>Hi we are a passionate web/graphic designer team, check out our work and feel free to get in touch!</p>
</div><!-- /end .main –>

&lt;div class="other"&gt;
  &lt;p&gt;Hi we are a passionate web/graphic designer team, check out our work and feel free to get in touch!&lt;/p&gt;
&lt;/div&gt;&lt;!-- /end .other --&gt;

</div><!-- /end .blog.section –>
</div><!-- /end #page –>

</body>
</html>

Kind regards

Rob

2

Hi Rob. It sounds like a case of needing to add

body {padding: 0; margin: 0;}

This is where a CSS reset comes in handy. E.g.

html, body, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}

img {vertical-align: bottom; border: none;}
3

Thanks Ralph.m

That’s spot on and I learnt something new there because I had seen that in another Responsive Web Design example but did not know what it did.

Thanks again

Rob

4

Yes, browsers have their own default styles, which you need to override to get consisten results. For example, most put margin or padding around the body element, and each puts slightly different default margins and paddings on lists, for example, which can be quite confusing. You can either set your ow styles as you style each element, or just strip out the default styles in one hit with a reset. There are mixed opinions about whether this is ideal practice or not, but a reset is a common action that is quite handy, really.

5

Excellent that’s good to know, thanks very much for your help.

Cheers

Rob