HTML Positioning a Side Bar

Hi,

I am creating a webpage and I have run into a problem that I can not solve no matter what I do. I'm trying to have the main content area on the left and a side bar on the right side of my page. You can see in the picture what I'm trying to move. . I've uploaded the site in a .zip file. I'd like to try and keep the content on the left side in the box that I have there. If someone could please point me in the right direction, or even change the code that's in the .zip, it would greatly appreciated.

Thanks Glen

 

Can you please provide your HTML and CSS?

 

I've put everything is the zip file. I can put it in code in a post if that's more easy.

 

What zip file?

 

No - I can't see it... Why's that?

Can see your link though - have downloaded file and will take a look at it later.

 

ishkey, did I do something wrong when I attached it? And Geoff that would be great if you could take a look at it.

Thanks

 

Hi Glen,
Sorry it's taken a while to get back to this - I've been busy.
There are two ways to position this sidebar - using absolute positioning or using floats.
I see you are attempting to use absolute positioning but from what I've read the vast majority of web pages use float-based layouts.
An excellent book for learning all about this is "CSS - The Missing Manual" by David Sawyer McFarland.
But I'm happy to help if I can. The first question is this: do you really want to use absolute positioning?
If you do, you need to do something like the following (I've moved the CSS into the HTML so it's easier to show):

Code:

<div id="outer" style="position:relative">
    <div id="content">
        <h1>Heading of the Content</h1>
    </div>
    <div id="sidebar" style="position: absolute;max-width: 250px;top: 0px;left: 750px;">
        <h1>SideBar</h1>
    </div>
</div>

The key thing is that "sidebar" (with "absolute" positioning) is posititoned relative to "outer" (which has "relative" positioning).

 

Thanks for that Geoff. I shall look into getting that book.

 

Just curious, how would I implement the float-based layout.

Thanks

 

Use "float". In the book it's a 38-page chapter.