So far, so good!
Got it working in the browsers I can test it with, using the
following strategy:
<div id="left"><div> </div></div>
<div id="content">blabla</div>
<div id="right"><div> </div></div>
html, body
{
height: 100%;
}
body
{
margin: 0 auto;
padding: 0;
position: relative;
}
#left
{
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
}
#left div
{
background: url('left_bar.jpg') right top repeat-y;
margin-right: 382px;
height: 100%;
}
#right
{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
}
#right div
{
background: url('right_bar.jpg') repeat-y;
margin-left: 382px;
height: 100%;
}
#main
{
width: 764px;
margin: 0 auto;
position: relative;
}
It'll probably fail miserably on IEWin, but I have to wait till
Monday to test that...
cheers,
bartz
On 29-jul-2006, at 16:20, Bart Zonneveld wrote:
> Thanks a lot!
> Really helped me going in the right way.
> So far, I managed to get it all to work in Firefox.
> See http://20kmiles.dyndns.org/djtrx/
>
> I'm developpig on a Mac now, so no chance to test anything in pc-
> browsers. And unfortunately it doesn't work yet in Safari. If there
> are any Safari-experts out there, could you please take a look?
>
> thanks!
> bartz
>
> On 29-jul-2006, at 11:24, David Sharp wrote:
>
>> Bart Zonneveld wrote:
>>> Our layout consists of 3 floating columns, left, center and
>>> right. The center column has a fixed width, let's say 400 pixels.
>>> The height of these two should be the same as the center column.
>>
>> I think most people's weapon of choice in this regard is faux
>> columns. http://www.alistapart.com/articles/fauxcolumns/
>> I think this is appropriate for you because your middle column is
>> fixed width. Your graphic therefore should look something like this :
>> ******************| ( 400px of middle column background ) |
>> &&&&&&&&&&&&&&&
>>> The width, however (and this is the trickiest) should be the
>>> remaining width of the browser window, up until they've reached
>>> the width of the background-image. Something like (total width -
>>> center width) / 2.
>>
>> I think the trick is that your middle column is fixed, so you need
>> your left and right columns to be 50% of the available width, and
>> have margins equal to half that in which the middle column will
>> sit. Someone may have a more economical solution, and I'm not sure
>> how this works cross browser, but the following may help you get
>> started... (hopefully I'm not reinventing the wheel too much)
>>
>> <div id="left">
>> <div>Left sidebar content goes in here</div>
>> </div>
>>
>> <div id="right">
>> <div>Right sidebar content goes in here</div>
>> </div>
>>
>> <div id="middle">
>> <div>Middle content goes in here</div>
>> </div>
>>
>>
>> And the CSS
>> body {
>> max-width : 800px;
>> position : relative;
>> margin : 0 auto;
>> padding : 0;
>> background : url(fauxcolumnsimage.gif) top center repeat-y;
>> }
>> #left {
>> position : absolute;
>> top : 0;
>> left : 0;
>> width : 50%;
>> }
>> #left div {
>> margin-right : 200px; /* that is half the width of the middle
>> column */
>> }
>> #right {
>> position : absolute;
>> top : 0;
>> right : 0;
>> width : 50%;
>> }
>> #right div {
>> margin-left : 200px;
>> }
>> #middle {
>> width : 400px;
>> margin : 0 auto;
>> position : relative; /* otherwise the absolutely positioned divs
>> "paint over" the middle div */
>> }
>>
>> Issues:
>> IE doesn't support max-width. There are workarounds, but these may
>> cause this method to stop working, I don't know.
>> IE < 6 don't support margin:auto. text-align : center; should work
>> but again I haven't tested this fix.
>> There are a lot of extra divs here - there may be a lot better way
>> of doing this, but this is what popped into my head first.
>
> -----------------------------------------
> 07-07: MFF @ SJU
>
> http://www.movement-agency.nl/
> http://guerata.blogspot.com/
> Listen to my mixes @ http://20kmiles.dyndns.org/mix/
>
>
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
-----------------------------------------
07-07: MFF @ SJU
http://www.movement-agency.nl/
http://guerata.blogspot.com/
Listen to my mixes @ http://20kmiles.dyndns.org/mix/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
