Using tables for layout with PHP

…And if this is a good method how could I add the price which needs to be about 10 lines below it but about 300 pixels to the right?

Matt.

Some elements are block level by default (like <p>, <h1>, <ul>) so to add diplay:block to them is redundant. Sometimes it can be handy to set naturally inline elements (like <a>) to display: block.

Could you show us what you are working on? Otherwise these questions are a bit hard to answer.

Why would there be 10 line gap? Seems strange to me.

(You may also get some benefit from these series of articles which will cover all the issues you will encounter.)

Hi Paul O’b,

I understand most of what you have written but I have previously seen a tutorial similar to what you suggest but using PHP. I was intending to use PHP to separate parts of the web page (Header, Left side/Navigation, Main content, Footer). Are you saying this is a bad idea? Or do you suggest creating the CSS column layout within the Main content.php file?

YouTube - CSS Tutorial to build your own CSS website - Part 7 The video is titled CSS “Tutorial to build your own CSS website - Part 7” but it is about PHP. It explains how to use PHP to divide up parts of the page.

At the moment I am a little confused since you suggest using CSS to achieve what I was going to use PHP to achieve!?

Matt.

You haven’t been hearing what what we’ve been saying about PHP—that it’s irrelevant to your questions in this thread.

Imagine you are buying a car. The structure of it (the chassis etc.) is the HTML. The look and style is the CSS. The set of machines at the factory that assembled the car are the PHP. When you choose a car, you’ll base your decision on the look and build of the car. I’m sure you don’t care what machines were used to build it. Whatever means were used to put it together, what’s important is the finished product before you.

As Paul said, build your template with HTML and CSS. If, then, you want to break it up into its component part and let PHP manage these parts on the server, that’s fine; but neither styling, layout nor structure have anything whatever to do with PHP.

You are missing the point still.:slight_smile:

Even that video you point to is taking an existing html/css page and then converting it into php components. You must first create a working css/html page. Server side code comes afterwards once you have a structure that caters for the layout you need then you can add the back end logic as required. Don’t confuse the disciplines.

Designing a site should be in this (albeit simplistic) order:

  1. Semantic Html
  2. CSS
  3. Server side code

There are of course adjustments to be made for each discipline depending on what needs to be done but you should approach with the above frame of mind.

You are right - now I understand.

Given the page will be divided using CSS this will mean positioning will be made easier. Looking at what I said about the JohnLewis.com web site would you agree that I may not need to use the ‘position’ CSS coding since that site does not use it?

Matt.

…and is it best to keep things simple?? For example I could have 5 main areas for content. Two columns for content at the top of the page. One column below that, which goes across the whole page. And then 2 columns below that for Features listing in the left column and ‘what’s in the box’ in the right column…

…or would you recommend a minimal number of areas/columns?

Matt.

In the example above I would ideally need the column 2 and column 3 in your example changing into one column below them and then reappearing as columns 2 and 3 again after that. Does it work like a table? The idea of merging cells, etc… Or is there a method to have the column appear below other columns (in this instance below columns 2 and 3 and NOT below column 1)?

Matt.

It’s more of the same really.:slight_smile:

You could either float a wider right column to start with and then split that into two smaller floated columns where needed. Or you could float a wider element just for the top.

e.g.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
#outer {
    width:950px;
    margin:auto;
    border:1px solid #000;
}
#column1, #column3 {
    width:250px;
    float:left;
    background:red;
}
#column3 {
    float:right;
    background:blue
}
#column2 {
    float:left;
    width:430px;
    margin:0 0 0 10px;
    background:#fffccc;
}
#footer, #header {
    width:100%;
    clear:both;
    background:green;
    text-align:center;
    padding:10px 0;
}
h1, p {
    margin:0 0 1em;
    padding:0 5px;
}
#subhead{
    float:right;
    width:690px;
    background:yellow;
    margin:0 0 10px;
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="column1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. </p>
    </div>
    <div id="subhead">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
    </div> 
    <div id="column2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. Praesent sapien felis, imperdiet id mattis ac, sodales ut urna. Sed blandit dapibus purus sed volutpat. Nam ultricies adipiscing sapien, sit amet commodo erat laoreet sed. </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
    </div>
    <div id="column3">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. </p>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</div>
