Two floating right div section : div layout « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. div layout

Two floating right div section

       
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Free Css Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type='text/css'>
html,body {
  margin: 0;
  padding: 0
}

body {
  font: 76% arial, sans-serif;
  text-align: center
}

p {
  margin: 0 10px 10px
}

a {
  padding: 5px;
  text-decoration: none;
  color: #000000;
}

div#header {
  background-color: #F3F2ED;
}

div#header h1 {
  height: 80px;
  line-height: 80px;
  margin: 0;
  padding-left: 10px;
}

div#container {
  text-align: left
}

div#content p {
  line-height: 1.4
}

div#navigation {
  background: #F6F0E0;
}

div#navigation ul {
  margin: 15px 0;
  padding: 0;
  list-style-type: none;
}

div#navigation li {
  margin-bottom: 5px;
}

div#extra {
  background: #CCC8B3;
}

div#footer {
  background: #BFBD93;
}

div#footer p {
  margin: 0;
  padding: 5px 10px
}

div#container {
  width: 700px;
  margin: 0 auto
}

div#content {
  float: left;
  width: 500px
}

div#navigation {
  float: right;
  width: 200px
}

div#extra {
  float: right;
  clear: right;
  width: 200px
}

div#footer {
  clear: both;
  width: 100%
}
</style>


</head>
<body>
<div id="container">
<div id="header"><h1><a href="http://www.free-css.com/free-css-layouts.php">Free CSS Layouts</a></h1></div>
  <div id="wrapper">
    <div id="content">
      <p><strong>Content here.</strong></p>
      <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy</p>
      <p>Montegeraliquam sed pede in cursus praesenec vestas rhoncus wisi at wisi. Condisseloborttis enim et ipsum mauristie id felit adipiscipit ac auctortorttitor sempor. Vitantesqueat sempus non sed et mus sit vivamus purus netus hendiment. Pretiuma diam et id tempus dolor por wisi sed volutpat facilisi.</p>
      <p>Wisiet sus adipit phasellentum elit condissim consecteturpiscing sapien vivamus et congue. Utvel tris quismod cursus liberos elit nisse curabitur tur parturpis tellenterdum. Semperligula curabitae tellentesque nulla trices vestas ristibulum id justo auctor facinia. Natisdonec consequat nibh pellus.</p>
      <p>Vestibusodio euisque id elerisus lacus tincidunt sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p>
    </div>
  </div>
  <div id="navigation">
    <p><strong>Navigation Here</strong></p>
    <ul>
      <li><a href="http://www.free-css.com/">Free CSS Templates</a></li>
      <li><a href="http://www.free-css.com/free-css-layouts.php">Free CSS Layouts</a></li>
    </ul>
  </div>
  <div id="extra">
    <p><strong>More stuff here.</strong></p>
    <p>sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p>
  </div>
  <div id="footer">
    <p>Footer</p>
  </div>
</div>
</body>
</html>








Related examples in the same category

1.div float: left;
2.div float: left; 2
3.Two floating left div sections
4.Div float: none;
5.Div float: left; 3
6.Div float: left; 4
7.Div float: left; 5
8.DIV float: left; 6
9.DIV float: right;
10.div float with width and height
11.div width: 50px;
12.DIV width: auto;
13.Div width: 100%;
14.Div width: 1001px;
15.Div width: 500px;
16.DIV width: 134px;
17.Using width to control nested div boxes
18.Set width and height to DIV
19.Shrinkwrapped DIV by setting both width and height to auto
20.div height: 50px;
21.Div line-height: 23px;
22.Div line-height: 17px;
23.DIV line-height: 1.3em;
24.DIV height:1.8em;
25.DIV line-height:1.8em;
26.Using div with different height to create layout
27.Div for clearing
28.Div clear: both;
29.DIV for clear
30.DIV clear: left;
31.Div position: relative;
32.DIV position: absolute;
33.Using position: fixed; to place div tags to four corners
34.Using position: absolute; to place div tags to four corner
35.div with position: absolute; inside div with position: relative;
36.div with position: absolute; inside body
37.div position:relative;
38.Set position of DIV to absolute, to bottom 50px, to left 100px
39.Wrap tags in DIV and set the position
40.Div left: 0;
41.Div display: inline;
42.div display: table-cell;
43.Div top: 0;