Not sure if this is what you want but to have the content first in the body
but have the sidebar appear firt you can use:
html, body {
width: 100%;
margin:0;
}
#cont {
float: left;
padding:10px;
margin-left: 220px;
}
#sidebar {
background: #DDDDDD;
margin: 10px;
font-size:90%;
width:200px;
position: absolute;
left: 0px;
top: 0px;
}
<body>
<div id="wrap">
<div id="cont">content
content content content content content content content content content
content content content content content content content content content
content content content content content content content content content
content content content content content content content content content
content content content content content content </div>
<div id="sidebar">
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
Sidebar </div>
</div>
</body>
This seems to work
Linda
-----Original Message-----
From: [email protected] [mailto:[email protected]] On
Behalf Of Ben Davies
Sent: Monday, 17 August 2009 4:14 PM
To: [email protected]
Subject: Re: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations
Hi Kepler,
>You may want to try max-width on your main content. I'm not sure if that
will work for you since you didn't post a link.
I tried max- and min-width in a few combinations and could not get it to
work (and makes my content no longer fluid ).
Hi Mark
Thanks for the sample code. The problem with that approach is that if the
window is too small the sidebar will drop down. If it is too large my
content area will grow but I will introduce a big gap between the sidebar
and the content.
The markup below demonstrates what I currently have. Works great but I
suspect content-first source ordering is impossible:
<html><head>
<title>test</title>
<style type="text/css">
#cont {
padding:10px;
margin-left: 220px;
}
#sidebar {
float:left;
background: #DDDDDD;
margin: 10px;
margin-right:0px;
font-size:90%;
width:200px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="sidebar">
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
Sidebar </div>
<div id="cont">content
content content content content content content content content content
content content content content content content content content content
content content content content content content content content content
content content content content content content content content content
content content content content content content </div>
</div>
</body></html>
Ben Davies
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