</body>
</html>

Or for the first method I mentioned like so.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
#outer {
    width:950px;
    margin:auto;
    border:1px solid #000;
}
#column1, #column3 {
    width:250px;
    float:left;
    background:red;
}
#column3 {
    float:right;
    background:blue
}
#column2 {
    float:left;
    width:430px;
    margin:0 0 0 10px;
    background:#fffccc;
}
#footer, #header {
    width:100%;
    clear:both;
    background:green;
    text-align:center;
    padding:10px 0;
}
h1, p {
    margin:0 0 1em;
    padding:0 5px;
}
#content {
    float:right;
    width:690px;
    background:yellow;
    margin:0 0 10px;
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="column1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. </p>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
        <div id="column2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. Praesent sapien felis, imperdiet id mattis ac, sodales ut urna. Sed blandit dapibus purus sed volutpat. Nam ultricies adipiscing sapien, sit amet commodo erat laoreet sed. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
        </div>
        <div id="column3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. </p>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</div>
</body>
</html>

The background colours are just to show where the elements are sitting easily.

You can move the content inside those containers using margins or padding where appropriate. If you want a horizontal navigation then you would float list elements across.

Play around with the code until you understand how it works. You might also like to read up on floats and clearing as that will be the next issue you need to know about.

My query is are the any tips you can provide when using tables with PHP, since I may not be able to see the output until it is online.

You have to debug your PHP at some point right? So it’s not really an excuse to use tables for layout… on the contrary.

Anyway, best practice I have found for this is to code your PHP to output the minimal semantically correct HTML you can muster ( dont worry about lay out just yet). Once your out HTML is working 100% and VALIDATES… got View Source on any browser and copy that HTML into a document. Use CSS to style that sample document , as if it were the real site ( in a sense it is) then save that css as an external style sheet and have the PHP script link the output to it…

Its ok if you need to add a few hook elements to attach CSS rules, just dont forget to go back and mod the PHP so that it ads those same hook elements as well.

following that procedure will provide outstanding code and save a lot of headaches

Paul O’B,

Yes, the first example looks best. But what if I wanted another wider column (the yellow one) again after the two columns below the first yellow one, positioned so it is not below the red column (so content wont appear below the navigation bar).

I had an attempt by adding subhead2 but in my attempt the 2nd yellow column appears to the left under the red column (despite me keeping the “right” as the “float” parameter). Is it possible to make it in line with the first yellow column? I may want another two columns below the 2nd yellow column but let’s get the 2nd yellow column sorted first of all.

This is what I have tried:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
#outer {
    width:950px;
    margin:auto;
    border:1px solid #000;
}
#column1, #column3 {
    width:250px;
    float:left;
    background:red;
}
#column3 {
    float:right;
    background:blue
}
#column2 {
    float:left;
    width:430px;
    margin:0 0 0 10px;
    background:#fffccc;
}
#footer, #header {
    width:100%;
    clear:both;
    background:green;
    text-align:center;
    padding:10px 0;
}
h1, p {
    margin:0 0 1em;
    padding:0 5px;
}
#subhead{
    float:right;
    width:690px;
    background:yellow;
    margin:0 0 10px;
}
#subhead2{
    float:right;
    width:690px;
    background:yellow;
    margin:0 0 10px;
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="column1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. </p>
    </div>
    <div id="subhead">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
    </div> 
    <div id="column2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. Praesent sapien felis, imperdiet id mattis ac, sodales ut urna. Sed blandit dapibus purus sed volutpat. Nam ultricies adipiscing sapien, sit amet commodo erat laoreet sed. </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
    </div>
    <div id="column3">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. </p>
    </div>
    <div id="subhead2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
    </div> 
    <div id="footer">
        <p>footer</p>
    </div>
