New to tableless designs

**myshtern** · 12-18-2005, 01:49 PM

Hello everyone,

I'm new to tableless designs and need a little help with my CSS.
Here is the layout I want:

Here is what I have for code:

Code:

<HTML>
  <HEAD>
    <TITLE>A frame document with CSS2</TITLE>
    <STYLE type="text/css">
      <BODY        
      #header {
        position: fixed;
        width: 800px;
        height: 150px;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #topLinks {
        position: fixed;
        width: 800px;
        height: 55px;
        top: 150px;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #sideBar {
        position: fixed;
        width: 150px;
        height: auto;
        top: 205px;
        color: #48607C;
        right: 0;
        bottom: auto;
        left: 650px;
      }
      #main {
        position: fixed;
        width: 650px;
        height: auto;
        top: 205px;
        right: 150px;
        bottom: auto;
        left: 0;
      }
      </style>
      
      <div id="header"></div>
      <div id="topLinks"></div>
      <div id="sideBar">This needs to be on the right side </div>
      <div id="main"></div>
</body>
</html>

What am I doing wrong?
Can someone help me get started out?

Thanks,
Alex

**praveen** · 02:28 PM

Code:


<html>
<head>
<style>
#container {
    width: 780px;
    margin: 0px;
    color: #333;
    border: 1px solid #000000;
    line-height: 130%;
    padding: 1px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;

}

#header {padding: .5em;

color:#FFFFFF;}

#toplinks{font-family: verdana, arial, Helvetica,sans-serif;
font-size: 10px;
text-decoration: none;
line-height: 12px;
background-color: #0066CC;
border-bottom: 1px solid #fff;
height:15px;
text-align:center;
color:#FFFFFF;
padding: 3px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #fff;}


#sidebar{float: right;
width: 190px;
margin: 0;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-left: 1px solid #000000;

color: #666666;}

#main{margin-left: 2px;
margin-right: 190px;
padding: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
</style>


</head>

<body>
<div id="container">
<div id="header"></div>
<div id="toplinks"></div>
<div id="sidebar"> side bar</div>
<div id="main">content</div>
</div>
</body>
</html>

try this this should work.

**vangogh** · 12-18-2005, 02:19 PM

Hi myshtern,

For starters your html is off a little. Your css needs to be in the head of your document not in the body.

Your html should look like this

Code:

<html>
<head>
<title></title>

<style type="text/css">
 your styles
</style>

</head>

<body>
 your html structure
</body>

</html>

You can use the all caps for your html, but it's better practice to use lowercase for your tags.

Also in your css positioning you should probably use position:absolute instead of fixed.

Try that first and let me know if you're still having problems.

**mysticalfairy** · 12-19-2005, 12:47 PM

and welcome to css