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

HTML

Posted by Patrick McDermott
Patrick McDermott
2,377 Points

HTML layout

Hi,

I have been using treehouse for near enough 2 months, and I have began my own website. Only thing is I am getting confused with seeing other peoples HTML layout with their divs, and tree house different html layouts with grids being used. I have ended up getting confused and not sure whether I am doing it right. Can someone post down below a very basic html layout which is commonly used i.e. the divs they use and how they separate the main content from the header and footer.

Cheers

Patrick

1 Answer

Jeremy Germenis
Jeremy Germenis
29,854 Points
Jeremy Germenis
Jeremy Germenis
29,854 Points

A div is used to divide content for targeting purposes such as styling. Your page could have no divs at all! But, it would be harder to style. We will be using div instead of HTML5 tags such as header to get better understand the div tag.

Lets start with some simple markup with no division:

<h1>Page Heading</h1>
<ul>
  <li><a href="home.html">Home</a></li>
  <li><a href="about.html">About</a></li>
</ul>
<p>A paragraph of text.</p>
<p>Another paragraph of text.</p>
<p>123 Frog Ln. Jumpville, FL 23456</p>

Lets divide the content up into a header, main content area, and footer with some divs:

<div id="header">
  <h1>Page Heading</h1>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</div>

<div id="content">
  <p>A paragraph of text.</p>
  <p>Another paragraph of text.</p>
</div>

<div id="footer">
  <p>123 Frog Ln. Jumpville, FL 23456</p>
</footer>

Now lets add a sidebar: I wrapped the sidebar and the content in a div to visually relate the content together and distinguish it from the header and footer. It will also be easier to use css to place the sidebar and content area next to each other. You could have not used the content-wrapper div if it was not required for styling.

<div id="header">
  <h1>Page Heading</h1>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</div>

<div id="content-wrapper">
  <div id="content">
    <p>A paragraph of text.</p>
    <p>Another paragraph of text.</p>
  </div>
  <div id="sidebar">
    <p>A paragraph of sidebar text.</p>
  </div>
</div>

<div id="footer">
  <p>123 Frog Ln. Jumpville, FL 23456</p>
</div>
Patrick McDermott
Patrick McDermott
2,377 Points

thankyou buddy!