</div>
</body>
</html>

All the best,

Matt.

If you want multiple elements in that right column then best to use a wide column to hold all the smaller details like so.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
#outer {
    width:950px;
    margin:auto;
    border:1px solid #000;
}
#column1, #column3 {
    width:250px;
    float:left;
    background:red;
}
#column3 {
    float:right;
    background:blue
}
#column2 {
    float:left;
    width:430px;
    margin:0;
    background:#fffccc;
}
#footer, #header {
    width:100%;
    clear:both;
    background:green;
    text-align:center;
    padding:10px 0;
}
h1, p {
    margin:0 0 1em;
    padding:0 5px;
}
#content {
    float:right;
    width:690px;
    margin:0 0 10px;
}
.subhead {
    background:yellow;
    clear:both;
    width:100%;
    margin:0 0 5px;
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="column1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. </p>
    </div>
    <div id="content">
        <div class="subhead">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
        </div>
        <div id="column2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. Praesent sapien felis, imperdiet id mattis ac, sodales ut urna. Sed blandit dapibus purus sed volutpat. Nam ultricies adipiscing sapien, sit amet commodo erat laoreet sed. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
        </div>
        <div id="column3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. </p>
        </div>
        <div class="subhead">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</div>
</body>
</html>

Hi,

I do not want the far left column the same size as the far right column.

#column1, #column3 {
width:250px;
float:left;
background:red;
}
#column3 {
width: 500
float:right;
background:blue
}
#column2 {
float:left;
width:320px;
margin:0 0 0 10px;
background:#fffccc;
}

I have tried defining column 1 and column 3 separately but column 3 then goes beneath column 2 and is bigger than specified. If I try the coding above whereby the width is defined twice for column 3 it only uses the first defined number and also there is no space between the columns 2 and 3.

I thought it would be easy to make 1 and 3 with different widths but I am stuck as to how to achieve the desired result.

Any ideas,

Matt.


#column3 {
[B][COLOR="Red"]width: 500[/COLOR][/B]  <-- 500 what? And there's a ; missing
float:right;
background:blue
}

As Guido said you have a missing px unit and a missing semi-colon.

To change the sizes of the columns is just math and no css skills needed. If you want the right column3 at 500px and column 2 at 320px that means that the parent must be at least 820px wide. If the total of the right column is 820px and the left column is 250px then the page wrapper needs to be wide enough to hold both those.

None of these issues are anything to do with css but simple adding up :slight_smile:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
#outer {
    width:1080px;
    margin:auto;
    border:1px solid #000;
}
#column1, #column3 {
    width:250px;
    float:left;
    background:red;
}
#column3 {
    width:500px;
    float:right;
    background:blue
}
#column2 {
    float:left;
    width:320px;
    margin:0;
    background:#fffccc;
}
#footer, #header {
    width:100%;
    clear:both;
    background:green;
    text-align:center;
    padding:10px 0;
}
h1, p {
    margin:0 0 1em;
    padding:0 5px;
}
#content {
    float:right;
    width:820px;
    margin:0 0 10px;
}
.subhead {
    background:yellow;
    clear:both;
    width:100%;
    margin:0 0 5px;
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="column1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. </p>
    </div>
    <div id="content">
        <div class="subhead">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
        </div>
        <div id="column2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. Praesent sapien felis, imperdiet id mattis ac, sodales ut urna. Sed blandit dapibus purus sed volutpat. Nam ultricies adipiscing sapien, sit amet commodo erat laoreet sed. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
        </div>
        <div id="column3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. </p>
        </div>
        <div class="subhead">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</div>
</body>
</html>

You must make sure that the elements you place in a container actually fit in the container. You can’t have an element that is bigger on the inside than on the outside (well actually yes you can but that’s another story best saved for another day).

Hi,

It looks like I have got to grips with the CSS column structuring. I have used this column CSS approach to structure a page including horizontal and left side navigation bar. The side navigation uses the float parameter that you suggest. I am thinking about using the same CSS coding as the current (old) site with the new sites’ PHP generated left navigation and basic HTML/CSS Top Navigation bar.

I prefer the horizontal navigation at Apple and may try that at a later date. The only problem with apple.com is it looks like the navigation is made of images so the text in each link will not serve to promote the site in search engines. I have read a little about it and think I would create an image with a width of 1mm and then repeat it as a background, with text over the top of it. This saves on download time and will look better than the basic HTML/CSS I currently use.

I have included the CSS style coding used in the old web site for horizontal and left-side navigation, so that you can suggest if it is up-to-scratch with latest techniques or whether I should ditch it for something that wasn’t written 5-6 years ago. I have only included the navigation structure CSS stylings.

HORIZONTAL NAVIGATION CSS CODING

#nav{
margin-left: 202px;
border-top: 1px solid #8FD9F6;
border-bottom: 1px solid #8FD9F6;
border-left: 1px solid #8FD9F6;
border-right: 1px solid #8FD9F6;
}

