Question

I’m new to css. I’m going to try and explain what I want to achieve. I have 5 “blocks”. Each block has a header and then several label – input pairs for data entry. Labels and inputs should be nicely aligned. The headers of each block should be centered above that block

The trick now is these 5 blocks should appear besides each other within a form that contains other normal label-input pairs for data entry. (here label-input are already aligned meaning there is some css going on on the “form-level”:

.cssform {
    padding-top: 2em;
    padding-bottom: 2em;
}

.cssform div{
    max-width: 680px;
    clear: left;
    margin: 0;
    padding: 5px 0 8px 0;
    padding-left: 155px; /*width of left column containing the label elements*/
}

.cssform label{
    color: #990033;
    font-weight: bold;
    float: left;
    margin-left: -155px; /*width of left column*/
    width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}


.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
    width: 180px;
    padding-bottom: 5px
}

This is somehow messing with above block layout I’m trying to create. My main issue currently is the padding or margin left. My “blocks” are too much to the right by 150px and I don’t know how to override. Here my current css:

.cssform div.scores{
    max-width: 680px;
    clear: none;
    float: left;
    margin: 0;
    padding: 5px 20px 8px 0;
    padding-left: 0px
}

.cssform div.scores label{
    float: left;
    margin-left: 0px; /*width of left column*/
    width: 100px;
}

.cssform div.scores input[type="text"]{
    width: 20px;
    padding-bottom: 5px
}

.scores h3 {

}

With this my first block is 150px to the right instead of sitting the most left possible.

Second issue is align headers for each block.

Any ideas?

EDIT:

Here the general elements in use:

<!-- Block 1 -->
<div class="scores">
    <h3 class="scoreClass1">Score Class 1</h3>
    <div>
        <label class="scoreClass1">Label 1</label>
        <input name="value1" type="text" class="scoreClass1"/>
    </div>
    <div>
        <label class="scoreClass1">Label 2</label>
        <input name="value2" type="text" class="scoreClass1"/>
    </div>
    <!-- More Values -->
</div>
<!-- Block 2 -->
<div class="scores">
    <h3 class="scoreClass2">Score Class 2</h3>
    <!-- Block 2 Values... -->

Answer 1

The issue was this:

.cssform label{
    color: #990033;
    font-weight: bold;
    float: left;
    margin-left: -155px; /*width of left column*/
    width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform div{
    max-width: 680px;
    clear: left;
    margin: 0;
    padding: 5px 0 8px 0;
    padding-left: 155px; /*width of left column containing the label elements*/
}

I must admit that I once copy pasted this from inet when starting to learn css but now I see it could be done much simpler whiel solving my issue:

.cssform div{
    max-width: 680px;
    clear: left;
    margin: 0;
    padding: 5px 20px 8px 0;        
}
.cssform label{
    color: #990033;
    font-weight: bold;
    float: left;        
    width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}