Problem creating a 3 Column CSS Layout

Hi
I’m struggling to create a 3 Column CSS Layout where my middle column is under my navigation and I may have a float issue.

Ideally I want a site which will have a header at the top, left column to house the navigation, middle column to have picture or content and the right column to have an adrotator or shopping cart. And footer to go at the bottom of the page.

But I am struggling to create this and would appreciate any help.

Here’s my CSS code.:slight_smile:



body
{
    font-family: Arial, Verdana;
    font-size:12pt;
    background-image:url('grass-natural.jpg');
    background-repeat:repeat-x;
}
h2
{
    font-family:Tahoma;
    font-size:x-large;
    font-weight:bold;
}
H1, H2, H3, H4
        {
            font-family: Arial, Verdana;
            font-weight: bold;
            font-style: italic;
        }
        a
        {
            color: #990000;
        }
        .content
        {
            width:900px;
            margin:auto;
            border:solid #000000;
           
            padding:10px;
            color: #ffffff;
        }
        .tabstrip
        {
            border-top:solid 1px #ffffff;
            border-bottom:solid 1px #ffffff;
            padding:20px;
            background-color:ffffff;
        }
        .leftcolumn
        {
            float:left;
            padding:0px;
            border-right:solid 1px #ffffff;
            width: 200px;
            margin: 0px;
        }
        .panel 
        {
         float:left;
         padding:5px;
         border-right:solid 1px #ffffff;
         width:200px;
         margin: 0px;
         }
        .rightcolumn
        {
            float:right;
            width:400px;
        }
        
        #middlecolumn
        {
            margin:0; 200px;
            background:#FFFFFF;
            font-size:80%;
        }
        .clear
        {
            clear:both;
        }
        .grid
        {
            margin:0px auto;
        }
        .grid td, .grid th
        {
            padding:10px;
        }
        .grid th
        {
            font-family: Times New Roman, Serif;
            font-weight: bold;
            font-style: italic;
            font-size: large;
            text-align:left;
            background-color:#ffffcc;
        }
        .alternating
        {
            background-color:#ffffcc;
        }
        .float
        {
            float: left;
        }
        .small
        {
            font-size: 10px;
        }
        .center
        {
            text-align:center;
        }
        .right
        {
            float: right;
        }
        .leftpadding
        {
            float: left;
            padding: 5px 10px 5px 0px;
        }
        .rightpadding
        {
            float: right;
            padding: 0px 0px 2px 5px;
        }
        img
        {
            border: solid 1px #660000;
        }
        .galleryborder
        {
            border: solid 10px #cccccc;
        }
        .selectedrow
        {
            background-color: #ffffcc;
        }
        .login
        {
            background-color: #ffffcc;
            Border: solid 1px #ffcc00; 
            font-family: Verdana;
            font-size: 0.7em;
            width: 360px;
            
        }
        .password
        {
            background-color: #ffffcc;
            Border: solid 1px #ffcc00; 
            font-family: Verdana;
            font-size: 0.8em;
            width: 360px;
            text-align: center;
            
        }
        .loginbutton
        {
            background-color: #ffffff;
            Border: solid 1px #f00000; 
            font:Verdana;
            font-size:0.8em;
            Color: #ffffff;
        }
        .texttitlestyle
        {
            background-color: #ffffff;            
            font-family:Times New Roman;
            font-style:Italic;
            font-weight:bold; 
            font-size: 16px;
            color: #660000;
        }
        .instructiontextstyle
        {
            color: Black;
        }
        .successtextstyle
        {
            color: #990000;
            font-weight: bold;
        }
        .textboxstyle
        {
            font-size: 0.8em;            
        }
        .register
        {
            background-color: #ffffcc;
            Border: solid 1px #ffcc00;
            font-family:Verdana;
            font-size: 0.8em;
            width: 290px;
        }
        .sidebarbuttonstyle
        {
             color: #ffffff;
        }
        .sidebarstyle
        {
            background-color: #990000;            
            font-size: 0.9em;
            vertical-align: Top;
        }
        .headerstyle
        {
            background-color: #ffff99;
            Border: solid 2px #FFFBD6;
            font-weight:bold;
            font-size: 0.9em;
            Color: #333333;
            text-align: Center;
        }
        .passwordhintstyle
        {
           font-style: italic;
           Color: #888888;
        }
        .red
        {
            color:#ff0000;
        }