#nav ul{
padding: 2px;
margin: 0px;
background-color: #DBF2FA;
}

#nav ul li{
display: inline;
padding: 0px;
margin: 0pc;
}

#nav ul li a{
font-size: 13px;
font-weight: 700;
color: #293193;
background-color: #DBF2FA;
text-decoration: none;
padding: 2px 7px 2px 7px;
border-right: 1px solid #8FD9F6;
text-align: left;
}

#nav ul li a:hover, #nav ul li a:focus{
text-decoration: underline;
background-color: #92D7FE;
color: #2E3192;
}

LEFT NAVIGATION BAR CSS CODING

#leftcol{
float: left;
width: 202px;
background-color: #DBF2FA;
}

.container{
width: 99%;
float: right;
background-color: #FFFFFF;
}

#leftcol #sidenav ul{
margin: 0px;
padding: 0px;
background-color: #DBF2FA;
font-size: 11px;
font-weight: 700;
border: 1px solid #91D9F6;
}

#leftcol #sidenav ul li{
padding: 0px;
margin: 0px;
}

#leftcol #sidenav ul li a{
background-color: #DBF2FA;
border-bottom: 1px solid #92D7FE;
color: #2E3192;
display: block;
padding: 2px 4px 4px 4px;
text-decoration: none;
}

#leftcol #sidenav ul li a:hover, #sidenav ul li a:focus{
text-decoration: underline;
background-color: #92D7FE;
color: #2E3192;
}

#leftcol #sidenav2 ul{
margin: 0px;
padding: 0px;
background-color: #2E3192;
font-size: 13px;
font-weight: 900;
border: 1px solid #92D7FE;
}

#leftcol #sidenav2 ul li{
padding: 0px;
margin: 0px;
}

#leftcol #sidenav2 ul li a{
background-color: #2E3192;
border-bottom: 1px solid #92D7FE;
color: #FFFFFF;
display: block;
padding: 4px 3px 3px 4px;
text-decoration: none;
}

#leftcol #sidenav2 ul li a:hover, #side-nav ul li a:focus{
text-decoration: underline;
background-color: #2E3192;
color: #FFFFFF;
}

#leftcol #sidenav3 ul{
margin: 0px;
padding: 0px;
background-color: #CD3333;
font-size: 13px;
font-weight: 900;
border: 1px solid #92D7FE;
}

#leftcol #sidenav3 ul li{
padding: 0px;
margin: 0px;
}

#leftcol #sidenav3 ul li a{
background-color: #CD3333;
border-bottom: 1px solid #92D7FE;
color: #FFFFFF;
display: block;
padding: 4px 3px 3px 4px;
text-decoration: none;
}

#leftcol #sidenav3 ul li a:hover, #side-nav ul li a:focus{
text-decoration: underline;
background-color: #CD3333;
color: #FFFFFF;
}

Thanks,

Matt.

Yes you could do that by creating a slice but a 1mm slice will be too small as the browser will have to draw it thousands of times. Therefore make it about 10px x heightneeded and then it will draw ten times quicker.

