CODEWITHSUNDEEP
htmlcss
RS92
RS92

Reputation: 485

Why I can't align two divs correctly

I have one div container called row3red3 Inside I have 2 divs, left (.row3red3slika) and right(.row3red3info).

I can't right divs .row3red3info to set on top inline after image.

I tried and set width for .row3red3slika but not working, i have problem i think with row3red3slika width.?

HTML

<div class="row3red3">
    <div class"row3red3slika">

        <img src="img/slika2.jpg" alt="Slika2" height="150px" width="215px">

        <div class="imgtext1">
            <span><i class="fa fa-university"></i></span>
        </div><div class="imgtext2">
            <span>PORTSAID EGYPT</span>
        </div>

    </div>

    <div class="row3red3info">

        <span>text</span>
    </div>
</div>

CSS

.row3red3{
    width:900px;
    padding-left: 15px;
    padding-top: 15px;
}

.row3red3slika{
    width:215px;
    height:150px;
}

.row3red3 .imgtext1{
    display:inline-block;
    position: relative;
background-color:#3E6373;
color:white;
margin-top: 95px;
margin-left:10px;
padding: 4px;
}


.row3red3 .imgtext2{
    display:inline-block;
    position: relative;
font-size: 14px;
background-color:#3E6373;
color:white;
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 60px;
padding: 4px;
}


.row3red3 img{
position: absolute;
    display:inline-block;
    vertical-align: top;    
}

.row3red3info{


font-size:20px;
}

Upvotes: 1

Views: 50

Answers (3)

codepenguin
codepenguin

Reputation: 26

Add float: left; to .row3red3, .imgtext1 and .row3red3info, and .row3red3 img. Also you missed a = in:

<div class"row3red3slika">

it should be:

<div class="row3red3slika">

Upvotes: 1

hadi
hadi

Reputation: 1120

you can use float:left . also if you want to get rid of coding you can use Bootstrap. it does have a perfect grid system that is totally customizable here a link to it's grid system tutorial http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Upvotes: 0

Travis
Travis

Reputation: 2245

Have you tried floating your inner divs?

.row3red3info {float:right;}
.row3red3slika{float:left;}

Might help to set up a jsfiddle for this.

Upvotes: 0

Related Questions