CODEWITHSUNDEEP
htmlcss
user541597
user541597

Reputation: 4355

placing two divs side by side

I have two divs one is a picture and the other is text. I am putting these two divs inside a parent div and using as my header. My image is much taller than the text. What I want to do is put the image all the way on the left and the text on the right vertically aligned at the bottom to align with the images bottom. I am having a hard time doing this. Also, I can't use float because when I view the page on a mobile phone because of the width the text breaks to the next line which is fine but using float:right it goes to the right which is not what I want here is what I am trying. 

<div id="header" style="overflow:auto"><div style="float:left;">

<img src="Images/crescentlogo.png" /></div>

<div><h4 class="gold">Daily <span class="DarkGreen">EXCEEDING</span> <span class="gold">our Customers'</span> <span class="DarkGreen">EXPECTATIONS</span></h4></div>

</div>

Any ideas?

Thanks,

Upvotes: 0

Views: 2316

Answers (2)

TaLha Khan
TaLha Khan

Reputation: 2433

Heres the code for it:

<!DOCTYPE html>
 <html>
<head>
<style>
    h4{
        display: inline;
    }
</style>
</head>
<body><div id="header">
<img src="Images/crescentlogo.png" id="img" />

<div id="text" style="display: inline;"><h4 class="gold">Daily <span    
class="DarkGreen">EXCEEDING</span>
    <span class="gold">our Customers'</span> <span class="DarkGreen">EXPECTATIONS</span></h4>    </div>

</div>
     </body>
    </html>

Link for JSFiddle: http://jsfiddle.net/w5wCG/1/

Upvotes: 1

Ata Ur Rehman
Ata Ur Rehman

Reputation: 1

Give float:left to img and also give float:left to div, it will place side by side

img div {
    float:left; }

Upvotes: 0

Related Questions