Forum Moderators: not2easy
I took this 3-column layout from a site, and I want to use lists to make new boxes in each column. However, my columns are indented a pretty large amount on each side, and I don't know how to remedy that.
The CSS:
html, body{
margin:0;
padding:0;
text-align:center;
}
#pagewidth{
width:95%;
text-align:left;
margin-left:auto;
margin-right:auto;
}
#header{
position:relative;
height:60px;
background-color:#FFFFFF;
width:100%;
}
#leftcol{
width:25%;
float:left;
position:relative;
background-color:#FFFFFF;
}
#twocols{
width:70%;
float:right;
position:relative;
}
#rightcol{
width:43%;
float:right;
position:relative;
background-color:#FFFFFF;
}
#maincol{background-color: #FFFFFF;
float: left;
display:inline;
position: relative;
width:57%;
}
#footer{
height:40px;
background-color:#FFFFFF;
clear:both;
}
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
li
{
list-style-type:none;
margin-top: 15px;
border-style:solid;
border-width:1px;
padding:3px;
}
The HTML:
<div id="pagewidth" >
<div id="header" > Head </div><div id="wrapper" class="clearfix" >
<div id="twocols" class="clearfix">
<div id="maincol" >
<ul>
<li>Main </li>
</ul>
</div>
<div id="rightcol" >
<ul>
<li>right Column </li>
</ul>
</div></div>
<div id="leftcol" >
<ul>
<li>Left column </li>
<li>left column box 2</li>
</ul>
</div></div>
<div id="footer" > Footer
</div>
What's wrong?
Thanks.
Ahhh!
I'm sure I'm doing this terribly wrong, but I'm just learning by doing.
Thanks.
I took this 3-column layout from a site, and I want to use lists to make new boxes in each column. However, my columns are indented a pretty large amount on each side, and I don't know how to remedy that.
I'm not sure I understand your problem. Could you explain a little further? Specifically, what kind of result are you after, what are you getting, and what page element appears to be the problem?
I copied your code and tried it out, but I couldn't tell where the problem was.
Basically, it seems that there are large margins on the left and right side of each page. Maybe it's something on my end, but when I view the sample page, the left and right boxes in the list are a reasonable distance away from the sides of the page.
the left and right boxes in the list are a reasonable distance away from the sides of the page
The distance on the left-hand list is due to the default margin/padding on the ul. Different browsers use different properties to create that space on the left of the list (called the "marker box"). To get rid of it, style the list(s) to have no margin or padding...
ul{margin:0;padding:0;}
The space on the right side is due to the fact that the list is left-aligned in a 43% wide column. If you right align that list you'll see that the element actually sits right up against the right side of the container. You can't tell when using text that doesn't span the whole column list.
Try adding background colors to the elements on your test page and you'll be able to get a better sense of where their boundaries are. Optionally, install the Web Dev toolbar on Firefox and use the Outline tool to see where the edges of your elements actually sit.
cEM
I'll make some changes and report any other problems I come across.
Thanks a ton. :-)
