CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Ejaz
Ejaz

Reputation: 1632

Image comes out of the row

I have an image inside row > col-md-6.

I wish to move the image to the right of its column.

I created the below two classes - .pos1 and .pos2

.pos1 {
    position: relative;
}
.pos2 {
    position: absolute;
    right: 0px;
}

On using these classes, the image comes out of the row and its no more responsive.

The html code is below:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>My Faourite App</title>
</head>

<body>
    <div class="container">
        <div class="row">
                <h1 class="title">MY FAVORITE APP</h1>
        </div>
        <div class="row">
            <div class="col-md-6 pos1">
                <img src="http://placehold.it/300x300" class="img-responsive pos2" alt="hello">
            </div>
            <div class="col-md-6">
                <div>In ac ipsum quis turpis adipiscing commodo. Mauris fermentum quam.<div>
            </div>
        </div>
    </div>
</body>
</html>

Please suggest what I am doing wrong. I am trying this on both, IE12 and Chrome

Upvotes: 1

Views: 73

Answers (4)

Roger
Roger

Reputation: 3256

There is a trick with the pull-right method though. When you get smaller than col-ms-6 it acts like a floating graphic. Making text wrap around it. The simplest thing to do is just add img{margin-left:auto;} and forget about the excess css.

JSFiddle

Also, if you want all of your other elements to line up with the container you need to put some type of col-{size}-{number} otherwise your margins won't line up.

<div class="container">
    <div class="row">
        <!--Adding 'col-md-12' allows the margins to line up with other 'col-' items-->
        <div class="col-md-12">
             <h1 class="title">MY FAVORITE APP</h1>

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <img src="http://placehold.it/300x300" class="img-responsive" alt="hello" style='margin-left:auto;' />
        </div>
        <div class="col-md-6">
            <div>In ac ipsum quis turpis adipiscing commodo. Mauris fermentum quam.</div>
        </div>
    </div>
</div>

Upvotes: 0

jordan
jordan

Reputation: 10742

Remove both:

.pos1 {
    position: relative;
}
.pos2 {
    position: absolute;
    right: 0px;
}

Neither are needed as .col-md-6 is already position:relative and you can use bootstrap helper classes like .pull-right.

Upvotes: 1

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

you may use this classes:

.row {position:relative;overflow:hidden;}
.pos1 {position:absolute; right:0; height:100%;}
.pos1 img {position:absolute; right:0; height:100%;}

FIDDLE

Upvotes: 1

Yerko Palma
Yerko Palma

Reputation: 12329

Don't use position: absolute it's (almost) always a problem. Try to use bootstrap class pull-right and clearfix instead of your .pos1 and .pos2. The pull-right class goes on the image and the clearfix class on the parent of the image. Check if that works.

Upvotes: 1

Related Questions