Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Thanked 0 Times in 0 Posts

    design problem -css


    i`m new to css designing.

    i tried the following now for more hours:

    PHP Code:
    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.


  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,847 Times in 1,831 Posts
    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">
    <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 */
    <div class="clearfix" id="wrapper">
    	<div id="header">
    	<!--closes header --></div>
    		<div id="b">
    		<!--closes b --></div>
    	<div id="content">
    	<!--closes content --></div>
    <!--closes wrapper --></div>
    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.
    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".
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts