...

View Full Version : Alistapart negative margins layout sidebar



peblaco
05-12-2007, 03:02 PM
Does anyone know how to use a background colour instead of a background image for the sidebar background of:

http://alistapart.com/d/negativemargins/ex4.htm ?

The instructions for that page are at http://alistapart.com/articles/negativemargins

Thanks in advance.

Excavator
05-12-2007, 04:19 PM
Good morning peblaco,
It's definitely easier using the image.

Assuming #content will always be taller than #sidebar this will work:
#wrapper {
background: #E7E7D6;
}
#header {
background: #d7dabd;
}
#container {
width: 100%;
float: left;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
border-right: 2px solid #CECEA5;
}
#sidebar {
width: 198px;
float: right;
}
#footer {
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}

Put enough content in #sidebar and you can see how it will break.

peblaco
05-13-2007, 01:31 PM
Good morning peblaco,
It's definitely easier using the image.

Assuming #content will always be taller than #sidebar this will work:
#wrapper {
background: #E7E7D6;
}
#header {
background: #d7dabd;
}
#container {
width: 100%;
float: left;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
border-right: 2px solid #CECEA5;
}
#sidebar {
width: 198px;
float: right;
}
#footer {
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}

Put enough content in #sidebar and you can see how it will break.

Thanks for that although the content in both columns will vary. Seems most people are using an image, other ones I found are:

http://www.positioniseverything.net/articles/onetruelayout/equalheight which says it has some problems and

http://www.satzansatz.de/cssd/columnswapping.html where I couldn't find a finished layout?

koyama
05-13-2007, 08:18 PM
Does anyone know how to use a background colour instead of a background image for the sidebar background of:
http://alistapart.com/d/negativemargins/ex4.htm ?
The instructions for that page are at http://alistapart.com/articles/negativemargins
Maybe you can get some inspiration from Stu Nicholls in his 3-equal-height-columns layout (http://www.cssplay.co.uk/layouts/3cols.html). (instruction for the page (http://www.cssplay.co.uk/layouts/threecol.html)). He is using ordinary CSS borders to implement the background color instead of using a background image.

Copying the idea and using it for the template by Ryan Brill from 'A List Apart', you would arrive at this. I have highlighted the changes to the CSS of the example 4 in the link you posted.


#wrapper {
/* background: #f1f2ea url(background.gif) repeat-y right; */
}
#header {
background: #d7dabd;
}
#container {
width: 100%;
/* background: #f1f2ea url(background.gif) repeat-y right; */
float: left;
margin-right: -200px;
}
#content {
background: #f1f2ea;
/* margin-right: 200px; */
border-right: 200px solid red;
}
#sidebar {
width: 200px;
float: right;
background: purple;
}
#footer {
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum