Forum Moderators: not2easy
html, body{margin:0; padding:5px; }
#pagewidth{width:100%; min-width: 500px; }
#header{width:100%;} #outer{
border:solid red 0px;
border-left-width: 200px;
border-left-style: solid;
width: auto;
}
#inner{margin:0; width:100%;}
#outer>#inner { border-bottom:solid red 1px; }
#leftcol{
width:200px;
float:left;
position:relative;
margin-left:-200px;
margin-right:1px;
}
#maincol{
float: left;
width: 100%;
position: relative;
margin: 0 -8px 0 -2px;
}
#footer{width:100%; }
<div id="pagewidth" >
<div id="header" >
<div class="content"> Head </div>
</div>
<div id="outer" >
<div id="inner">
<div id="leftcol" >
<div class="content"><P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
</div>
<div id="maincol" >
<div class="content"><P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque at ante.</div>
</div>
</div>
</div>
<div id="footer" >
<div class="content"> Footer </div>
</div>
</div>
body {color: white; background:url(image.jpg); }
So I've tried changing the border from red to transparent, but that still doesn't allow the background image to be viewed.
Is there a way for this to work with this method? I've tried several different versions of the two-column layout, many of which I've found through this board, and this one has been the only one where the text in all columns behaves exactly as I want it to. I don't want to give it up, but I'd like the option of putting a background image on my site.
Thanks for your help DrDoc, I probably wouldn't have taken another look at that. :)