CSS Boxes Alignment, 2 Columns

[darren13]

Hi guys,

Big cry for help here. I've been working on my limited knowledge of CSS, trying to get our Portfolio page back up to scratch after I recently noticed it had gone screwy in Firefox.

Basically, I've tried to float one column of info to the left and the other to the right, but for some reason I can't nail down, the columns aren't showing up at the width I've set in the style sheet, and neither is the one on the right floated all the way to the right.....

The page is at Local Bournemouth Builder :: www.fourcornersproperty.co.uk :: Building Projects Portfolio

I'm wondering if it's something to do with my div.float declaration in the stylesheet conflicting with my .imageleft / .imageright....but lost and confused!

Any tips at all greatly appreciated guys,
Thanks,
Darren.

[Dubbya]

I'm guessing here but I'd logically assume that you've neglected to consider that objects inherit CSS properties by default.

Take a look at the containing div and try to determine whether you've set margins or padding on the left, right or both.

For example, specify 20px padding on a table cell then nest a div inside the cell with a style attribute of "padding:0;". Wonder why the div isn't touching the border of the containing cell?

Having taken a look at your code, one might wonder why you'd bother with trying to use divs inside tables. It's extremely complicated to read, and by natural extension, difficult to troubleshoot.

Since you're already using a table-based layout, why not just stick to it and save yourself the headache of trying to nest divs inside table cells?

Furthermore, as far as the code goes, what you're doing here is extremely inefficient:

    <div class = "tn">
            <div class="b">

              <div class="l">
                <div class="r">
                  <div class="bl">
                    <div class="br">
                      <div class="tl">
                        <div class="tr">

You could easily style the div itself and use classes much more sparingly. Another thing you could do is set your common table definitions site wide and just use classes on cells that require special formatting. ie: <td class="specialtable">

This way, the table cell inherits it's basic formatting and applies the specific formatting defined in the ".specialtable" style directly to the cell or cells using the ".specialtable" class.

Here's what I mean:

table {
	font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 320px;
	}

th {
	padding: 0 0.5em;
	text-align: left;
	}

td {
	border-bottom: 1px solid #CCC;
	padding: 0 0.5em;
	}

.specialtable {color:#C2C2C2; text-align:right; border-left:3px solid #000; }

Were I you, I'd back up to a point where it looks the way it's supposed to, then start from there. As it currently stands, the CSS you've implemented isn't helping you at all because the page code is so inflated.

I know it's not the definitive answer you were hoping for, but it might be food for thought.

.02

[BigD]

I agree with Dubbya that your CSS is not helping you at all.

If you intend going the CSS route, then I suggest you start with a clean sheet and aim for code to CSS standards. I recommend you go to the web for discussions on "css multi column layout".

Rarely are multiple columns using CSS easy to achieve across all browsers.

Sorry not to be able to make specific suggestions for your code, but it is too complex to understand without a lot of work.

Frankly (please excuse my bluntness) I guess it could ever form the basis of a successful page across the major browsers.

In assessing my comments here, understand that I am from the CSS school of thought that maintains that tables are not to be used to achieve layout: tables are for the presentation of tabular data.

[darren13]

Thanks for the replies guys,

I thought I was going in the right direction with a view to 'css-ing' the site a bit at a time........

Maybe I'll have to start a css page from scratch and go that way......

Thanks again for the input - it's not easy going from my old table-based ways to css, whilst trying to keep everything looking the same!

Regards,
Darren.

[darren13]

Originally Posted by Dubbya

I'm guessing here but I'd logically assume that you've neglected to consider that objects inherit CSS properties by default.

Take a look at the containing div and try to determine whether you've set margins or padding on the left, right or both.

For example, specify 20px padding on a table cell then nest a div inside the cell with a style attribute of "padding:0;". Wonder why the div isn't touching the border of the containing cell?..........................................

I know it's not the definitive answer you were hoping for, but it might be food for thought.

.02

Thanks Dubbya - just had a look at my css and added in - padding:0; - to the divs for the problem columns - and BINGO! Must have been inheriting something from somewhere....

It's a sticky-tape fix at the moment, but keeps it running, so many many thanks mate!

All the best,
Darren.

[Dubbya]

Good on ya!

Maybe I'll have to start a css page from scratch and go that way......

Thanks again for the input - it's not easy going from my old table-based ways to css, whilst trying to keep everything looking the same!

You're right, it's easier to bite the bullet and start over from scratch than to try and fudge a table based layout with CSS components. Trust me, been there, done that!

It's a learning process but it's amazing how little code is required to do some pretty amazing stuff.

Hang in there and keep working on it!

.02