Content area layout : Size and Layout « Layout « HTML / CSS






  1. HTML / CSS
  2. Layout
  3. Size and Layout

Content area layout

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>

/***** Content *****/

#content
{
  background:#fff;
  float:left;
  padding:15px 10px;
  width:555px;
  border-right:1px solid #999999;
  color:#000;
}

#content h3
{
  color:inherit;
  font-size:1.4em;
  margin:0;
  padding:10px 5px 0 0;
  text-align:left;
  background:inherit;
}

#content h4
{
  color:inherit;
  font-size:.8em;
  margin:0;
  padding:0 0 0 10px;
  font-weight:normal;
  background:inherit;
}

#content p
{
  margin:10px 5px;
  padding-left:10px;
  padding-right:10px;
  background:inherit;
  color:inherit;
}

#content a
{
  text-decoration:none;
}

#content a:hover
{
  text-decoration:underline;
}

</style>
<title></title>
</head>
<body>

<div id="content">
  <h3>Header Three:</h3>
  <h4>Header Four</h4>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eget nunc. Sed consectetuer. Quisque consectetuer tellus et eros. Morbi adipiscing eleifend enim. Nullam a diam. Aenean eget eros. Sed a sem at ante hendrerit varius. Nulla facilisi. Praesent rutrum viverra lectus. Mauris tempus pretium orci. Fusce viverra nibh ac tellus. Aliquam erat volutpat. Donec lacus. In cursus est scelerisque nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent a libero quis augue hendrerit vehicula.</p>

     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eget nunc. Sed consectetuer. Quisque consectetuer tellus et eros. Morbi adipiscing eleifend enim. Nullam a diam. Aenean eget eros. Sed a sem at ante hendrerit varius. Nulla facilisi. Praesent rutrum viverra lectus. Mauris tempus pretium orci. Fusce viverra nibh ac tellus. Aliquam erat volutpat. Donec lacus. In cursus est scelerisque nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent a libero quis augue hendrerit vehicula.<a href="">a link</a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eget nunc. Sed consectetuer. Quisque consectetuer tellus et eros. Morbi adipiscing eleifend enim. Nullam a diam. Aenean eget eros. Sed a sem at ante hendrerit varius. Nulla facilisi. Praesent rutrum viverra lectus. Mauris tempus pretium orci. Fusce viverra nibh ac tellus. Aliquam erat volutpat. Donec lacus. In cursus est scelerisque nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent a libero quis augue hendrerit vehicula.</p>
 
  <h3>Excerpts From:</h3>
  <p><a href="">Sincora</a> (Side Nav) <br />
  <a href="">Andreas08</a> (Top Nav &amp; Some Layout) <br />
  <a href="">Return of Design</a> (Colors)</p>
  
  <h3>Lorem Ipsum:</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eget nunc. Sed consectetuer. Quisque consectetuer tellus et eros. Morbi adipiscing eleifend enim. Nullam a diam. Aenean eget eros. Sed a sem at ante hendrerit varius. Nulla facilisi. Praesent rutrum viverra lectus. Mauris tempus pretium orci. Fusce viverra nibh ac tellus. Aliquam erat volutpat. Donec lacus. In cursus est scelerisque nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent a libero quis augue hendrerit vehicula.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ac orci. Phasellus nisi erat, scelerisque sed, facilisis eget, consectetuer gravida, orci. Fusce velit. Vestibulum odio elit, pharetra eu, malesuada vel, faucibus vitae, justo. Vestibulum non lorem. Fusce rhoncus, est eu mattis fermentum, nunc eros rutrum ante, nec vulputate nisl tellus eget leo. Sed id urna nec orci bibendum pellentesque. Etiam dictum, purus ut ornare euismod, nulla felis bibendum ipsum, nec vehicula augue tortor quis dolor. Aenean non massa sit amet turpis condimentum egestas. Integer ultrices justo id purus. In condimentum. Donec in nulla. Maecenas ut elit non nisl laoreet blandit. Praesent id arcu. Aliquam erat volutpat. In hac habitasse platea dictumst. Curabitur eu mauris.</p>

</div>

</body>
</html>








Related examples in the same category

1.Sized Absolute center aligned
2.width and height inline style
3.width height and absolute positioning
4.Stretched Absolute center aligned
5.Sized Absolute center offset
6.Stretched Absolute centered
7.Top Aligned Shrinkwrapped Static Block
8.Shrinkwrapped Absolute Top Aligned
9.Sized Static Block top offset
10.Response layout with avatar image
11.About page layout
12.About page layout 2
13.Daliy post layout
14.Quotation layout
15.Day by day post layout
16.Fixed Box Layout
17.Using Fixed height and width to create layout
18.Layout input controls with css
19.Using table to layout form controls
20.Form Layout with HTML Example
21.Site map layout
22.Poem layout
23.Nested style layout
24.Liquid Layout
25.Fixed Width Layout
26.Column span for four column layout
27.How tables linearize for layouts
28.Centering a layout horizontally
29.Creating a maximum-width layout
30.Nested Layout Example
31.Gallery layout
32.Link navigation layout
33.Link topic layout
34.Post layout
35.Three link layout
36.Center content layout
37.Card layout page
38.Even column layout
39.Box layout
40.Two column layout, 1024 pixel width
41.Code layout
42.Page layout with position:absolute;
43.Two-column layout with fixed width and height
44.Using margin to create offset for layout
45.Layout with three layers
46.position:fixed; layout
47.Layout with position:absolute;