I am using the following css to make a horizontal divider line on my website:-

 

 

.divider {
width:100%;
height:1px;
background-color:#000;
float:left;}

 

Only problem is, when I use this class in different areas on the same page, some lines are appearing thicker than others. Can anyone advise me why this happens?

Edited September 4, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

Do you mean that its really thicker, or it only takes up more space ?

Try this:

 

.divider {
width:100%;
height:1px;
background-color:#000;
margin:0px;
padding:0px;}

I am using the following css to make a horizontal divider line on my website:-

 

 

.divider {

width:100%;

height:1px;

background-color:#000;

float:left;}

 

Only problem is, when I use this class in different areas on the same page, some lines are appearing thicker than others. Can anyone advise me why this happens?

 

As LeonW has alluded to in his answer, the main cause of that sort of problem are that you have margin or padding which is being applied on your page, and those margin/padding instructions are cascading down into your divider div.

I tried putting 0px on padding and margin and it didnt change anything. The line actually looks fatter. I have a min and max height on the divs before but no bottom paddings or margins so im confused..... still new to all this :-/

Dont know if this will help but the divs I have are:

 

 

#aboutme {
width:285px;
min-height:250px;
max-height:267px;
float:left;
background-color:#fff;}

#latestproj-thumb {
width:250px;
min-height:250px;
max-height:267px;
float:left;
margin-left:20px;
background-color:#fff;}

#latestproj-desc {
width:340px;
min-height:215px;
max-height:237px;
float:left;
margin-top:35px;
background-color:#fff;}

#blog-small {
width:900px;
min-height:220px;
max-height:237px;
float:left;}

 

and I then have the class div between some of them to divide it up.

Edited September 4, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

In that case it's likely to be something more complicated, I'd need to be able to see all your HTML and CSS (preferably the site) to be able to say for sure what is causing it.

 

One thing which caught my attention was that you have a float: left; on .divider but you say this is intended to be a horizontal divider? This confuses me because float will move .divider to float to the right of your previously floated elements...

Edited September 2, 201214 yr by Eoin

Hi, certainly since you are using 100% width there is no need to add the float. For testing purposes why not try using the <hr /> tag. This may give you some clues as to wether or not it could be an uncleared float causing the issue. Jim

Use a CSS reset. Then post up all your code, preferably a live link.