css column help

  • lagislabonita
  • Novice
  • Novice
  • lagislabonita
  • Posts: 20

Post 3+ Months Ago

Hi, I recently installed a new template on my site. However, i'm not really happy with the column layout. I need help on the css code to have the left and right columns go all the way to the edge. An example of my site would be: http://clanwebmasters.com/free-clan-tem ... index.html I want the left and right columns to be all the way to the edge. The left column im talking about is the first title "BlockTitle" listed on the site i mentioned above. The right column im talking about is the first title "BlockTitle" listed on the site i mentioned above.
The css code:
Code: [ Select ]
.hide {display:none;}
body {background: #000; color: #FFF; padding:0 0 3px 0; margin:0; font: 100 7pt "Verdana", sans-serif;}
#container {width:935px; position:absolute; left:50%; margin-left: -467px; padding:0;}
#content {width:887px; position:absolute; left:50%; margin-left: -443px; padding:0 0 10px 0; border-bottom: 2px solid #6c6c6c;}
h1{margin: 0; padding:25px 80px; height:95px; background: url(images/i1.png) top no-repeat; display:block; font-size: 7pt; font-weight:100;}
#links img {border:0; padding:0; margin:0;}
#links a {margin:0; padding:0;}
#threads {width:299px; float:left; height:107px; padding:30px 1px 0 6px; background: url(images/i9.png) top no-repeat;}
#matches {width:299px; float:left; height:107px; padding:30px 1px 0 2px; background: url(images/i10.png) top no-repeat;}
#updates {width:273px; float:left; height:107px; padding:30px 6px 0 0; background: url(images/i11.png) top no-repeat;}
#blocks ul {padding:0 0 0 25px; margin:0; background: url(images/i12.png) top repeat-y; list-style-image: url(images/bullet1.png);}
#blocks li {height: 14px; padding: 1px 5px 1px 0; margin:1px 0 0 0;}
#login {clear:both; display:block; border-left: 1px solid #6c6c6c; border-right: 1px solid #6c6c6c; margin: 10px 0; padding: 3px 15px;}
#login form {padding:0; margin:0;}
#login label {margin: 0 5px;}
#login input {font-size: 7pt; font-family:Verdana, Arial, Helvetica, sans-serif; border: 1px solid #a5acb2;}
#text {position:absolute; margin: -15px -430px 0 0; width:450px; right: 50%; text-align:right;}
#left {float:left; width: 218px; padding: 5px 0 0 0; background: #1e1e1e url(images/i13.png) top no-repeat; position:static; margin: 0 4px 0 1px;}
#right {float:left; width: 218px; padding: 5px 0 0 0; background: #1e1e1e url(images/i13.png) top no-repeat; position:static; margin: 0 1px 0 4px;}
#center {float:left; position:static; padding: 20px 30px; width: 377px; border-left: 1px solid #6c6c6c; border-right: 1px solid #6c6c6c;}
#center h2 {color: #1474a1; margin: 0 0 10px 0; font-size: 9pt;}
.block {padding: 0 1px; margin: 0 2px 20px 2px; background: url(images/i15.png) left repeat-x;}
.blockcontent {background: #000; margin:0; padding:0; border-left: 1px solid #1e1e1e; border-right: 1px solid #1e1e1e;}
.blockcontent h2 {background: url(images/i14.png) left no-repeat; margin:0; height: 16px; display:block; font-size: 7pt; font-weight:bold; padding: 8px 0 0 34px;}
.blockcontent h3 {background: url(images/i16.png) left no-repeat; margin:0; color: #484747; text-align:right; height: 18px; display:block; font-size: 7pt; font-weight:100; padding: 6px 15px 0 0;}
.blockcontent h2 small {font-size:7pt; font-weight:bold; color: #5c5c5c;}
.padd {padding: 5px 7px;}
h4 {display: block; height: 13px; background: url(images/i17.png) bottom no-repeat; padding:0; margin:0;}
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: underline;
    color: #FFFFFF;
}
a:active {
    text-decoration: none;
    color: #FFFFFF;
}
  1. .hide {display:none;}
  2. body {background: #000; color: #FFF; padding:0 0 3px 0; margin:0; font: 100 7pt "Verdana", sans-serif;}
  3. #container {width:935px; position:absolute; left:50%; margin-left: -467px; padding:0;}
  4. #content {width:887px; position:absolute; left:50%; margin-left: -443px; padding:0 0 10px 0; border-bottom: 2px solid #6c6c6c;}
  5. h1{margin: 0; padding:25px 80px; height:95px; background: url(images/i1.png) top no-repeat; display:block; font-size: 7pt; font-weight:100;}
  6. #links img {border:0; padding:0; margin:0;}
  7. #links a {margin:0; padding:0;}
  8. #threads {width:299px; float:left; height:107px; padding:30px 1px 0 6px; background: url(images/i9.png) top no-repeat;}
  9. #matches {width:299px; float:left; height:107px; padding:30px 1px 0 2px; background: url(images/i10.png) top no-repeat;}
  10. #updates {width:273px; float:left; height:107px; padding:30px 6px 0 0; background: url(images/i11.png) top no-repeat;}
  11. #blocks ul {padding:0 0 0 25px; margin:0; background: url(images/i12.png) top repeat-y; list-style-image: url(images/bullet1.png);}
  12. #blocks li {height: 14px; padding: 1px 5px 1px 0; margin:1px 0 0 0;}
  13. #login {clear:both; display:block; border-left: 1px solid #6c6c6c; border-right: 1px solid #6c6c6c; margin: 10px 0; padding: 3px 15px;}
  14. #login form {padding:0; margin:0;}
  15. #login label {margin: 0 5px;}
  16. #login input {font-size: 7pt; font-family:Verdana, Arial, Helvetica, sans-serif; border: 1px solid #a5acb2;}
  17. #text {position:absolute; margin: -15px -430px 0 0; width:450px; right: 50%; text-align:right;}
  18. #left {float:left; width: 218px; padding: 5px 0 0 0; background: #1e1e1e url(images/i13.png) top no-repeat; position:static; margin: 0 4px 0 1px;}
  19. #right {float:left; width: 218px; padding: 5px 0 0 0; background: #1e1e1e url(images/i13.png) top no-repeat; position:static; margin: 0 1px 0 4px;}
  20. #center {float:left; position:static; padding: 20px 30px; width: 377px; border-left: 1px solid #6c6c6c; border-right: 1px solid #6c6c6c;}
  21. #center h2 {color: #1474a1; margin: 0 0 10px 0; font-size: 9pt;}
  22. .block {padding: 0 1px; margin: 0 2px 20px 2px; background: url(images/i15.png) left repeat-x;}
  23. .blockcontent {background: #000; margin:0; padding:0; border-left: 1px solid #1e1e1e; border-right: 1px solid #1e1e1e;}
  24. .blockcontent h2 {background: url(images/i14.png) left no-repeat; margin:0; height: 16px; display:block; font-size: 7pt; font-weight:bold; padding: 8px 0 0 34px;}
  25. .blockcontent h3 {background: url(images/i16.png) left no-repeat; margin:0; color: #484747; text-align:right; height: 18px; display:block; font-size: 7pt; font-weight:100; padding: 6px 15px 0 0;}
  26. .blockcontent h2 small {font-size:7pt; font-weight:bold; color: #5c5c5c;}
  27. .padd {padding: 5px 7px;}
  28. h4 {display: block; height: 13px; background: url(images/i17.png) bottom no-repeat; padding:0; margin:0;}
  29. a:link {
  30.     color: #FFFFFF;
  31.     text-decoration: none;
  32. }
  33. a:visited {
  34.     text-decoration: none;
  35.     color: #FFFFFF;
  36. }
  37. a:hover {
  38.     text-decoration: underline;
  39.     color: #FFFFFF;
  40. }
  41. a:active {
  42.     text-decoration: none;
  43.     color: #FFFFFF;
  44. }

Please reply, thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

It sounds like you're wanting to change this template from a fixed width to a fluid (or percentage-based) layout? If so, you might be better off just finding a fluid layout instead. For example, if this one stretched to fit the browser, what would happen to the buttons at the top, or the header image, or all the containing blocks in the content area? You'd be stuck redoing all the images in the site because they would look weird when they stretched out.

I'm not saying it's impossible.. just that it might be more work than it's worth. Try changing some of the widths in the CSS to percentages and you'll see what I mean. For example:
Code: [ Select ]
#container {width:935px; position:absolute; left:50%; margin-left: -467px; padding:0;}

would be
Code: [ Select ]
#container {width:100%;padding:0;}

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 47 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.