homepage Welcome to WebmasterWorld Guest from 54.227.20.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Why is there such a large margin?
TheRookie

5+ Year Member



 
Msg#: 8019 posted 10:32 pm on Dec 5, 2005 (gmt 0)

I'm very new to CSS - just decided to transform my pretty large HTML site. I'm totally clueless, so I'd appreciate some pointers.

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.

 

TheRookie

5+ Year Member



 
Msg#: 8019 posted 10:35 pm on Dec 5, 2005 (gmt 0)

Looks like the border around the list items don't work for me in IE now, either.

Ahhh!

TheRookie

5+ Year Member



 
Msg#: 8019 posted 10:38 pm on Dec 5, 2005 (gmt 0)

To get the border around the lists back, I changed my "li" definition to "ul"...

I'm sure I'm doing this terribly wrong, but I'm just learning by doing.

Thanks.

TheRookie

5+ Year Member



 
Msg#: 8019 posted 10:43 pm on Dec 5, 2005 (gmt 0)

Looks like I forgot to close a div tag and it made the margins a bit smaller. Some advice would still be helpful, though..also, my right and center columns are almost touching. Any suggestions?

MatthewHSE

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8019 posted 3:47 am on Dec 15, 2005 (gmt 0)

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.

TheRookie

5+ Year Member



 
Msg#: 8019 posted 4:07 am on Dec 15, 2005 (gmt 0)

Thanks for the help.

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.

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8019 posted 12:47 pm on Dec 15, 2005 (gmt 0)

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

TheRookie

5+ Year Member



 
Msg#: 8019 posted 8:14 pm on Dec 15, 2005 (gmt 0)

Awesome help, cEM.

I'll make some changes and report any other problems I come across.

Thanks a ton. :-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved