4 replies [Last post]
tbacon
tbacon's picture
Offline
newbie
New Zealand
Last seen: 10 years 38 weeks ago
New Zealand
Timezone: GMT+13
Joined: 2008-01-15
Posts: 4
Points: 3

I'm an experienced IT person, but a comparative web-development newbie, so be gentle with me!

I've recently taken on voluntary responsibility for this website:

http://www.ceramics.co.nz/newsite/index.html

It is currently table based, developed with Adobe GoLive, and after doing some self-education, I want to convert it to be properly CSS-based.

The pages are 3-columns, each a fixed width, with the left and right columns effectively floating left and right, with the centre column centered between them, and they fill the browser window.
However I have been unable to reproduce this behaviour in CSS. I am finding that one of the following happens when I shrink the browser window:

The columns overlap each other

OR

They wrap below each other.

What I want is for the columns to butt up against each other when the browser window shrinks, as happens with the current implementation.

I suspect I am missing something obvious, so any and all suggestions will be welcome.

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

Show us what you've got so

Show us what you've got so far.

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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

At a guess replicating the

At a guess replicating the current behaviour in IE6 will be difficult. It should be ok for all other current browsers. The below, is quickly off the top of my head and not tested.

Set a min-width for the BODY. That should ensure the layout doesn't collapse. IE6 doesn't do min-width, I'd give it a fixed width and center that.

Float your left and right columns. Give the center column a fixed width, set the padding-left and padding-right equal to the widths of the their corresponding column and center the column.

You'll now have a three column layout which won't collapse and which when there is excess horizontal space will split it equally between the columns.

otama71
Offline
newbie
Perth, Australia
Last seen: 13 years 46 weeks ago
Perth, Australia
Timezone: GMT+9
Joined: 2008-01-15
Posts: 1
Points: 0

Three column approach

Hi tbacon,

Try this:

CSS

#header {
background: #f8c473
}
#main-body {
float: left;
width: 70%;
}
#content {
float: right;
width: 60%;
}
#sidebarleft {
float: left;
width: 40%;
background: #6ec6f1;
}
#sidebarright {
float: right;
width: 30%;
background: #ececec;
}
#footer {
clear: both;
background: #2d73b9;
}

HTML

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pulvinar commodo nisi. Nullam ante mauris, euismod eu, aliquam sit amet, vehicula quis, felis. Proin porttitor eros vel est. Curabitur ut elit vitae nibh facilisis tincidunt. Integer pretium. Maecenas gravida. Vivamus vitae tellus in massa venenatis cursus. Phasellus faucibus sem molestie nisi. Maecenas eu sem dignissim massa ultrices lobortis. Suspendisse velit ipsum, faucibus ac, interdum sit amet, ullamcorper sit amet, velit. Vestibulum et libero tincidunt arcu adipiscing vehicula. Duis nonummy nibh sed arcu. Ut id enim et ipsum ullamcorper tristique. Etiam porttitor eros non sapien tempus cursus. Donec in tellus ut velit ultricies mattis. Donec in libero. Aliquam quis pede nec libero semper varius. In congue, nunc et adipiscing malesuada, sem metus aliquam pede, quis congue dolor quam at erat.

Curabitur scelerisque tempor sapien. Sed euismod, pede ut egestas consectetuer, augue neque gravida lorem, vel vestibulum nunc nisi eu lorem. Aenean mollis, arcu eu porttitor iaculis, eros velit consectetuer mauris, sit amet imperdiet purus quam ac purus. Aenean elementum dictum dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec consectetuer felis et orci. Maecenas fringilla sagittis sapien. Donec urna. Morbi id odio sit amet erat molestie adipiscing. Aliquam justo. In hac habitasse platea dictumst. Nunc metus diam, faucibus et, interdum a, scelerisque ut, leo. Nulla facilisi. Vivamus volutpat facilisis elit. Nullam in eros sed diam pulvinar molestie. Etiam nibh erat, auctor sed, posuere pharetra, viverra nec, odio. Phasellus eleifend imperdiet dui. Etiam leo. Ut nibh. Cras fringilla massa in nibh.

Aenean neque ipsum, rutrum nec, mollis eu, pellentesque ac, dui. Vestibulum imperdiet accumsan nunc. Aenean pharetra nunc non lacus. Ut feugiat ligula non pede. Quisque imperdiet vehicula mauris. Nunc interdum aliquam leo. Phasellus ac nisi. Integer ut arcu. Morbi interdum urna sed nisl. Integer odio. Integer hendrerit gravida risus. Fusce at lorem. Nunc urna nibh, scelerisque vel, congue id, commodo ac, elit. Curabitur fermentum, ante ut tincidunt nonummy, sapien tellus pellentesque nisl, rutrum ornare mauris lorem vel felis. Vestibulum sed enim. Morbi faucibus augue eu purus. Curabitur vulputate massa a est. Integer elit. Aenean aliquet, elit sit amet sodales vehicula, eros quam fringilla augue, ut dapibus arcu leo tincidunt magna.

Duis bibendum nisl et ante. Nullam vel turpis. In ante diam, sollicitudin vel, luctus in, malesuada cursus, purus. Integer nec est eu dolor imperdiet dictum. Donec porta. Donec orci. Donec in nunc vel sem rutrum pharetra. Proin facilisis velit quis ante. Nunc erat nulla, tincidunt nec, eleifend vitae, ullamcorper malesuada, lectus. Duis elit tortor, mollis ac, ultrices pharetra, pellentesque sit amet, libero. Nulla ac tortor. Mauris felis metus, fermentum vitae, faucibus sed, mollis eu, libero. Aenean eleifend, lorem ut suscipit mattis, ante velit adipiscing tortor, quis porttitor massa diam eu odio. Aliquam ut risus. Suspendisse potenti. Vivamus in orci non justo vehicula rutrum. Maecenas venenatis sollicitudin libero. Praesent non lorem at purus vestibulum mollis. Nullam sit amet metus.

Proin vitae felis. Etiam pretium consectetuer ante. Sed convallis, ante lacinia vehicula venenatis, tortor ipsum aliquam augue, in mollis diam metus sit amet orci. Fusce varius viverra magna. Maecenas velit. Morbi at nisl quis mauris mollis nonummy. Pellentesque ut ligula. In rutrum. Donec interdum tincidunt augue. Pellentesque tellus.





Left sidebar goes here






Right sidebar goes here






There is also a link within this site on the links tab, that shows you a method to divide the page into three columns it can be found here http://glish.com/css/7.asp

tbacon
tbacon's picture
Offline
newbie
New Zealand
Last seen: 10 years 38 weeks ago
New Zealand
Timezone: GMT+13
Joined: 2008-01-15
Posts: 4
Points: 3

Solved

Thanks Chris..S. Setting the min-width seems to have fixed the problem - I knew it had to be something simple.

Now to work on the other hundred issues...