I'm trying to get a css layout working. One so I can use it, and two just to refine my css skills.
The idea is that each part of the page (left pane, right pane, middle pane etc) have a border around them that is a series of background images. This is because I want to have rounded corners and my own border that I've designed.
I think the biggest problem I'm having is getting these borders (.leftbar, .rightbar) to use the full height of the div they are in. If I could get this I'd be golden.
Any help?
Thanks!
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=windows-1250">
- <title></title>
- <style>
- body
- {
- text-align: center;
- }
- #wrapper
- {
- margin: 0 auto;
- text-align: left;
- width: 80%;
- overflow: hidden;
- }
- #header
- {
- width: 100%;
- background-color: blue;
- }
- #leftpane
- {
- float: left;
- width: 19%;
- background-color: green;
- }
- #content
- {
- width:50%;
- float: left;
- margin: 0px 1%;
- background-color: red;
- }
- #rightpane
- {
- width: 29%;
- float: right;
- background-color: yellow;
- }
- #footer
- {
- width: 100%;
- clear: both;
- background-color: orange;
- }
- .topbar
- {
- }
- .panecontent
- {
- display: inline;
- float:left;
- width: 90%;
- }
- .leftbar
- {
- height: 100%;
- width:5px;
- display:inline;
- background-color: black;
- float:left;
- }
- .rightbar
- {
- height: 100%;
- width: 5px;
- display:inline;
- background-color: black;
- float: right;
- margin: 0px;
- }
- .bottombar
- {
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- <br>
- <div id="header">
- <br>
- </div>
- <div id="mainbody">
- <br>
- <div id="leftpane">
- <div class="topbar"></div>
- <div class="leftbar"></div>
- <div class="panecontent">
- menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
- </div>
- <div class="bottombar"></div>
- <div class="rightbar"></div>
- <br>
- </div>
- <div id="content">
- <div class="topbar"></div>
- <div class="leftbar"></div>
- <div class="panecontent">
- body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body
- </div>
- <div class="bottombar"></div>
- <div class="rightbar"></div>
- </div>
- <div id="rightpane">
- <div class="topbar"></div>
- <div class="leftbar"></div>
- <div class="panecontent">
- rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside
- </div>
- <div class="bottombar"></div>
- <div class="rightbar"></div>
- </div>
- <br>
- </div>
- <br>
- <div id="footer">
- <div class="topbar"></div>
- <div class="leftbar"></div>
- <div class="panecontent">
- footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer
- </div>
- <div class="bottombar"></div>
- <div class="rightbar"></div>
- </div>
- </div>
- </body>
- </html>