aligning two div's

[ThaLIkz]

This is my css

div.members {
    width: 400px;
    padding: 0px; 
    margin: 0px auto;
    border:1px solid #000; }
    
div.members span.pic {
    float: left;
    width: 100px; }
    
div.members span.profiel {
    float: right;
    width: 300px;
    font-size:12px;
    background-color:#f2f2f2;
    text-align: left;
    padding: 2px; } 

And this is my html

<div align="center">
<div class="members">
 <span class="pic">pic</span>
 <span class="profiel">Gamertag: [TS] ThaLikz</span>
</div>
</div> 

This is a piece of a profile page, i want the span class pic & profile to be aligned on one line. This is working fine without the border around the div members but if i put a border around it the span class profile is aligned at the bottom (see here).

How can i get it aligned at one line??

[wisbin]

or make sure you have the right width. (width of the div-boxes are made of: margin-left + border-left + padding-left + width + all-thatstuff Right. Make sure they are 0 if you dont want them.

400 <> 100+300 in this CSS world

[vgarcia]

Float span.profiel to the left as well. That should put them both on one line.

[Paul O'B]

Hi,

If you just increase the width in div.members to accomodate borders and padding, as Wisbin suggests, then you will see that they do stay on one line.

Paul

[ThaLIkz]

ah thnks a lot, it's working now