float: left; margin-left: -700px : float « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. float

float: left; margin-left: -700px

   
<!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#wrapper {
  float: left;
  width: 100%
}

div#content {
  margin: 0 150px
}

div#navigation {
  float: left;
  width: 150px;
  margin-left: -150px
}

div#extra {
  float: left;
  width: 150px;
  margin-left: -700px
}

div#footer {
  clear: left;
  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.'float' Example
2.float left
3.float right
4.
  • float: left;
    • 5.float: left
    6.float box model
    7.float control default margin padding
    8.float extra box properties
    9.float highlighted dimensions
    10.float highlighted
    11.float inline
    12.float inline becomes block inline
    13.float inline becomes block multiline inline box model
    14.float left and right
    15.float left and right for three columns layout
    16.float left and right with other content
    17.float: left; width: 100%
    18.p float: left;
    19.When a block level element is floated, its sizing changes from expand-to-fit, to shrink-to-fit, and is no longer subject to margin collapsing.
    20.When an inline element is floated, it becomes a block-level element with shrink-to-fit sizing.
    21.multiple floats
    22.Using floating elements to create columns
    23.columns floating left
    24.float: left; for right column
    25.The float property is used to force content to wrap around another element.