Hi,

 

I am "attempting" to do my 1st site but with regards to layout, am unsure exactly what method I should use.

 

I am pretty sure I has heard ppl say that td, tr html code should only be used to display tabular data, though by looking at alot of sites "Page Source" it appears that most sites use the mentioned method!

 

Any advice?

Fo a long time tables (<td><tr>) were used to build site layouts, people still do use this method but you shouldn't. As you have said tables are to be used for tabular data only, so if you want to make a site correctly use a separate css to build up your site.

 

 

There are many reasons why you shouldn't use tables for layouts such as accessibility, SEO...but the best reason for not using it is simply, it is not the right way to build a site...and those that tell you it is fine need to learn that they are wrong

Cheers Diz,

 

Thats what I thought, just seems alot still do it and I am struggling to align my page correctly.

 

Basically I want a column on the left with a nav bar, written content in the middle and a column on the right to display images. When I had 2 columns, col l & r they floated perfectly but then when I re-jigged it and added a column c, it sorts of wraps to the side of and under col l.

 

Col l is floated to the left, column r is floated to the right, what setting would I need for column c?

 

Thanks

 

Michael

Hi Michael,

put columns 1 + 2 inside another div (a).

Float 1 left and 2 right.

Create another div(divb) and put column3 inside that.

Float div(a) left and div(divb) right and you will have a three column layout.

Cheers Diz,

 

Thats what I thought, just seems alot still do it and I am struggling to align my page correctly.

 

Basically I want a column on the left with a nav bar, written content in the middle and a column on the right to display images. When I had 2 columns, col l & r they floated perfectly but then when I re-jigged it and added a column c, it sorts of wraps to the side of and under col l.

 

Col l is floated to the left, column r is floated to the right, what setting would I need for column c?

 

Thanks

 

Michael

 

Hi Michael,

 

You've got the right idea with avoiding tables — only use them for tabular data. Anyone who tells you otherwise obvious doesn't know much about web design.

 

As for how to achieve what you want with CSS and semantic HTML, you should have a browse over a recent post I made regarding multi-column layouts in which I gave a rather detailed example of how to achieve it.

 

Let me know if you have any problems or questions.

 

Rob

Why complicate it? unless I read it as complex I would do this

 

CSS:

* {
margin:0;
padding:0;
}

#container {
margin:0 auto;
width:800px; }

#left {
float:left;
width:200px;
}

#middle {
float:left;
width:400px;
}

#right {
float:left;
width:200px;
}

 

 

HTML

 

<div id="container">

<div id="left"></div>

<div id="middle"></div>

<div id="right"></div>

</div>

 

 

 

 

 

You just have to make sure that your widths all add up or are less that the container width...remember that margins and paddings also add to the width so to get a total width of a div it is width+margin left + margin right +padding left +padding right=total width

 

 

for example if you say margin: 5px that would mean 5px for the left and 5px right not 5px in total...so really you have added 10px to your total width

Thanks to Elan, Diz and Rob - all very useful.

 

I get what you mean Diz, unlike my Web design skills which are small at the mo, I am something of a Maths Genius so adding 5 and 5 should be easy

Why complicate it? unless I read it as complex I would do this…

Was that aimed at my example?

Cheers guys. Sorted

 

Dizi's seemed the easiest in the end!! Cheers too to Ben and Elan

Spoke to soon me thinks

 

I had re-jigged a little something with my 3 columns and now my left and main column display correctly but now my right hand side column is on the right hand side, this is after I changed float from left to right.

 

When I leave float to left it moves to the left, basically the right hand column is in the space between the main column and the right hand side of the page but it isnt online, its below, as if on the line!!

 

Any tips please

Spoke to soon me thinks

 

I had re-jigged a little something with my 3 columns and now my left and main column display correctly but now my right hand side column is on the right hand side, this is after I changed float from left to right.

 

When I leave float to left it moves to the left, basically the right hand column is in the space between the main column and the right hand side of the page but it isnt online, its below, as if on the line!!

 

Any tips please

 

Check whether you have applied margin-left; to a float:left; element. then remove this as in IE it takes the double value.

If this doesn't solves your problem try decreasing the width of the panels by few pixels.

hope this works for you.

Post the code.

Wouldnt he have to clear his floats? Try Clear:both

Was that aimed at my example?

 

 

