CODEWITHSUNDEEP
htmlcssresponsive-designposition
richwestcoast
richwestcoast

Reputation: 107

CSS - floating issue for a responsive design

Problem: http://i.snag.gy/TYvi4.jpg

Fiddle: http://jsfiddle.net/CadDC/7/

As you can see in the problem image above, I would like to position the image alongside the title but keeping the structure of the html for a responsive layout.

<div class="listingWrapper clearfix">
<div class="headlineText">FLOAT: RIGHT</div>
<div class="subText">FLOAT: RIGHT</div>
<div class="logo">FLOAT: LEFT (ALONGSIDE HEADLINE)</div>
<div class="introduction">FLOAT: RIGHT</div>

Upvotes: 0

Views: 1780

Answers (4)

Alexandra
Alexandra

Reputation: 1136

Look at this fiddle: http://jsfiddle.net/caprella/7kbVX/

I propose to add one more wrapper .heading for .headlineText and .subText. It will give us opportunity to move the whole header. But that .heading steel needs fixed width:(

Upvotes: 2

noob
noob

Reputation: 641

I think this is your perfect answer http://jsfiddle.net/CadDC/14/ . If you want it to be responsive you must give width and all in %.

Upvotes: 0

Ruddy
Ruddy

Reputation: 9923

Cant you just:

.listingImage{
max-width: 190px;
float: left;

}

Upvotes: 0

Arun Bertil
Arun Bertil

Reputation: 4648

Check the Js fiddle

http://jsfiddle.net/CadDC/9/

<div class="listingWrapper clearfix">

    <div class="logo">
        <img class="listingImage" src="http://media-cdn.tripadvisor.com/media/photo-s/02/d0/d7/ed/hotel-du-vin-york.jpg" />
    </div>



    <div class="headlineText"><h2>Hotel name</h2></div>
    <div class="subText">Mars - 0.7 miles from Mars City Centre</div>
        <div class="introduction">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost       
    </div>        
</div>

Upvotes: 1

Related Questions