CODEWITHSUNDEEP
htmlcss
Maysam
Maysam

Reputation: 7367

Elements won't lineup

I cannot lineup these three <div> (image is scaled down): enter image description here

HTML:

    <div id="container">
        <div id="position">
            <div id="content">
                <div id="logo">
                <div class="ref1">
                    <img src="ref/b_bi.png" />
                </div>
                <div class="ref2">
                    <img src="ref/b_mg.png" />
                </div>  
                <div class="ref3">
                    <img src="ref/b_sl.png" />
                </div>                       
                </div>

            </div>
        </div>
    </div>

CSS:

#logo
{
    width: 100%;
    height: 400px;
    margin-left: 0;
    background-image: url(logo.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.5);

}
.ref1
{
    width:250px;
    height: 400px;
    margin-left:300px;
    background-color: rgba(0,0,0,0.3);
}
.ref2
{
    width:250px;
    height: 400px;
    margin-left: 550px;
    background-color: rgba(0,0,0,0.3);
}   
.ref3
{
    width:250px;
    height: 400px;
    margin-left: 800px;
    background-color: rgba(0,0,0,0.3);

}   
#container 
{ 
    display: table; 
    width: 100%; 
    height: 95%; 
}
#position 
{ 
    display: table-cell; 
    vertical-align: middle; 
    padding-top: 4%;
}
#content { }

Upvotes: 0

Views: 221

Answers (3)

Robert
Robert

Reputation: 3074

The problem is your margin-left's and possibly the width's of the classes. If you remove the margin-left's in .ref2 and .ref3 and add a float:left; to all 3 classes that should do what you want. You may also need to remove or reduce your width's on all 3.

Here are the changes I would recommend starting with, you can play around with it once they are aligned how you want.

.ref1
{
    width:250px;
    height: 400px;
    margin-left:300px;
    float:left;
    background-color: rgba(0,0,0,0.3);
}
.ref2
{
    width:250px;
    height: 400px;
    /*margin-left: 550px;*/
    float:left;
    background-color: rgba(0,0,0,0.3);
}   
.ref3
{
    width:250px;
    height: 400px;
    /*margin-left: 800px;*/
    float:left;
    background-color: rgba(0,0,0,0.3);

}

Upvotes: 1

Jasper Kennis
Jasper Kennis

Reputation: 3062

And like this?

#logo
{
    width: 100%;
    height: 400px;
    margin-left: 0;
    background-image: url(logo.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.5);

}
.ref1, .ref2, .ref3
{
    width:250px;
    height: 400px;
    float: left;
    background-color: rgba(0,0,0,0.3);
}
#container 
{ 
    display: table; 
    width: 100%; 
    height: 95%; 
}
#position 
{ 
    display: table-cell; 
    vertical-align: middle; 
    padding-top: 4%;
}
#content { }

Upvotes: 1

Aaron J Spetner
Aaron J Spetner

Reputation: 2155

I am assuming you wan't the DIVs to appear side by side? If so, you will need to add the style "float:left" to those DIVs (and get rid of the margins).

Upvotes: 1

Related Questions