By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,016 Members | 2,265 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,016 IT Pros & Developers. It's quick & easy.

3 column layout - whitespace and repeat problem

P: 25
hi there, i'm pretty inexperienced with CSS, so apologies for the shoddy coding. i'm trying to set a 3 column layout using different background images for each column. however, i have whitespace at the top and sides of the page, which i really want to get rid of. i've used nested divs to create the layout so hopefully i've set these up properly.

the other problem i am having is that i want the images to repeat vertically to 100% of the page size, but this wouldn't happen when i specified either height:100%; or background-repeat:repeat y (which did nothing, even though repeat x will tile if change the code). as a very temporary fix i've specified height:800px; which allows the images to tile vertically as i wanted. Any help would be great.

the html....
Expand|Select|Wrap|Line Numbers
  1. <body>
  2. <div id="mainwrap">
  3. <div id="contentarea">
  4. <div id="contentarea2">
  5. <div id="column1">
  6. </div>
  7. <div id="column2">
  8. <div id="header">
  9. <img src = "antonine_logo_rev.png" alt="Logo" id="logo" height="120" width="210">
  10. <h1>ANTONINE SPORTS CENTRE</h1>
  11. </div> 
  12. </div>
  13. <div id="column3">
  14. </div>
  15. </div>
  16. </div>
  17. </div>
  18. </body>
  19.  
and the CSS

Expand|Select|Wrap|Line Numbers
  1. #mainwrap{
  2. margin:1px;
  3. background: url(new_background/background_middle.jpg) repeat;
  4. }
  5.  
  6.  
  7. #contentarea{
  8. margin:1px;
  9. background: url(new_background/border_left.jpg) repeat-y top left;
  10. position:relative;
  11. }
  12.  
  13. #contentarea2{
  14. margin:1px;
  15. background: url(new_background/border_right.jpg) repeat-y top right;
  16. height:800px;
  17. position:relative;
  18. }
  19.  
  20. #column1{
  21. position:absolute;
  22. top:0px;
  23. left:0px;
  24. width:150px;
  25. }
  26.  
  27. #column2{
  28. position:absolute;
  29. top:0px;
  30. margin-left:250px;
  31. margin-right:250px;
  32.  
  33. }
  34.  
  35. #column3{
  36. position:absolute;
  37. top:0px;
  38. right:0px;
  39. width:150px;
  40. }
  41.  
  42. #header {
  43. background: url(antonine_logo_rev3.png) no repeat top left;
  44.     padding-top: 40px;
Aug 3 '07 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
These links from Paul may help:
link1
link2
Aug 3 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.