I probably have the cart before the horse, but I am trying to take it step by step, hand-coding in DW to learn the basics first.
I have placed all my html <div>'s within a container, and in an attempt to add color to the white-space surrounding this container, I have made a wrapper.
My intent is to make this area "liquid," filling the white-space regardless of resolution. Unfortunately I have a slim white-space surrounding this wrapper when viewed in a browser.
Simple HTML:
<title>Untitled Document</title>
<link href="website.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">wrapper
<div class="container">
<div class="header">header</div>
<div class="navigation">navigation</div>
<div class="content">content</div>
<div class="sidebar">sidebar</div> <div class="footer">footer</div>
</div>
</div>
</body>
</html>
Simple CSS:
.body {
}
.wrapper{
background: #9999cc;
width: 100%;
}
.container {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
.header {
background-color: red;
margin:0 auto;
height:100px;
width: 900px;
}
.navigation {
background-color: yellow;
margin:0 auto;
height: 50px;
width: 900px
}
.content {
background-color: green;
margin: 0 auto;
float: left;
height: 800px;
width: 600px;
}
.sidebar {
background-color: blue;
margin: 0 auto;
float: right;
height: 800px;
width: 300px;
}
.footer {
clear: both;
background-color: gray;
margin :0 auto;
height: 70px;
width: 900px;
}
I haven't gotten to padding, borders or margins yet that was to be my next step. My efforts are solely to begin to get my "feet- wet" by trial/error and learn through making mistakes. |
