CODEWITHSUNDEEP
css
fakeguybrushthreepwood
fakeguybrushthreepwood

Reputation: 3083

Aligning an image in a div to the right to sit behind text in another div

I am trying to accomplish this (PNG mockup): enter image description here

By trying this (jsfiddle):

HTML:

<div class="container">
    <div class="traintext">The East London Line part of the London Overground line that runs north to south through the East End, Docklands and South areas of London.</div>
    <div class="trainimage"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Unit_378150_at_Whitechapel.jpg/300px-Unit_378150_at_Whitechapel.jpg"></div>
    </div>
</div>

CSS:

.container {
    width: 500px;
    height: 300px;
    background-color: blue;
}

.traintext {
    color: white;
    font-size: 18px;
}

.trainimage {

}

But I'm not sure what I need to do to get .trainimage and .traintext in the right place.

Upvotes: 1

Views: 50

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241038

One option would be to absolutely position the text; thus removing it from the flow and placing it over the floated img element. EXAMPLE HERE

.traintext {
    color: white;
    font-size: 18px;
    position:absolute;
}

.trainimage {
    float:right;
}

You shouldn't have any problems with this approach; given that the parent .container has defined dimensions (meaning it won't collapse because of the floated/absolutely positioned elements)

Upvotes: 1

Related Questions