Or you can use image replacement technique such as explained in this demo I did for another member.

I have included the CSS style coding used in the old web site for horizontal and left-side navigation, so that you can suggest if it is up-to-scratch with latest techniques or whether I should ditch it for something that wasn’t written 5-6 years ago. I have only included the navigation structure CSS stylings.

I’d need to see the html that goes with that nav and what the end result was but the css looks ok as far as it goes. It looks as though you have a redundant wrapper though as the ul can be the wrapper and no need for a div around as well unless multiple images are needed.

This is the HTML code for the horizontal navigation bar (very basic) The ‘Links’ on line 3 are preparation for some text links at the very op of the page:


<div id="outer">
    <div id="header">
    <P>Link 1 Link 2 Link 3 </P>
<P> </P>
<P> </P>

<div id="nav">
    <ul> 
      <li><a title="Home" href="index.htm">Home</a></li>
      <li><a title="Sat Nav" href="sat-nav.htm">Sat Nav</a></li>
      <li><a title="Handheld GPS" href="handheld-gps.htm">Handheld</a></li>
      <li><a title="Marine GPS" href="marine-gps.htm">Marine</a></li>
      <li><a title="Speed Camera Detectors" href="speed-camera-detectors.htm">Detectors</a></li>
      <li><a title="Accessories" href="gps-accessories.htm">Accessories</a></li>
      <li><a title="Sat Nav Maps" href="sat-nav-maps.htm">Maps</a></li>
      <li><a title="View Basket" href="basket.htm">View Basket</a></li>
    </ul>
    </div>
     </div>


The left navigation bar is under construction and only 'works' from "if(isset($selcat3)) {". You should get the idea of what is will do though (the main link clicked gets listed at the top of the left-navigation-bar with a submenu. This submenu sometimes has further submenus depending on the link clicked). A lot more complicated that the basic top navigation bar. This is the code so far will feature a lot more CSS styling for $selcat, $selcat1 and $selcat2 (and there may be more 'selected categories' to style - hopefully no more than about 10).

The left-navigation code is not complete but you probably get the idea of it and can see if the code is sound or a bit dodgy.

<div id="column1">
    <?php
$connect = mysql_connect("server","Not available","Not available") or die("error");

mysql_select_db("matthewb", $connect);

$res = mysql_query("SELECT * FROM categories");
while($row = mysql_fetch_array($res)) {
  $cats[$row['categoryid']] = $row['categoryname'];
}
if(isset($_GET['category'])) {
 $selcat = $_GET['category'];
}
if(isset($_GET['productname'])) {
 $prod_info = mysql_fetch_array(mysql_query("SELECT * FROM products WHERE productid = ".$_GET['productname']));
 //Prod_Info now gets stored for use in the main display.
 $selcat = $prod_info['categoryid'];
}
if(isset($_GET['subcategory'])){
$option_info = mysql_fetch_array(mysql_query("SELECT * FROM products WHERE subcategoryid = ".$_GET['subcategory']));
$selcat1 = $option_info['categoryid'];
}
if(isset($_GET['subcategory1'])){
$option_info1 = mysql_fetch_array(mysql_query("SELECT * FROM products WHERE subcategory1id = ".$_GET['subcategory1']));
$selcat2 = $option_info1['subcategoryid'];
}
if(isset($_GET['subcategory2'])){
$option_info2 = mysql_fetch_array(mysql_query("SELECT * FROM products WHERE subcategory2id = ".$_GET['subcategory2']));
$selcat3 = $option_info2['subcategory2id'];
}

