Help with faux columns

  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

Hey Everyone!

I was wondering if you could help me with my layout? I almost have the layout completed except I can't get the faux columns to work. My layout is liquid and I have a fixed header and footer image which are working fine. I know there are several ways this can be accomplished I tried applying a image that has all three columns just to my wrapper container and I tried an image for the right column in the wrapper and then I had an image for the left column and I set that in a wrap_inner container just after that the wrapper container and that mad my header image disappear. I have attached my code below and would really appreciate some help with this. I think I am screwing my positioning. I have my left column and main content area set in a container 77% in width. My wrapper max-width is 960px so if I created a 960px by 10px image this tells me that for my left column it will need to be 162.2px in width (.77*960*.22 = 162.62) for my right column it will need to be 220.8px (.23*960 = 220.8 ) for the image. For the main content area will have to be 576.57px (960*.77*.78 = 576.57 for the image again. adding all of this values together I come up with a total of 959.99 = 960px.

Thanks for the help again!

Chris

Here is the code

CSS:

Code: [ Select ]
body {
    text-align: center;
    background: #666666;
    font-size: 11px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
}

#wrapper {
    background: #FFFFFF url(../images/threecol.gif) repeat-y 77% 0;
    height: 100% !important;
    height: 1%;
    background-repeat: repeat-y;
    width: 90%;
    text-align: left;
    margin: 0 auto;
    max-width: 960px;
    min-width: 960px;
}

#wrapper_inner {
    background: #000000 url(../images/threecol-l.gif) repeat-y 22.125% 0;
    height: 100% !Important;
    height: 1%;
}

#header {
    background:url(../images/58fireheader.png) no-repeat top center; height:400px; width:100%;
}


#mainbody {
    float: left;
    width: 77%;
}

#leftcol {
    float: left;
    width: 22%;
    background-color: #000000;
    overflow: hidden;
}

#content {
    float: right;
    width: 78%;
    background-color:#FFFFFF;
    overflow: hidden;
}

#rightcol {
    float: right;
    width: 23%;
    background-color: #000000;
    overflow: hidden;
}

#footer {
    clear: both;
    background:url(../images/footer.png) no-repeat top center; height:200px; width:100%;
}

#inside {
    padding: 10px;
}
  1. body {
  2.     text-align: center;
  3.     background: #666666;
  4.     font-size: 11px;
  5.     font-family: Verdana,Arial,Helvetica,sans-serif;
  6. }
  7. #wrapper {
  8.     background: #FFFFFF url(../images/threecol.gif) repeat-y 77% 0;
  9.     height: 100% !important;
  10.     height: 1%;
  11.     background-repeat: repeat-y;
  12.     width: 90%;
  13.     text-align: left;
  14.     margin: 0 auto;
  15.     max-width: 960px;
  16.     min-width: 960px;
  17. }
  18. #wrapper_inner {
  19.     background: #000000 url(../images/threecol-l.gif) repeat-y 22.125% 0;
  20.     height: 100% !Important;
  21.     height: 1%;
  22. }
  23. #header {
  24.     background:url(../images/58fireheader.png) no-repeat top center; height:400px; width:100%;
  25. }
  26. #mainbody {
  27.     float: left;
  28.     width: 77%;
  29. }
  30. #leftcol {
  31.     float: left;
  32.     width: 22%;
  33.     background-color: #000000;
  34.     overflow: hidden;
  35. }
  36. #content {
  37.     float: right;
  38.     width: 78%;
  39.     background-color:#FFFFFF;
  40.     overflow: hidden;
  41. }
  42. #rightcol {
  43.     float: right;
  44.     width: 23%;
  45.     background-color: #000000;
  46.     overflow: hidden;
  47. }
  48. #footer {
  49.     clear: both;
  50.     background:url(../images/footer.png) no-repeat top center; height:200px; width:100%;
  51. }
  52. #inside {
  53.     padding: 10px;
  54. }


HTML:

Code: [ Select ]
<div id="wrapper">
<div id="header"></div><!--End of Header-->
<div id="mainbody">
<?php if( mosCountModules('left') ) : ?>
<div id="leftcol">
<!--Start Inside Div for Gutter-->
<div id="inside">
<?php mosLoadModules('left', -2); ?>
</div><!--End Inside Div for Gutter-->
</div><!--End of Left Column-->
<?php endif; ?>
<div id="content">
<!--Start Inside Div for Gutter-->
<div id="inside">
<?php mosPathWay(); ?>
<?php if( mosCountModules('banner') ) : ?>
<?php mosLoadModules('banner', -2); ?>
<?php endif; ?>
<?php if( mosCountModules('top') ) : ?>
<?php mosLoadModules('top', -2); ?>
<?php endif; ?>
<?php mosMainBody(); ?>
<?php if( mosCountModules('bottom') ) : ?>
<?php mosLoadModules('bottom', -2); ?>
<?php endif; ?>
</div><!--End Inside Div for Gutter-->
</div><!--End of Main Content-->
</div><!--End of Mainbody-->
<?php if( mosCountModules('right') ) : ?>
<div id="rightcol">
<!--Start Inside Div for Gutter-->
<div id="inside">
<?php mosLoadModules('right', -2); ?>
</div><!--End Inside Div for Gutter-->
</div><!--End of Right Column-->
<?php endif; ?>
<div id="footer"></div><!--End of Footer-->
</div><!--End of Wrapper-->
  1. <div id="wrapper">
  2. <div id="header"></div><!--End of Header-->
  3. <div id="mainbody">
  4. <?php if( mosCountModules('left') ) : ?>
  5. <div id="leftcol">
  6. <!--Start Inside Div for Gutter-->
  7. <div id="inside">
  8. <?php mosLoadModules('left', -2); ?>
  9. </div><!--End Inside Div for Gutter-->
  10. </div><!--End of Left Column-->
  11. <?php endif; ?>
  12. <div id="content">
  13. <!--Start Inside Div for Gutter-->
  14. <div id="inside">
  15. <?php mosPathWay(); ?>
  16. <?php if( mosCountModules('banner') ) : ?>
  17. <?php mosLoadModules('banner', -2); ?>
  18. <?php endif; ?>
  19. <?php if( mosCountModules('top') ) : ?>
  20. <?php mosLoadModules('top', -2); ?>
  21. <?php endif; ?>
  22. <?php mosMainBody(); ?>
  23. <?php if( mosCountModules('bottom') ) : ?>
  24. <?php mosLoadModules('bottom', -2); ?>
  25. <?php endif; ?>
  26. </div><!--End Inside Div for Gutter-->
  27. </div><!--End of Main Content-->
  28. </div><!--End of Mainbody-->
  29. <?php if( mosCountModules('right') ) : ?>
  30. <div id="rightcol">
  31. <!--Start Inside Div for Gutter-->
  32. <div id="inside">
  33. <?php mosLoadModules('right', -2); ?>
  34. </div><!--End Inside Div for Gutter-->
  35. </div><!--End of Right Column-->
  36. <?php endif; ?>
  37. <div id="footer"></div><!--End of Footer-->
  38. </div><!--End of Wrapper-->
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 40 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.