Layout help – item on left-edge

[Carlos56]

Hey guys.

If you check out http://www.carlosrios.co.uk/index_testing.html

I have a header. an item on the edge of the window to the left. my main content. and a footer.

My problem is I would like the item on the left, to remain next to my main content area, whilst my content area is centered on the window and the left-item is still on the far-left by the edge of the window.

I have achieved this so far by using a negative top margin on my main content area to bring it to up where it needs to be.

Obviously this is not ideal, so I was wondering if you guys could help me workaround a better solution.

It’s messing up my sticky-footer, and causing other problems, so would really appreciate your help!

Thank you!

Carlos

[shamai]

im not fully sure what your asking but why don’t you use absolute positioning on the bird and it will stay there?

also give your navigation a width and size and your content will go below. right now it is totally collapsed and thats why you need to push your main content down with margins so much.

of course I’m not super knowledgeable and I’m sure someone else can give better answers :)

[Carlos56]

Sorry I don’t know why but I find explaining these things so difficult.

My requirements are for the main content area to be centered on the window, but the stuff next to its left, to remain by the edge of the window and not centered with it.

Does that make sense?

[shamai]

well center the div with the main content and set the other stuff to the left using absolute positioning.
make sure that the stuff to the left is not with the centered content stuff and when you center it the other stuff won’t move.

[Carlos56]

If I do it that way, both items won’t be on similar levels, no? Like the item on the left will either be way below or way above the main content.

If I float the items, so that they’re next to each other. The main content won’t be able to be centered.

Is there another solution? Am I missing something?

[Carlos56]

Thanks for your reply.

I’ve tried using %’s but it still doesn’t work.

http://img72.imageshack.us/img72/149/screenshot20120130at025.png

the pic above, illustrates my problem.

When the website is being viewed on a smaller window/screen size, the item on the left is overlapped by the main content. Is this fixable?

Thank you.

[Carlos56]

Thanks for your response again.

Unfortunately removing that doesn’t fix the problem.

Perhaps I should try reposition the left items when the screen is smaller?

I’ve seen what I’m trying to do in practice though?!?

It should be easy enough to ensure the items don’t overlap?!

Anyone?

[Author]

Posts