No at ElanMan description it sounded complex in my head

No at ElanMan description it sounded complex in my head

It's not really (honest! )

Wouldnt he have to clear his floats? Try Clear:both

 

 

 

Why would you clear both? that would drop the float down underneath the other, and the idea is to have them next to each other

 

 

Post the code if you want a hand and check all your sizes, if you are using margin-left or padding-left you might be getting the evil double thingy that happens...easiest way to fix that is to also add display:inline; to your code.

It's not really (honest! )

 

Its probably not, more than likely just me thinking it is more complex when reading it

Its probably not, more than likely just me thinking it is more complex when reading it

I got confused when writing it!

I got confused when writing it!

 

HA! so it was complex after all

I'm confused just keeping up with you two!

 

@MG1878 - Have you managed to fix your problem yet?

Hello again.

 

No Rob, I decided to give it a break for a while as I just couldn't seem to realise exactly what I had done. It gave me a bit of a headache staring at the code, thinking "right that closes there, this closes here".

 

I didn't even change anything

 

Must have messed with it in some way though - that is evident!!

 

It was working fine after I applied what Dizi suggested but I don't know whats gone wrong:

 

#columnleft {

float: left;

width: 100px;

background-color: #000066;

color: #white;

border: 2px solid red;

}

 

#columnmain {

float: left;

border: 3px solid purple;

width: 550px;

background-color: #000066;

color: white;

padding: 0;

}

 

#columnright {

float: right;

border: 3px solid green;

width: 200px;

background-color: white;

color: #000066;

 

Above is my CSS for the 3 columns, please note that the column right is now floating to the right. Dizi's initial suggestion of floating to the left did work but after the right hand column did what Dizi said in an above post it floated underneath column-left and column-main, so I floated it to the right for my visual purpose. It is back to the right-hand side of the page but is still floating below col l and col m.

 

I have put borders around col-l, col-main, col-r and content of which the previous 3 cols are contained, now for some reason the border of the content goes to the bottom and even surrounds my footer.

 

Any advice?

 

Michael

For all my 3 column sites i have clear both in the right middle and left id's and it works great

 

ok on #right add clear:right on #left use clear:both and dont clear the middle div

Hello again.

 

No Rob, I decided to give it a break for a while as I just couldn't seem to realise exactly what I had done. It gave me a bit of a headache staring at the code, thinking "right that closes there, this closes here".

 

I didn't even change anything

 

Must have messed with it in some way though - that is evident!!

 

It was working fine after I applied what Dizi suggested but I don't know whats gone wrong:

 

#columnleft {

float: left;

width: 100px;

background-color: #000066;

color: #white;

border: 2px solid red;

}

 

#columnmain {

float: left;

border: 3px solid purple;

width: 550px;

background-color: #000066;

color: white;

padding: 0;

}

 

#columnright {

float: right;

border: 3px solid green;

width: 200px;

background-color: white;

color: #000066;

 

Above is my CSS for the 3 columns, please note that the column right is now floating to the right. Dizi's initial suggestion of floating to the left did work but after the right hand column did what Dizi said in an above post it floated underneath column-left and column-main, so I floated it to the right for my visual purpose. It is back to the right-hand side of the page but is still floating below col l and col m.

 

I have put borders around col-l, col-main, col-r and content of which the previous 3 cols are contained, now for some reason the border of the content goes to the bottom and even surrounds my footer.

 

Any advice?

 

Michael

 

It will be better if you provide you full CSS and HTML code, or with a link or you can also attach them with your post.

If you don't provide teh full code it becomes much more complecated..

#columnleft {

float: left;

width: 100px;

background-color: #000066;

color: #white;

border: 2px solid red;

}

 

#columnmain {

float: left;

border: 3px solid purple;

width: 550px;

background-color: #000066;

color: white;

padding: 0;

}

 

#columnright {

float: right;

border: 3px solid green;

width: 200px;

background-color: white;

color: #000066;

Hello again, looking at the code you posted, you're total width is as follows:

#columnleft 104px

#columnmain 556px

#columnright 206px

TOTAL WIDTH = 866px

 

Whatever is containing these columns (another div or the body) needs to be at least 866px wide.

As ElanMan said... sorry in my explanation before I forgot to add that you have to add border widths as well, sorry.

Ye, cheers Elan and Diz, it must have to do with the padding or borders, sorted now