5 replies [Last post]
eastmaster
eastmaster's picture
Offline
Regular
Alunis Mures, Romania
Last seen: 13 years 37 weeks ago
Alunis Mures, Romania
Timezone: GMT+2
Joined: 2006-10-09
Posts: 27
Points: 0

Hi coders.

Sometimes i'm going crazy when i feel that i don't have enough control (knowledge) over CSS.

I need a simple template like this:

White HEADER

Green Left COLUMN

White Center COLUMN

Blue Right COLUMN

White FOOTER

Well, you say maybe, hey dude this is simple. yep i know, but i need in that way if the left column's content is 70 px height and right column's content is only 2 or 3 words, i want that the right columns height to be the same as the left column!

How can i do this? Do you have any examples?

I done this before but it was easier because the left and right column has the same colour, it was only the overflow trick, but here the colours are different!

By(e)
eastmaster

eastmaster
eastmaster's picture
Offline
Regular
Alunis Mures, Romania
Last seen: 13 years 37 weeks ago
Alunis Mures, Romania
Timezone: GMT+2
Joined: 2006-10-09
Posts: 27
Points: 0

One more thing...

The layout must be centered, 750px.

http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

Before i found a link and i started to use it but it does not work, it's not perfect on 750px width page.

By(e)
eastmaster

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Two choices really: Either

Two choices really:
Either employ the 'Faux Columns' technique, (you may need an extra container or two for holding background images) or try the the 'Equal height columns' demo part of the 'onetruelayout' group of articles over at positioniseverything.net.

As for centering it's hard to answer without any sight of code or a link to look at.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

This is one case where

This is one case where absolute positioning works well if you stay within the limitations. The center column must be longer than either side column. Other than that, it's pretty straight forward.

A little study should make the method clear.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" />
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=UTF8" />

  <title></title>
  <style type="text/css">
  /*<![CDATA[*/

  html, body {
    margin: 0;
    padding: 0;
    font: 100%/1.25 verdana, sans-serif;
    color: black;
    background-color: white;
    }
    
  p {
    font-size: 1em;
    margin-bottom: 0;
    }
    
  #wrapper {
    width: 750px;
    margin: 0 auto;
    }
    
  #banner,
  #footer {
    border: 1px solid black;
    text-align: center;
    }

  #columnA {
    position: absolute;
    top: 0;
    left: -200px;
    width: 200px;
    color: white;
    }
    

  #columnB {
    position: absolute;
    top: 0;
    right: -200px;
    width: 200px;
    color: white;
    }
    
  #content {
    position: relative;
    width: 350px;
    border-left: 200px solid green;
    border-right: 200px solid blue;
    padding-top: 1px;
    }
    
    /*]]>*/
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="banner">
      <h1>generic header</h1>
    </div>

    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Phasellus at metus quis mauris vestibulum ullamcorper. Sed
      magna. Aliquam hendrerit turpis eu diam. Phasellus pulvinar
      vulputate sem. Nunc commodo. Fusce ac magna et elit pharetra
      suscipit. Nam eros nisl, scelerisque ac, posuere a, mollis
      et, dolor. Morbi aliquet, diam eget facilisis lacinia, orci
      quam tempor nulla, sit amet auctor lorem turpis ut nulla. In
      congue erat imperdiet augue. Quisque mauris. Phasellus
      sagittis. Duis augue nunc, interdum eu, luctus a, euismod at,
      sem. Donec nec mauris eget sapien lacinia varius.</p>

      <div id="columnA">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
        elit.</p>
      </div>

      <div id="columnB">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
        elit. Phasellus at metus quis mauris vestibulum
        ullamcorper. Sed magna. Aliquam hendrerit turpis eu diam.
        Phasellus pulvinar vulputate sem. Nunc commodo. Fusce ac
        magna et elit pharetra suscipit. Nam eros nisl,
        scelerisque</p>
      </div>
    </div><!-- end content -->

    <div id="footer">
      <p>generic footer</p>
    </div>
  </div><!-- end wrapper -->
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

And of course there is the

And of course there is the third way the border trick, always forget that one Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

eastmaster
eastmaster's picture
Offline
Regular
Alunis Mures, Romania
Last seen: 13 years 37 weeks ago
Alunis Mures, Romania
Timezone: GMT+2
Joined: 2006-10-09
Posts: 27
Points: 0

Thank you guys. I have

Thank you guys.

I have founded also some other? (or same Tongue) tricks:

http://positioniseverything.net/piefecta-rigid.html
http://www.dynamicdrive.com/style/layouts/

I thank for all "CSS Defenders" for their good help! Smile

I like CSS better, day by day.

By(e)
eastmaster