CODEWITHSUNDEEP
cssimagetextalignmentinline
Windbrand
Windbrand

Reputation: 575

Image and text on same line?

This is giving me a headache...

I'm trying to have an image of fixed height/width on the left, and text on the right, in the same line of course. The overall container has a dynamic width of 90% of viewport, meaning that the text on the right will also have a dynamic width (90% - image width) since the image on the left is fixed. The text needs to be aligned left, so "float:right" won't work. I've tried countless combinations of floats, aligns, table cells, etc, nothing works... closest I've got to was they were in the same line, but the text was forced aligned to the right.

Image of what I mean: https://i.sstatic.net/IaRHY.png

#container {
overflow:hidden;
position:relative;
width:90%;
min-width:800px;
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
.leftimage {
width:600px;
height:100px;
}
.righttext {    
float:right;
}

...
...

<div id="container">

    <div class="righttext">lorem ipsum lorem ipsum <br> lorem ipsum lorem ipsum </div>

    <div class="leftimage"><img src="../pictures/test.png"></div>

</div>

Upvotes: 1

Views: 17553

Answers (2)

Pavlo Shandro
Pavlo Shandro

Reputation: 808

Move 

<div class="righttext">lorem ipsum lorem ipsum <br> lorem ipsum lorem ipsum </div>

after 

<div class="leftimage"><img src="../pictures/test.png"></div>

CSS:

.righttext{
    float: none;
    margin-left: 600px;
}

Upvotes: 6

Jcpopp
Jcpopp

Reputation: 149

Maybe just: 

<img src="#" align="left">
<p>This is my paragraph to the right of my image</p>

This does work, as demonstrated here: http://jsfiddle.net/tWqwh/

Upvotes: 4

Related Questions