Hi folks,
I was wondering how I can move the main content on this page so that it is evenly positioned, without the black space on the left hand side.
Thank-you

Browser: Firefox, IE7

The columned layout you're using includes a "leftcolumn" div that's set to be 200px in width. You're not using it but you're still adjusting the main column to take it into acccount.

In the stylesheet find

and change margin-left to 0px;

Browser: FF 3.6.6

OS: Windows 7

Getting the text to move to the left is relatively simple. You have correctly eliminated the "leftcolumn" div, so now all you need to do is adjust the style in the style sheet (Layout_2.1-Fixed-Fluid.css). The definition for the "contentcolumn" looks like the following. As you can see, the left margin is set to 215 pixels. This was intended to accomodate the "leftcolumn", plus a little extra to space the text away from the column.

Change it to the following. This gives a 20 pixel margin on the left, so the text doesn't run into the side of the browser.



You should also fix your image references. The "align" property still works with most browsers, but is depreciated and may not work in the future. And, the text on the right of the image is too close. This is easily fixed because there is already a style in the style sheet to handle this. The code currently looks like this.



Remove the "align" property and add a "class" assignment. There is a style in the style sheet named "image_left". This style "floats" the image left and applies top and bottom margin of 10 pixels, plus a right margin of 15 pixels. It also forces a default border of zero pixels, in case the image is used in a link. If you wanted the image to "float" right, and have the text wrap and space properly, there is a "image_right" style.



Your also cutting and pasting from an old document. You have divs with IDs or classes that don't exist in the style sheet. Like "userLinks", "extraContent2">, and "contentContainer". These are hold overs from your previous layout and are unnecessary. All of your paragraphs should be simply contained in "paragraph" tags. That will set the font type, color, and size from the style sheet. Anything extra, like bolding, italics, font/color change, would then be done within the paragraph with a "span". It could be done other ways, but you already use a lot of "span" tags so that should be familiar.

Browser: Firefox, Internet Explorer

OS: Solaris 10, XP

Thanks guys. However when I change the width in the style sheet it affects all the pages including the ones where I require the left column. It's only this one that I need centralised at present.
http://blackhorsekawasaki.com/Cadwell.html

Do I have to create different style sheets for certain pages depending on which layout I require.

Browser: Firefox, IE7

Thanks Philo, I'm not too sure which to remove though.

Browser: Firefox, IE7

In that case what you need to do is this:
In the header of any page that doesn't require a left column find the stylesheet link tag:

and below that place a style tag that modifies the content column margin:


Hope this helps

Browser: FF 3.6.6

OS: Windows 7

Thank-you, very much appreciated

Browser: Firefox, IE7

Was checking my homepage www.blackhorsekawasaki.com on www.viewlike.us

All looks reasonably ok except at 800x600......

In normal viewing the page looks fine in Firefox but in IE7 the writing is very close to the side of the left column. Could I also ask if the coding for the page footer is ok

Browser: Firefox, IE7

Got the normal display issue sorted. I had the Doctype between the html and the head instead of before them

Browser: Firefox, IE7

Glad you've got it all sorted

Browser: Firefox 3.6.*

OS: Windows 7

You can certainly do it the way Scutterman suggested. It will work just fine.

Personally, I would modify the "contentcolumn" style in the style sheet, and then create two sub classes. One for one column pages and another for two column pages.

An example might look like the code below. I removed the "margin-left" definition from the "contentcolumn" style and then created the styles "one_col" and "two_col". Each of these styles contains different "margin-left" settings that will be used to compliment the "contentcolumn" style in your HTML document.

Simplifying your main page, the code looks like the listing below.



On pages that will require two columns, the "contentcolumn" div would look like the following code. This says that the "contentcolumn" div is of the "two_col" class and sets the left margin to 215 pixels.



On pages that will require one column, the "contentcolumn" div would changed to look like the following code. This says that the "contentcolumn" is of the "one_col" class and sets the left margin to 20 pixels. Then you would delete, or comment out, the "leftcolumn" div from the HTML document.



While this is a bit more complicated, it keeps all the styling in the style sheet and allows your HTML page to select the style it want's to be.

Browser: Firefox, Internet Explorer

OS: Solaris 10, XP