if(isset($selcat)) {
  echo "<a href='categorylist.php?category=".$selcat."'>".$cats[$selcat]."</a>";
  unset($cats[$selcat]); //Gets rid of it for later.
  $res = mysql_query("SELECT productid,name FROM products WHERE categoryid = ".$selcat);
  while($row = mysql_fetch_array($res)) {
   echo "<a href='product.php?productname=".$row['productid']."'>".$row['name']."</a>";
  }
}
if(isset($selcat1)) {
  $smh = mysql_query("SELECT subcategoryid,name FROM products WHERE subcategory1id = ".$selcat1);
  echo "<a href='categorylist.php?category=".$selcat1."'>".$cats[$selcat1]."</a>";
  unset($cats[$selcat2]); //Gets rid of it for later.
  $res = mysql_query("SELECT subcategoryid,name FROM products WHERE subcategory1id = ".$selcat1);
  while($row = mysql_fetch_array($res)) {
   echo "<a href='subcategory1id.php?subcategory1=".$row['subcategoryid']."'>".$row['name']."</a>"; 
     }
}
if(isset($selcat2)) {
   $res = mysql_query("SELECT subcategory1id,name FROM products WHERE subcategoryid = ".$selcat2);
  while($row = mysql_fetch_array($res)) {
   echo "<a href='subcategory1id.php?subcategory1=".$row['subcategory1id']."'>".$row['name']."</a>"; 
  }

  $smh = mysql_query("SELECT subcategory2id,name FROM products WHERE subcategoryid = ".$_GET['subcategory1']);
  while($row = mysql_fetch_array($smh)){
      echo "<a href='product.php?subcategory2=".$row['subcategory2id']."'>".$row['name']."</a>";
  unset($cats[$selcat2]); //Gets rid of it for later.
  }

}
if(isset($selcat3)) {
   $res = mysql_query("SELECT subcategory2id,name FROM products WHERE reference = ".$selcat3);
  while($row = mysql_fetch_array($res)) {
echo "<div id=\\"leftcol\\">";
echo "<div id=\\"sidenav\\">";
echo "<div class=\\"sidenav2\\">";
echo "<ul>";
echo "<li><a href='subcategory1id.php?subcategory1=".$row['subcategory2id']."'>".$row['name']."</a></li>"; 

}


echo "</ul>";
echo "</div>";
echo "<ul>";
  $smh = mysql_query("SELECT subcategory2id,name FROM products WHERE subcategoryid = ".$_GET['subcategory2']);
  while($row = mysql_fetch_array($smh)){
echo "<li><a href='categorylist.php?category=".$row['subcategory2id']."'>".$row['name']."</a></li>";

  unset($cats[$selcat3]); //Gets rid of it for later.
}  
}


echo "</ul>";
echo "<div class=\\"sidenav2\\">";
echo "<ul>";
foreach($cats AS $key => $cat)  {
  echo "<li><a href='categoryview.php?category=".$key."'>".$cat."</a></li>";
} 

echo "</ul>";
echo "</div>";
echo "</div>";
echo "</div>";

if(isset($_GET['productname'])) { 
//I have cloicked on a product. This product's ID is being stored in that variable.
  $stuff =  $sql->query("SELECT productid FROM products WHERE productID = ".$sql->real_escape_string($_GET['productname']));
//This query will get the accessories associated with the product in question, no matter which product it is.
  while($row = $stuff->fetch_array()) {
    echo "<a href='accessories.php?subcategory1=".$row['name']."'>".$row['name']."</a>";
    //Output whatever here.
  }
}  
?> 
</div>
<div id="content">
        <div class="subhead">
        <div id="title"><P>Home >> Speed Camera Detector >> Origin b2 Speed Camera Detector</P>
<P><B>Origin b2 Speed Camera Detector</B></P>
</div>
        </div>
        <div id="column2">
<div id="price"><p>£34.99</p><img src="pogo-images/pogo-alert-plus/pogo-alert-plus.jpg">
<img src="AppleMac.jpg">
</div>
</div>
<div id="column3">
<p>Product code - 82451202</p>
<p>£899</p>
<p>stock: 1</p>
<p>Next Day Delivery (5.95)</p>
<p>Add to basket</p>
    </div>
    <div class="subhead">
            <p><b>Pogo Alert Plus Summary</b></p>

<p>Pogo Alert+ harnesses the power of orbiting GPS satellites to provide total protection against the threat of fixed safety cameras, mobile laser traps and accident black spots.</p>

