Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Alistapart negative margins layout sidebar

    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.
    Peblaco : Web design & Ecommerce
    Actinic web design

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning peblaco,
    It's definitely easier using the image.

    Assuming #content will always be taller than #sidebar this will work:
    Code:
    #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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Good morning peblaco,
    It's definitely easier using the image.

    Assuming #content will always be taller than #sidebar this will work:
    Code:
    #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/...ut/equalheight which says it has some problems and

    http://www.satzansatz.de/cssd/columnswapping.html where I couldn't find a finished layout?
    Peblaco : Web design & Ecommerce
    Actinic web design

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by peblaco View Post
    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. (instruction for the page). 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.
    Code:
    #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;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •