HTML & CSS In Pictures
HTML Basics
Navigation & Layout
Interactivity
Advanced Layout
Set content width
In
advlayout.html
, surround the paragraphs in an area for the page's main content:
<div id="maincontent">
<p>Welcome to Tech Tool, the magazine for people who like gadgets.</p>
<p>Every day, we cover the latest in electronic gadgetry.</p>
</div>
In
layout.css
, add formatting for the
maincontent
area:
#maincontent {
margin: 0;
padding: 20px;
}
In
advlayout.html
, enclose everything between the
<body>
tags in the
pagewidth
area:
<body>
<div id="pagewidth">
...
</div>
</body>
In
layout.css
, add formatting for the
pagewidth
area:
#pagewidth {
text-align: left;
width: 700px;
border-style: solid;
border-color: #000000;
border-width: 1px;
}
<< BACK
NEXT >>