Question

i am making some tournament brackets. for some reason i am having an issue in aligning the logo divs in with the lines of the bracket lines. Can you please help me and tell me how i would position other brackets (in case i add more) Thanks so much!

JSFIDDLE

HTML

<div class="logo1"></div>
<div class="logo2"></div>

<div class="brackets-direct">
    <div class="tpleft"></div>
    <div class="tpright"></div>
    <div class="btleft"></div>
    <div class="btright"></div>
</div>
​

CSS

.brackets-direct
{

}
.brackets-direct div {
    border: 1px solid #aaa;
    width: 38px;
    float: left;
    height: 33px;

}

div.tpleft 
{
    border-width: 1px 1px 0 0;
}
div.btleft 
{
    border-width: 0 1px 1px 0;
    clear: left;
}
div.tpright 
{
    border-width: 0 0 1px 0;
}
div.btright 
{
    border-width: 0;
}

.logo1, .logo2
{
    width: 50px; 
    height: 50px; 
    border: 1px solid #000; 
    margin-bottom: 2px;
}



​

Answer 1

Quick fix for this is using the following styles:

.brackets-direct
{
    float: left;
    position: relative;
    top: -35px;
}

.logo1, .logo2
{
    width: 50px; 
    height: 50px; 
    border: 1px solid #000; 
    margin-bottom: 2px;
    float: left;
    clear: left;
}

Not sure if this will work across all the other browsers, but just changing your JSFiddle with that fixed it. You can read more about the clear property here: http://reference.sitepoint.com/html/br/clear