Search code examples
csspositioningcss-float

CSS Webpage elements are not positioning correctly

I am trying to code a design into HTML and CSS. It is a small snippet. I am having issues with the positioning and cant seem to put elements in their correct places.

My webpage can be found at http://www.sarahjanetrading.com/js/j/index.html

The design that I want to copy can be found here: http://www.sarahjanetrading.com/js/j/people-list.png

I also want the checkbox input to look like the one in the design. Can checkboxes be styled?

Solution

  • Change Your CSS like this :

    #people-list #content h2 {
font-size: 16px;
float: left;
margin-left: 10px;
margin-top: 5px;
width: 355px;
}
#people-list #content small {
font-size: 12px;
color: #8F9092;
margin: 5px 0 8px;
display: block;
float: left;
width: 355px;
display: block;
margin-left: 9px;
}
#people-list #content .tags {
border-radius: 7px;
box-shadow: inset 0px 6px 2px 8px #f5f5f5;
border: 1px solid #E3E3E3;
padding: 2px;
font-size: 9px;
margin-right: 3px;
margin-left: 10px;
}

    and Check this link for styling checkbox http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/