Issues with sidebar positioning when resizing browser

[JessicaK]

Hello,

I started working on my first table less design today. All went well except for my sidebar. When the browser is resized it goes all wacky. Can you take a quick look at tell me what you think is wrong with it?

I'm stumped!

Here's the page:
http://goodbyebadbreath.com/test_fil..._test_run.html

Please keep in mind that I am very new to CSS... I've been reading up on CSS for about 3 weeks now. This was my first go at actually trying to create a web page using CSS...

Thank you so much for your help!

Jessica

[bazz]

Hi Jessica,

welcome to CF.

Beofre you spend more time working it out, you'll need to fix you errors as shown by the w3c validator. (all 152 of them).
http://validator.w3.org/check?verbos..._test_run.html

If that seems daunting, see how far you get and post back if you need help, with understanding what it means.

bazz

[macwiz]

This is in response to Bazz's post. I wrote it on another forum, but it is the same thing:

IE is known to have issues, and many sites are built around it. However, sometimes a site will be incorrectly coded, but IE will display it anyways. (IE is NOT W3C compliant)

Markup is the HTML code and tags (HTML=Hypertext Markup Language).

The W3C is the World Wide Web Consortium, and is the governing body on web standards. They set what is and isn't allowed in code. Web browsers are based, among others, on how well they conform to W3C Standards. This is done so that every browser that is W3C compliant will show pages exactly the same, hence IEs problem.

Your code can also be validated for errors. The errors come from a DTD, or Document Type Definition, which says what is and isn't allowed in the code. I noticed you were coding in XHTML 1.0 Strict. This DocType is somewhat different from regular HTML like you have been using, as many tags and attributes are depreciated. The rules are different, and many tags are no longer legal.

The link given to you by Bazz http://validator.w3.org/check?verbos..._test_run.html is W3Cs validator.

It shows you errors on the page. Fix those errors, than work on getting the site right. One tip: Do NOT build the site for IE as IE is, as I set, NOT W3C compliant. Build it for Firefox or Safari and than work out the kinks in IE. It will be much easier that way.

(Programs like Dreamweaver have tools built in to verify if a site is compliant with a browser, as well as the W3C.)

Hope this helped.

-MacWiz

[rmedek]

Originally Posted by JessicaK

All went well except for my sidebar. When the browser is resized it goes all wacky.

Looks like your positioning the sidebar with absolute positioning, 312px from the right. So when you move the browser window all around, the sidebar moves with it.

What I would try first is to make the wrapper (#wrapper) a relative container (i.e., all absolutely positioned elements are positioned relative to the container) by adding "position: relative" to #wrapper in the CSS.