Inner Layout at bottom

[eekhoorn]

Hi having some issues with the width and layout of my inner content. I have a three column css layout with a central area of 380px. I have managed to sort out my widths which took a while to get it to fit in between my two menus. But I have another problem.

All my main area content it been thrown way down the page creating a huge white gap at the top of my page, I have checked all the code and css and cant find anything that is making this happen.

Any Ideas?

[gabrielcrowe]

lol, url?

we cant help you with anything without an address to checkit out, silly head.

[Duncan Rounding]

Check you have set your width in Settings - Site Options - general - Site - Width for Main Area.

[JSnow]

Yup... your width is the problem.

I had this problem as well and increasing the width by 5px fixed it.

[eekhoorn]

http://www.thehomecompany.uk.com/acatalog/

there is the URL

Check you have set your width in Settings - Site Options - general - Site - Width for Main Area

all widths in site options and library are set to 380px which is the size of the area available. But as you can see it is waaaay down at the bottom of the page. It does seem to work in safari and firefox but does not work in IE6 just downloading IE7 to test it on that!

[Duncan Rounding]

I'm no css expert but try reducing the mainContent Margin from 200 to say 180px or/and the padding.

[eekhoorn]

I'm no css expert but try reducing the mainContent Margin from 200 to say 180px or/and the padding.

That bit of CSS controls the left right margin making sure that it is always 200px away from the edge of my container div, it should not make much of a difference but I'll have a go just in case.

[leehack]

Your widths are too wide, you are trying to fit 390 wide into 380 wide.

[gabrielcrowe]

try taking your css layout from here:

http://blog.html.it/layoutgala/LayoutGala07.html

your problem manifests itself only in internet exploder, and not in firefox, so i'd say that its a margins/borders bug.

see, explorer treats the box model differently.
http://en.wikipedia.org/wiki/Interne..._box_model_bug

try stripping out ALL padding margind and borders and see if that works.

build your padding up slowly, notice which one causes it to fail.

good luck.

[gabrielcrowe]

this will help:
http://community.actinic.com/showthr...ight=css+reset

[eekhoorn]

Your widths are too wide, you are trying to fit 390 wide into 380 wide.

Where do you get 390 from? My main container is 780px wide with my content inside that with a margin of 200px left and 200px right giving me a area widht of 380px, all my variables for width in Actinic are set to 380px.

Width is not the problem its the fact that in IE it throws my content down to the bottom with a huge gap at the top. It does work fine in Safari and Firefox tho.

[eekhoorn]

try taking your css layout from here:

http://blog.html.it/layoutgala/LayoutGala07.html

Basically the same css style as mine.

your problem manifests itself only in internet exploder, and not in firefox, so i'd say that its a margins/borders bug.

see, explorer treats the box model differently.
http://en.wikipedia.org/wiki/Interne..._box_model_bug

try stripping out ALL padding margind and borders and see if that works.

build your padding up slowly, notice which one causes it to fail.

good luck.

Think this is the problem, cheers for the help will let you know if it works or not

[leehack]

Where do you get 390 from? My main container is 780px wide with my content inside that with a margin of 200px left and 200px right giving me a area widht of 380px, all my variables for width in Actinic are set to 380px.

Width is not the problem its the fact that in IE it throws my content down to the bottom with a huge gap at the top. It does work fine in Safari and Firefox tho.

Like you have found out since i posted, the padding on the main content is also added to the width, therefore things were wider than you thought.

200 + 5 + 380 + 5 + 200 = 790px
Outer container = 780px

10px difference on my calculator

[eekhoorn]

Cheers guys working now I just reduced the margin to 190px and the padding to 5px and it slots in nicely now.

Thanks for the help

[Duncan Rounding]

Don't forget to think about the checkout width - doubt you can shoehorn that into 190px.