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 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 columns with a gradient background on the sidebar-100% height?

    Hi,

    I am trying to arrange this 2 column layout and have some problems.
    I really don't know what direction to go from here.

    I want to get a gradient background on my left sidebar.

    But, the sidebar div does not continue to the bottom with the content div, should I just put the gradient background onto the body or the container box?

    If so, how can I have the page be at least 100% of the browser (so the background does not run past the footer)? When I do 100% height on the content box it runs past the page (the header and footer are sized by px) and it also messed up by bottom corner images.

    Any help anywhere is great.


    CODE:
    Code:
    html {
    	margin:0;
    	border:0;
    	padding:0;
    	height:100%;
    }
    
    Body {
    	margin:0;
    	border:0;
    	padding:0;
    	background:orange;
    	height:100%;
    }
    
    #container {
    	margin:0;
    	border:0;
    	padding:0;
    	background:brown;
    	min-height:100%;
    	height:100%;
    } 
    
    div.header {
    	margin:0;
    	border:0;
    	padding:0;
    	width:100%;
    	Height:35px;
    	background:red;
    }
    div.side {
    	margin:0;
    	border:0;
    	padding:0;
    	width:125px;
    	background:yellow;
    	float:left;
    }
    
    div.content {
    	border:0;
    	padding:0;
    	margin:0;
    	width:100%;
    	background:blue url("shadow.gif");
    	background-repeat: repeat-y;
    }
    	
    div.footer {
    	margin:0;
    	border:0;
    	padding:0;
    	width:100%;
    	Height:35px;
    	background:purple;
    	position:bottom;
    	clear:both;
    }
    
    div.bottomcorner {
    	padding:0;
    	margin:0;
    	border:0;
    }
    PAGE:
    Code:
    <html>
    <head>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <link rel="stylesheet" type="text/css" href="default2.css" />
    </head>
    <body>
    <div id="container">
    <div class="header"><p>HEADER</p></div>
    <div class="side"><p>SIDE</p></div>
    
    <div class="content"><img src="topcorner.gif"><p>CONTENT</p> <p>contenthhhhh hhhhhhhh hhhhhhhhhhhhhh</P><p>content</P><p>content</P><p>content</P>
    
    <div class="bottomcorner"><img src="bottomcorner.gif"></div></div>
    
    <div class="footer"><p>FOOTER</p></div>
    </div>
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello amandajo,
    I worked on this a bit tonight...
    -I put the image for the left column on the left side of #outer because outer is the 100% height part.
    -I hate absolute positioning but that's what puts the footer at the bottom
    -you will have to figure out how to get the rounded corner to goto the bottom, I think it will work if you make it part of the footer. Just add some height to the footer to make room for the corner then give the corner image a left margin to put it in the right place.
    -If you want to make this a full page width, I set it at 765px... just delete all the "width:765px;" lines.

    See if this page gets you close to what you were looking for.
    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    /edit - I went ahead and put that corner img on the bottom here.
    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

  • #4
    New Coder
    Join Date
    Apr 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks

    Thank you for all your work

    The gradient i was using on the side goes up and down, so with your layout I just have to figure out a way to add in the rest of the drop shadow in-between (since I cant tack in on to the page background), but i am sure it can be done

    Thanks for all your help!


  •  

    Posting Permissions

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