Paul has a detailed pinned thread that outlines the production of such a layout. You’ll probably find most questions have been answered there.

Hi,

As you didn’t supply the html that goes with that we will just have to guess that you have the html correct:)

You have an error here:


#middlecolumn {
 [B]   margin:0;
200px;[/B]
    background:#FFFFFF;
    font-size:80%;
}


I assume you meant :


#middlecolumn {
 [B]   margin:0 200px;[/B]
    background:#FFFFFF;
    font-size:80%;
}


Always validate your css before you post a question to save embarrassing typos :slight_smile:

Here’s a simple template that I created from my inline-block method that I’ve been using since 2007


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>3 Column Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body { height: 100%; }
    #header, #footer { position: absolute; }
    #container { position: relative; }
    #header, #footer { left: 50%; }
    #footer { bottom: 0; z-index: 2; }
    #header { top: 20px; }
    #left_nav, #right_nav, #main, .column { display: -moz-inline-box; -moz-box-orient:vertical; display: inline-block; vertical-align: top; }

    #fake_header, #content { margin: 0 auto; overflow: hidden; }
    #content { padding-bottom: 60px; }
    #footer { padding-top: 15px; }
    #footer { margin-left: -498px; }
    #main { margin-top: 50px; }
    .column { margin-right: 40px; }
    #header, #footer, #container, #content, #left_nav, #right_nav, #main, .column  { border: 1px solid #000; }

    #fake_header { width: 100%; }
    #content { min-height: 670px; }
    #main { width: 647px; }
    #left_nav, #right_nav, .column { width: 160px; }
    #footer { height: 46px; }
    #footer, #content { width: 996px; }

    .ie67 #main, .ie67 #left_nav, .ie67 #right_nav, .ie67 .column { display: inline; vertical-align: top; }
    .ie67 #container { height: 100%; }
    .ie67 #content { height: 628px; overflow: visible; }
    .ie67 .column { margin-top:50px; }
    .ie67 .content { padding-bottom: 120px; }
    .ie67 .footer { bottom: -1px; }
    </style>
  </head>
<!--[if lte IE 7]>
      <body class="ie67">
    <![endif]-->

    <![if (!IE) | (gt IE 7 )]>
      <body>
    <![endif]>

    <div id="container">
        <div id="fake_header"></div>
        <div id="content">
          <div id="left_nav">left nav</div>
          <div id="main">
            <!--Wrapper div for Firefox 2 only-->
            <div class="wrapper">
                <div class="column">
                    column
                </div>
                <div class="column">
                    column
                </div>
            </div>
          </div>
          <div id="right_nav">right nav</div>
        </div>
        <div id="header">
            header
        </div>
        <div id="footer">
            footer
        </div>
    </div>

    </body>
</html>


Here’s another way that’s closer to what you want, but needs some work:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>3 Column Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body { height: 100%; }
    #header, #footer { position: absolute; }
    #container { position: relative; }
    #header, #footer { left: 50%; }
    #footer { bottom: 0; z-index: 2; }
    #header { top: 20px; }
    #left_nav, #right_nav, #content, .column { display: -moz-inline-box; -moz-box-orient:vertical; display: inline-block; vertical-align: top; }

    #fake_header, #content { margin: 0 auto; overflow: hidden; }
    #content { padding-bottom: 60px; }
    #footer { padding-top: 15px; }
    #footer { margin-left: -498px; }
    #main { margin-top: 50px; }
    .column { margin-right: 40px; }
    #header, #footer, #container, #content, #left_nav, #right_nav, #main, .column  { border: 1px solid #000; }

    #fake_header { width: 100%; height: 100px; }
    #content { min-height: 670px; }
    #main { width: 647px; }
    #left_nav, #right_nav, .column { width: 114px; }
    #footer { height: 46px; }
    #footer, #content { width: 996px; }

    .ie67 #content, .ie67 #left_nav, .ie67 #right_nav, .ie67 .column { display: inline; vertical-align: top; }
    .ie67 #container { height: 100%; }
    .ie67 #content { height: 628px; overflow: visible; }
    .ie67 .column { margin-top:50px; }
    .ie67 .content { padding-bottom: 120px; }
    .ie67 .footer { bottom: -1px; }
    </style>
  </head>
<!--[if lte IE 7]>
      <body class="ie67">
    <![endif]-->

    <![if (!IE) | (gt IE 7 )]>
      <body>
    <![endif]>

    <div id="container">
        <div id="left_nav">left nav</div>
        <div id="content">
          <div id="fake_header">fake header</div>
          <div id="main">
            <!--Wrapper div for Firefox 2 only-->
            <div class="wrapper">
                <div class="column">
                    column
                </div>
                <div class="column">
                    column
                </div>
            </div>
          </div>
        </div>
        <div id="right_nav">right nav</div>
        <div id="header">
            header
        </div>
        <div id="footer">
            footer
        </div>
    </div>

    </body>
</html>

Hi All
I am trying to create the following three columm page but I am struggling with the positioning aspects of my CSS. The required result is to have a header at the top of my page, on the left hand side a navigation with a background colour of grey and the title of the nav to be in a different grey so that it contrasts.
The middle section can be an area which will be populated by text or image depending on the page.
The right hand side I would like to display two boxes one to display the Shopping cart and the other box to house an adrotator displaying brand images or latest news text.
I have included my code of where I am at the moment.




/* CSS Document */
body
{
background-image:url('images/grass-natural.jpg');
background-repeat:repeat-x;
font-family: Verdana, Sans-Serif;
font-size: 14px;
height: 100&#37;;
margin-bottom: 1px;
}

#container {
position:relative;
width:960px;
background-image:url('images/grass-natural.jpg');
text-align:left;
}

/* header */
#header {
background-image:url ('images/TitleWide.jpg');
height:200px;
width:1000px;
background-repeat:no-repeat;
background-position:center;
}

#header H1 {
margin:0;
padding: 10px 0;
}
#sidebar1 {
position: absolute;
top: 60px;
left: 0;
width:200px;
background:#999;
padding: 15px 10px 15px 20px;
}
#sidebar2 {
position:absolute;
#sidebar1 {
position: absolute;
top: 60px;
left: 0;
width:200px;
background:#999;
padding: 15px 10px 15px 20px;
}
#maincontainer {
margin: 0 200px;
padding: 0 10px;
}

#footer {
margin: 0;
padding: 10px 0;
background:#000;
}
H1, H2, H3, H4
{
font-family: Times New Roman, Serif;
font-weight: bold;
font-style: italic;
}
a
{
color: #990000;
}
.content
{
position:absolute;
width:800px;
margin:auto;
border:solid #000000;
background-color:#FFFFFF;
padding:10px;
color:#000000;
}
content p {
position:absolute;
width:600px;

}
.tabstrip
{
border-top:solid 1px #000000;
border-bottom:solid 1px #000000;
}
.leftcolumn
{
float:left;
padding:0px;
border-right:solid 1px #ffffff;
width: 200px;
margin: 0px;
display:block;
background-color:#666666;

}

.navigation
{
float:left;
padding:0px;
background-color:#666666;
display:block;
width:200px;

}

.navigation:ul
{
float:left;
background-color:text-align:center;
text-align:center;
color:#FFFFFF;
display:block;
width:200px;
}

.p
{
text-align:center;
font-family:Verdana, Arial;
font-size:14px;
font-style:normal;
color:#000000;
}
.rightcolumn
{
float:left;
width:640px;
}
.clear
{
clear:both;
}
.grid
{
margin:0px auto;
}
.grid td, .grid th
{
padding:10px;
}
.grid th
{
font-family: arial, verdana;
font-weight: bold;
font-style: normal;
font-size: large;
text-align:center;
background-color:#FFFFFF;
}
.alternating
{
background-color:#000000;
}
.float
{
float: left;
}
.small
{
font-size: 10px;
}
.center
{
text-align:center;
}
.right
{
float: right;
}
.leftpadding
{
float: left;
padding: 5px 10px 5px 0px;
}
.rightpadding
{
float: right;
padding: 0px 0px 2px 5px;
}
img
{
border: solid 1px #660000;
}
.pageborder
{
border: solid 10px #cccccc;
}
.selectedrow
{
background-color: #ffffcc;
}
.login
{
background-color:C0C0C0;
Border: solid 1px #000000;
font-family: Verdana;
font-size: 0.7em;
width: 360px;

}
.password
{
background-color: #ffffcc;
Border: solid 1px #ffcc00;
font-family: Verdana;
font-size: 0.8em;
width: 360px;
text-align: center;

}
.loginbutton
{
background-color: #ffffff;
Border: solid 1px #CC9966;
font:Verdana;
font-size:0.8em;
Color: #990000;
}
.texttitlestyle
{
background-color: #ffffff;
font-family:Times New Roman;
font-style:Italic;
font-weight:bold;
font-size: 16px;
color: #660000;
}
.instructiontextstyle
{
color: Black;
}
.successtextstyle
{
color: #990000;
font-weight: bold;
}
.textboxstyle
{
font-size: 0.8em;
}
.register
{
background-color:C0C0C0;
Border: solid 1px #000000;
font-family: Verdana;
font-size: 0.7em;
width: 360px;
}
.sidebarbuttonstyle
{
color: #ffffff;
}
.sidebarstyle
{
background-color:Red;
font-size: 0.9em;
vertical-align: Top;
}
.headerstyle
{
background-color:Gray;
Border: solid 2px #FFFFFF;
font-weight:bold;
font-size: 0.9em;
Color: #333333;
text-align: Center;
}
.passwordhintstyle
{
font-style: italic;
Color: #888888;
}
.red
{
color:#ff0000;
}

Any help would be greatly appreciated.

Cheers

Paul :slight_smile:

um, I don’t suppose you have a link to the page do you? Or perhaps you could also copy and paste the HTML?

Yes, we’d need to see your html too. Otherwise it’s like having directions without a map.

These links also may be of use in constructiong a good-quality, 3-column layout:

http://www.pmob.co.uk/temp/3colfixedtest_4.htm
http://www.pmob.co.uk/pob/three-columns-fluid.htm

Threads merged - It would have been nice to have a reply to our previous answers before starting a new thread :frowning:

Paul
I’m new to this site so I still finding my feet to see how to post messages.

Regards
Paul

No worries - The message was there just to remind everyone :slight_smile:

Do you have some html to go with that so we can give you some real help? :slight_smile:

Hi Paul

Here’s my html


/* CSS Document */
body
{
background-image:url('images/grass-natural.jpg');
background-repeat:repeat-x;
font-family: Verdana, Sans-Serif;
font-size: 14px;
height: 100&#37;;
margin-bottom: 1px;
}

#container {
position:relative;
width:960px;
background-image:url('images/grass-natural.jpg');
text-align:left;
}

/* header */
#header {
background-image:url ('images/TitleWide.jpg');
height:200px;
width:1000px;
background-repeat:no-repeat;
background-position:center;
}

#header H1 {
margin:0;
padding: 10px 0;
}
#sidebar1 {
position: absolute;
top: 60px;
left: 0;
width:200px;
background:#999;
padding: 15px 10px 15px 20px;
}
#sidebar2 {
position:absolute;
#sidebar1 {
position: absolute;
top: 60px;
left: 0;
width:200px;
background:#999;
padding: 15px 10px 15px 20px;
}
#maincontainer {
margin: 0 200px;
padding: 0 10px;
}

