CSS no Tables 1

ClulessChris · Dec 5, 2007

I'm trying to get to grips with CSS and move away from the use of tables, but I'm very new to this.
As a start i'm trying to create a 2 column layout, but don't get the desired results (IE6).
the paragraph in the "layer2" div is aligned to the left of the page an seems to sit outside the div.

where am I going wrong?

Code:

<html>
  <head>
    <title>CSS Test - Testbed</title>
    <style type="text/css">
h1 
{
 text-align: center;
 color: blue;
 font-family: Arial;
 font-size: 150%

#layer1
{
   background-color : #FFCC66; 
   border-width : 3px; 
   border-style : solid; 
   border-color : black; 
   width : 300%; 
   top : 10px; 
   left : 10px; 
   position : absolute; 
   z-index : 90; 
}

#layer2
{
   background-color : #FFCC66; 
   border-width : 3px; 
   border-style : solid; 
   border-color : black; 
   width : 900%; 
   top : 10px; 
   left : 3000px; 
   position : absolute; 
   z-index : 90; 
}
  </style>
  </head>

  <body >
    <div ="layer1">
      <p>This is a side bar that would be used for navigation</p>
    </div>

    <div ="layer2">
      <h1>Main content</h1>
      <p>This is the main content section of the page</p>
    </div>
  </body>
</html>

p.s.
can you suggest a good resource to give me an introduction to css (books, websites, whatever)?

Never knock on Death's door: ring the bell and run away! Death really hates that!

BillyRayPreachersSon · Dec 5, 2007

Here's some good advice:

Don't use absolute positioning to achieve this if you need your boxes to expand with the content.

Try the following links:

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

http://www.maxdesign.com.au/presentation/page_layouts/

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

These and more were found with a search on Google:

http://www.google.co.uk/search?num=100&hl=en&safe=off&q=css+column+layouts&btnG=Search&meta=

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

ClulessChris · Dec 5, 2007

Dan,
That was a quick responce. many thanks.
I would use % positioning but am still unsure of what can and can't be done with CSS.
The example posted was a test file to help get to grips with the concepts.
I'll check out those links.

Never knock on Death's door: ring the bell and run away! Death really hates that!

jstreich · Dec 5, 2007

Positioning and sizes and widths are two different things.

position: is either relative or absolute
Position rules are:

Code:

top:
botton:
left:
right:

Then there is floating, which is what you appear to be looking for.
float: (is either right or left)

Last is the sizes.

It looks like your looking for two column layout. It should look something like this:

Code:

<html>
<head>
  <title>test</title>
  <style type="text/css">
<!--
  .navigation
  {
    float: left;
    width= 200px;
  }

  .content
  {
    margin-left: 210;
  }

  .footer
  {
    clear: both;
  }
//-->
</style>
<body>
  <div>header/glory banner if you want</div>
  <div class="navigation">Nav</div>
  <div class="content">Content</div>
  <div class="foot">Copyright and all that jazz</div>
</body>
</html>

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS no Tables 1

ClulessChris

IS-IT--Management

BillyRayPreachersSon

Programmer

ClulessChris

IS-IT--Management

jstreich

Programmer

Similar threads

Part and Inventory Search

Sponsor