design problem -css [Archive]

tabledesign

12-12-2006, 01:20 PM

hi!

i`m new to css designing.

i tried the following now for more hours:

|--------------------------------------
| HEADER | |
|------------------------------- | |
| | B |
| CONTENT | |
| | |
|--------------------------------------

i think it should be ease but i`m confused

the HEADER is fixed in height : 200px.
the right part B has fixed width: 160px.
the content is fixed in width 700px but not fixed in height (up to the bottom)
the content part should scroll if neccessary, but the scrollbar should be within the content part.

the header and content should be right - aligned to the right part B.

maybe you can give me some hints.

thanks

Excavator

12-12-2006, 06:14 PM

Hello tabeldesign,
I made this as an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
text-align: center;
background-color: #666666;
}
* {
margin: 0px;
padding: 0px;
}

#wrapper {
background-color: #FFFFFF;
width: 860px;
margin: 10px auto 10px auto
}
#header {
background-color: #99FFFF;
height: 200px;
width: 700px;
clear: left;
float: left;
}
#b {
background-color: #CC99FF;
clear: right;
float: right;
height: 600px;
width: 160px;
}
#content {
height: 400px;
width: 700px;
background-color: #FFCCFF;
clear: left;
float: left;
overflow: auto;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
</head>
<body>
<div class="clearfix" id="wrapper">
<div id="header">
</div>
<div id="b">
</div>
<div id="content">
</div>
</div>
</body>
</html>

It's done with floats, and the whole thing is wrapped in div #wrapper so you can center it and contain the floats. The .clearfix:after stuff in the CSS is to clear the floats so the wrapper will enclose the webpage - see this page. (http://www.positioniseverything.net/easyclearing.html)
The #content div won't scroll unless it has a set height, overflow: auto; makes a scrollbar appear when needed.
Header and content will stay right-aligned with b as long as the sizes fit - google "box model". (http://www.w3.org/TR/REC-CSS2/box.html)