Jefim Borissov » css http://jefim.eu/blog Житие мое Fri, 05 Aug 2011 22:28:59 +0000 en hourly 1 http://wordpress.org/?v=3.0.3 Basic CSS layout http://jefim.eu/blog/2009/10/basic-css-layout/ http://jefim.eu/blog/2009/10/basic-css-layout/#comments Wed, 28 Oct 2009 23:39:49 +0000 Jefim http://jefim.eu/blog/?p=256 The basic CSS layout I use in my work is plain simple - header, sontent, sidebar and footer.

The HTML:

<!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>
  <title>My page</title>
  <base href="http://localhost/" />
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div id="wrap">
    <div id="header">
      Header
    </div>
    <div id="content">
      Content
    </div>
    <div id="sidebar">
      Sidebar
    </div>
    <div class="clr"></div>
    <div id="footer">
      Footer
    </div>
  </div>
</body>
</html>

And the CSS is very simple:

#wrap    { width: 960px; margin: 0 auto; }
#header  { }
#content { width: 700px; float: left; }
#sidebar { width: 260px; float: right; }
#footer  { }
.clr     { clear:both; height:0px; overflow:hidden; }

This is it. This code will show a simple page which is ready for hardcore modification. I know this is pretty basic yet it is one of the most used code snippets in my IDE. Good luck!

]]> http://jefim.eu/blog/2009/10/basic-css-layout/feed/ 14