[Solved] Fixed width vs relative width - How?

[Heidi]

I run a CMSMS site based on the Andreas01 template. This template has fixed width and three coloums.
Accessibility is vital, since this the owner of the site is an organisation for persons with disabilities and cronic diseases.

The width of the left and right coloumns are to small even in a standard view. When a user compensates for sight disabilities by increasing the font size things get really ugly and navigation becomes difficult.

Therefore I need to change my CSS from fixed width to fill 100% (or close to 100%)  of the screen/window width.

How do I do this?

Stylesheet:

/* andreas01 - an open source xhtml/css website layout by Andreas Viklund (http://andreasviklund.com). Made for OSWD.org, free to use as-is for any purpose as long as the proper credits are given for the original design work. For design assistance and support, contact me through my website or through http://oswd.org/email.phtml?user=Andreas

Version: 1.0
(July 25, 2005)

Screen layout: */

/*
This layout depends on modified news summary template


{foreach from=$items item=entry}


{$entry->titlelink}



{$entry->category}
{if $entry->author}
by {$entry->author}
{/if}

{if $entry->formatpostdate}

{$entry->formatpostdate}


{/if}


{/foreach}


Copy paste this template to your news summary template and delete from here
*/

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(uploads/FFO/bg.gif) top center repeat-y;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 760px;
}

#header {
clear: both;
margin: 20px 0 0 0;
padding: 0;
height: 45px;
}

#header h1 {
width: 250px;
margin: 0 0 10px 0;
float: left;
}

#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0 0 10px 0;
font-size: 0.8em;
line-height: 1.2em;
}

#frontphoto {
margin: 0 0 10px 0;
border: 0;
}

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}

#avmenu li {
margin-bottom: 4px;
}


/* first level */
#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}

#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

#avmenu li a.menuactive {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}


/* second level */
#avmenu li li a {
font-weight: normal;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 24px;
background: #f4f4f4;
border:0;
}

#avmenu li li a:hover {
background: #eaeaea;
color: #286ea0;
border:0;
}

#avmenu li li a.menuactive {
background: #eaeaea;
color: #286ea0;
border:0;
}

/* third level */
#avmenu li li li a {
font-weight: normal;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 34px;
background: #f4f4f4;
border:0;
font-size: 12px;
}

#avmenu li li li a:hover {
background: #eaeaea;
color: #286ea0;
border:0;
}

#avmenu li li li a.menuactive {
background: #eaeaea;
color: #286ea0;
border:0;
}


/* fourth level */
#avmenu li li li li a {
font-weight: normal;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 34px;
background: #f4f4f4;
border:0;
}

#avmenu li li li li a:hover {
background: #eaeaea;
color: #286ea0;
border:0;
}

#avmenu li li li li a.menuactive {
background: #eaeaea;
color: #286ea0;
border:0;
}


.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #505050;
background-color: #f4f4f4;
line-height: 1.3em;
}

#extras {
float: right;
width: 100px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
}

#extras p {
margin: 0 0 1.5em 0;
}

#content {
margin: 0 110px 20px 160px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

#content img {
padding: 1px;
display:inline;
background: #cccccc;
border: 4px solid #f0f0f0;
}

h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #286ea0;
}

a:hover {
text-decoration: underline;
color: #286ea0;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}

#footer a {
color: #808080;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}

I know I'll have to change this

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 760px;
}

into

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 100%;
}

or whichever width I'll chose in the end.

But what else needs to be changed?

How can i make my logo stretchable without distortion?

My site:  http://ffohedmark.no

Edit: Fixed quote error

[Heidi]

I've done some learning by trying, and have almost achieved my goal.
I'll have to change my front image. This one isn't crispy enough.

What do I do about my footer and the search and print links?

New code:

/* andreas01 - an open source xhtml/css website layout by Andreas Viklund (http://andreasviklund.com). Made for OSWD.org, free to use as-is for any purpose as long as the proper credits are given for the original design work. For design assistance and support, contact me through my website or through http://oswd.org/email.phtml?user=Andreas

Version: 1.0
(July 25, 2005)

Screen layout: */

/*
This layout depends on modified news summary template


{foreach from=$items item=entry}


{$entry->titlelink}



{$entry->category}
{if $entry->author}
by {$entry->author}
{/if}

{if $entry->formatpostdate}

{$entry->formatpostdate}


{/if}


{/foreach}


Copy paste this template to your news summary template and delete from here
*/

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(uploads/FFO/bg.gif) top center repeat-y;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 90%;
}

#header {
clear: both;
margin: 20px 0 0 0;
padding: 0;
height: 45px;
}

#header h1 {
width: 30%;
margin: 0 0 10px 0;
float: left;
}

#header p {
width: 60%;
float: right;
text-align: center;
color: #a0a0a0margin: 0 0 10px 0;
font-size: 0.8em;
line-height: 1.2em;
}

#frontphoto {
margin: 0 0 10px 0;
border: 0;
}

#avmenu {
clear: left;
float: left;
width: 25%;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu ul {
list-style: none;
width: 90%;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}

#avmenu li {
margin-bottom: 4px;
}


/* first level */
#avmenu li a {
font-weight: bold;
height: 150%;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}

#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

#avmenu li a.menuactive {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}


/* second level */
#avmenu li li a {
font-weight: normal;
height: 150%;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 24px;
background: #f4f4f4;
border:0;
}

#avmenu li li a:hover {
background: #eaeaea;
color: #286ea0;
border:0;
}

#avmenu li li a.menuactive {
background: #eaeaea;
color: #286ea0;
border:0;
}

/* third level */
#avmenu li li li a {
font-weight: normal;
height: 150%;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 34px;
background: #f4f4f4;
border:0;
font-size: 12px;
}

#avmenu li li li a:hover {
background: #eaeaea;
color: #286ea0;
border:0;
}

#avmenu li li li a.menuactive {
background: #eaeaea;
color: #286ea0;
border:0;
}


/* fourth level */
#avmenu li li li li a {
font-weight: normal;
height: 150%;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 34px;
background: #f4f4f4;
border:0;
}

#avmenu li li li li a:hover {
background: #eaeaea;
color: #286ea0;
border:0;
}

#avmenu li li li li a.menuactive {
background: #eaeaea;
color: #286ea0;
border:0;
}


.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 83%;
color: #505050;
background-color: #f4f4f4;
line-height: 1.3em;
}

#extras {
float: right;
width: 15%;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
}

#extras p {
margin: 0 0 1.5em 0;
}

#content {
margin: 0 17% 20px 23%;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

#content img {
padding: 1px;
display:inline;
background: #cccccc;
border: 4px solid #f0f0f0;
}

h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #286ea0;
}

a:hover {
text-decoration: underline;
color: #286ea0;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 100%;
text-align: center;
color: #808080;
font-size: 0.9em;
}

#footer a {
color: #808080;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 10px 10px 5px 25%;
float: left;
}

.right {
margin: 10px 17% 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}

[kode_fi]

Your footer seems to be outside of div #wrap. Maybe you should modify our template and put it inside #wrap. Also your footer div does not have . 

[Heidi]

Thanks a lot!

Another problem: relative size logo:

Template code:

 
 

Setting width and height to 100% gives a nice picture in Firefox, (Haven't tested in Opera and Safari yet), but stretches the height to equal the width (a quadrat that is) in Internet Explorer.
How can I work around this?

Edit: There is no way to give a picture relative size which works in IE unless the picture is quadratic.