Aligning div inside a div with Label?

Question

I have below html code.

HTML

<label for="payment" class="headerAtt">Pay:</label>
<div class="chckValueWrap">
   <div class="left">
    <input type="checkbox" name="chk_group" value="value1" />Visa<br />
    <input type="checkbox" name="chk_group" value="value2" />Master Card <br />
    <input type="checkbox" name="chk_group" value="value3" />American Express<br />
    <input type="checkbox" name="chk_group" value="value3" />Care Credit<br />
    <input type="checkbox" name="chk_group" value="value1" />Discover</div>
    <div class="right"><input type="checkbox" name="chk_group" value="value2" />Cash ONLY<br />
    <input type="checkbox" name="chk_group" value="value3" />Personal Check<br />
    <input type="checkbox" name="chk_group" value="value3" />PayPal <br />
    <input type="checkbox" name="chk_group" value="value3" />No Cash Accepted<br />
    <input type="checkbox" name="chk_group" value="value3" />Others
  </div>
</div>

CSS:

.headerAtt{
   padding-right: 50px;
   padding-bottom: 10px;
   min-width: 250px;
   display: inline-block;
   color: #999999;
   font-family: Verdana;
   font-size: 13px;
   font-weight: bold;
}

.chckValueWrap{
    background-color: #FFFFFF;
    border: 1px solid #C0C0C0;
    padding-bottom: 10px;
    font-size: 1.13em;
    width: 80%;
    margin: auto;
    padding: 1%;
    height: 100px;
}

.left{
    width: 40%;
    height: 100px;
    float: left;  
}
 .right {
    width: 40%;
    height: 100px;
    float: right; 
 }

Here everything is working fine except the label. how can i align align label and div horizontally as a single Line?

Thanks!

Answer 1

Try changing margin of .chckValueWrap to -23px 0 0 42px;

.headerAtt{
   padding-right: 50px;
   padding-bottom: 10px;
   min-width: 250px;
   display: inline-block;
   color: #999999;
   font-family: Verdana;
   font-size: 13px;
   font-weight: bold;
}

.chckValueWrap{
    background-color: #FFFFFF;
    border: 1px solid #C0C0C0;
    padding-bottom: 10px;
    font-size: 1.13em;
    width: 80%;
    margin: -23px 0 0 42px;
    padding: 1%;
    height: 100px;
}

.left{
    width: 40%;
    height: 100px;
    float: left;  
}
 .right {
    width: 40%;
    height: 100px;
    float: right; 
 }

Answer 2

Check this

What I did is:

Put the label and div inside an outer div with class outerWrap . And gave that div padding.

Removed padding from chckValueWrap class css.

.outerWrap {
    background-color: #FFFFFF;
   padding-bottom: 10px;
    font-size: 1.13em;
    width: 80%;
    margin: auto;
    padding: 1%;
    height: 100px;
}

.chckValueWrap {
    background-color: #FFFFFF;
    border: 1px solid #C0C0C0;
    padding-bottom: 10px;
    font-size: 1.13em;
    width: 80%;
    height: 100px;
}

Hope it helps.

Answer 3

You are giving 80% to the outer width and giving 40% each to right and left div inside it. Width attribute represents the content width only. So giving 40% to both will collide their border and both will not come correct. You need to slightly decrease width of one while playing with float.You need make it work with following CSS changes:

.headerAtt{
   padding-right: 50px;
   padding-bottom: 10px;
   min-width: 250px;
   display: inline-block;
   color: #999999;
   font-family: Verdana;
   font-size: 13px;
   font-weight: bold;
   float:left;
}
.left{
    width: 39%;
    height: 100px;
    float: left;  
}
 .right {
    width: 40%;
    height: 100px;
    float: right; 
 }

Fiddle: http://jsfiddle.net/9E4q7/4/

Answer 4

Try this: Demo at: http://jsfiddle.net/7EPRJ/2/

Your HTML remain the same. Just some tweaks to the css Your label width may be the issue.

.headerAtt {    
    padding-right: 5px;
    padding-bottom: 10px;
    min-width: 20px;
    display: inline-block;
    color: #999999;
    font-family: Verdana;
    font-size: 13px;
    font-weight: bold;
    float:left;

}
.chckValueWrap {
    background-color: #FFFFFF;
    border: 1px solid #C0C0C0;
    padding-bottom: 10px;
    font-size: 1.13em;
    width: 80%;
    margin: auto;
    padding: 1%;
    height: 100px;
    float:left;
    overflow:hidden;
}
.left {
    width: 40%;
    height: 100px;
    float: left;
}
.right {
    width: 40%;
    height: 100px;
    float: right;
}