#footer {
margin: 0;
padding: 10px 0;
background:#000;
}
H1, H2, H3, H4
{
font-family: Times New Roman, Serif;
font-weight: bold;
font-style: italic;
}
a
{
color: #990000;
}
.content
{
position:absolute;
width:800px;
margin:auto;
border:solid #000000;
background-color:#FFFFFF;
padding:10px;
color:#000000;
}
content p {
position:absolute;
width:600px;

}
.tabstrip
{
border-top:solid 1px #000000;
border-bottom:solid 1px #000000;
}
.leftcolumn
{
float:left;
padding:0px;
border-right:solid 1px #ffffff;
width: 200px;
margin: 0px;
display:block;
background-color:#666666;

}

.navigation
{
float:left;
padding:0px;
background-color:#666666;
display:block;
width:200px;

}

.navigation:ul
{
float:left;
background-color:text-align:center;
text-align:center;
color:#FFFFFF;
display:block;
width:200px;
}

.p
{
text-align:center;
font-family:Verdana, Arial;
font-size:14px;
font-style:normal;
color:#000000;
}
.rightcolumn
{
float:left;
width:640px;
}
.clear
{
clear:both;
}
.grid
{
margin:0px auto;
}
.grid td, .grid th
{
padding:10px;
}
.grid th
{
font-family: arial, verdana;
font-weight: bold;
font-style: normal;
font-size: large;
text-align:center;
background-color:#FFFFFF;
}
.alternating
{
background-color:#000000;
}
.float
{
float: left;
}
.small
{
font-size: 10px;
}
.center
{
text-align:center;
}
.right
{
float: right;
}
.leftpadding
{
float: left;
padding: 5px 10px 5px 0px;
}
.rightpadding
{
float: right;
padding: 0px 0px 2px 5px;
}
img
{
border: solid 1px #660000;
}
.pageborder
{
border: solid 10px #cccccc;
}
.selectedrow
{
background-color: #ffffcc;
}
.login
{
background-color:C0C0C0;
Border: solid 1px #000000;
font-family: Verdana;
font-size: 0.7em;
width: 360px;

}
.password
{
background-color: #ffffcc;
Border: solid 1px #ffcc00;
font-family: Verdana;
font-size: 0.8em;
width: 360px;
text-align: center;

}
.loginbutton
{
background-color: #ffffff;
Border: solid 1px #CC9966;
font:Verdana;
font-size:0.8em;
Color: #990000;
}
.texttitlestyle
{
background-color: #ffffff;
font-family:Times New Roman;
font-style:Italic;
font-weight:bold;
font-size: 16px;
color: #660000;
}
.instructiontextstyle
{
color: Black;
}
.successtextstyle
{
color: #990000;
font-weight: bold;
}
.textboxstyle
{
font-size: 0.8em;
}
.register
{
background-color:C0C0C0;
Border: solid 1px #000000;
font-family: Verdana;
font-size: 0.7em;
width: 360px;
}
.sidebarbuttonstyle
{
color: #ffffff;
}
.sidebarstyle
{
background-color:Red;
font-size: 0.9em;
vertical-align: Top;
}
.headerstyle
{
background-color:Gray;
Border: solid 2px #FFFFFF;
font-weight:bold;
font-size: 0.9em;
Color: #333333;
text-align: Center;
}
.passwordhintstyle
{
font-style: italic;
Color: #888888;
}
.red
{
color:#ff0000;
}

Cheers

Paul

Hi Paul,

I’m not an expert but that looks suspiciously like CSS :slight_smile:

We’d need to see the html so that we can build a working page and help you. The css you just posted uses absolute positioning and will be no good for a 3 column layout width footer because absolute elements are removed from the flow.

You would need a floated layout something like this.

Hi Paul
I will do some work on this and post something to you soon.

Regards

Paul