<p>Pogo Alert Plus combines cutting-edge industrial design with an intuitive graphical user interface featuring custom designed icons, custom designed GPS hardware and the latest screen technology available - a high resolution OLED (Organic Light Emitting Diode) colour touch screen. The result is the most sophisticated safety camera location system ever to take to the road.</p>

<p>Pogo Alert+ has the award-winning Origin360 safety camera database pre-loaded and provides comprehensive audible and visual alerts including safety camera type, speed limit and proximity to hazard. Pogo Alert+ also includes a highly sensitive infra-red laser detector (removable) to provide the fullest protection against mobile laser based speed traps and 'safety camera vans'.</p>

<p>Pogo Alert+ utilises the award-winning Origin360 database of safety cameras and accident black spot locations to provide the most accurate and up-to-date information available. This data can be simply downloaded to Pogo Alert+ via PC or Mac with Internet connection.</p>

<p>At each speed camera location the Pogo Alert Plus shows type of speed camera, vehicle speed, speed limit, road number and countdown (metres or seconds) to the speed trap. The Pogo Alert+ can also display distance covered, journey time and average speed.</p>

<p>Pogo Alert+ also includes a highly sensitive infra-red laser detector to provide the fullest protection against laser based speed cameras and 'safety camera vans' via the supplied (removable) laser detector.</p>

<p><b>Pogo Alert+ Features:</b></p>

 <p>1.8-inch colour OLED with touch screen - latest display technology
 Alerts for ALL fixed safety cameras, including: Gatso, Truvelo, SPECS, Monitron, PEEK, Watchman and SpeedCurb
 On-board infra-red laser detector (removable) for mobile laser camera sites 
 8 hour battery
 Clear audible and visual alerts
 Simple-to-use, custom icon-driven user interface
 Unique PogoSoft operating system. Patent protected features
 Speed limit advisory
 Vehicle average speed displayed through SPECS average speed camera zon
 Distance to safety camera
 School zone alerts (time sensitive)
 Fully portable, plug and play design. Simple to install by the end user
 Dashboard and windscreen mounting kits
 Journey Tracking, via Google Maps
 Updated via Windows or Mac (Mac updates are a new product feature, and an industry first)
 Fully legal to own and use in the UK
 Database of cameras in France, Belgium, Holland, Spain, Portugal and UK
 FREE speed camera subscription for six months, then £50 per year
 2 Year manufacturers guarantee</p>
        </div>
    </div>
    <div id="footer">
        <p>Contact Us About Us Delivery Customer Services Terms and Conditions Site Map Returns Policy</p><p>Shop By Brand Trade Enquiries Feedback</p>
        <p></p>
<p></p>
    </div>
    </div>


…and following from the PHP i just provided this is the HTML ‘view source’ coding output for the left navigation:


<div id="column1">
    <div id="leftcol"><div id="sidenav"><div class="sidenav2"><ul><li><a href='subcategory1id.php?subcategory1=6'>Accessory No 2</a></li></ul></div><ul><li><a href='categorylist.php?category=6'>Accessory 2A</a></li><li><a href='categorylist.php?category=6'>Accessory 2B</a></li></ul><div class="sidenav2"><ul><li><a href='categoryview.php?category=1'>Garmin</a></li><li><a href='categoryview.php?category=2'>Snooper</a></li><li><a href='categoryview.php?category=3'>Pogo</a></li><li><a href='categoryview.php?category=4'>Accessory</a></li></ul></div></div></div> 
</div>
<div id="content">
        <div class="subhead">
        <div id="title"><P>Home >> Speed Camera Detector >> Origin b2 Speed Camera Detector</P>
<P><B>Origin b2 Speed Camera Detector</B></P>
</div>
        </div>
        <div id="column2">
<div id="price"><p>£34.99</p><img src="pogo-images/pogo-alert-plus/pogo-alert-plus.jpg">
<img src="AppleMac.jpg">
</div>
</div>
<div id="column3">