CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
adaam
adaam

Reputation: 3706

Floating image to the left of Bootstrap 3 column fluid row

I am trying to float a little image of a cloud to the left of a 3 column fluid row (Bootstrap). Here is my code:

      <img src="img/cloud1.png" style="width:100px;float:left;">
      <div class="row-fluid" style="margin-top:50px;">
  <div class="span4 hero-unit" style="min-height:400px;background-color:#FFCFD9;">
    <h3>Quick Links</h3>
    <p><a href="mailto:[email protected]" style="text-decoration:underline;">Our Email : [email protected]</a>
    </p>
    <p><a href="pricing.php" style="text-decoration:underline;">Pricing options</a>
    </p>
  </div>
  <div class="span4 hero-unit" style="min-height:400px;background-color:#CAF9FC;">
    <h3>What We Do</h3>
    <p>albanCloud provides security and flexability to your Business’s IT. We provide our clients with a fully managed service for their cloud backups and virtual servers.
    </p>
  </div>
  <div class="span4 hero-unit" style="min-height:400px;background-color:#FCF6A2;">
    <h3>Where We Operate</h3>
    <p>
      Hertfordshire area, St Albans, Luton, Harpenden, Hatfield, Hemel, Welyn, Watford, Harrow, Barnet.
    </p>
  </div>
</div>

I've made sure that the span class numbers add up to 12 but I don't know how to take into account floating images within the scaffolding system.

Ideally I'd like the cloud to sit on the top right hand corner of the left most hero unit ("Quick Links")

This is the current result:

current situation

I need for the third hero-unit to fit on the same row - I've tried putting the img outside of the row-fluid div, as well as using inline-block and block and also negative margins

P.S I am open to alternatives to float as I want this to be responsive

Note: I haven't specified any more stylings than the inline CSS given in the example above, the rest is just default Bootstrap

Upvotes: 0

Views: 11309

Answers (1)

cortex
cortex

Reputation: 5224

You can move your image inside the first box and then position it:

<div class="row-fluid quick-links" style="margin-top:50px;">
  <div class="span4 hero-unit" style="padding:20px;min-height:400px;background-color:#FFCFD9;">
  <img src="img/cloud1.png" class="cloud" >
  <h3>Quick Links</h3>
  <p><a href="mailto:[email protected]" style="text-decoration:underline;">Our Email : [email protected]</a></p>
  <p><a href="pricing.php" style="text-decoration:underline;">Pricing options</a></p>
  </div>
...
</div>

.quick-links {
  position: relative;
end

.cloud {
  position: absolute;
  top: 0px; # Maybe you should update this value.
  left: 0px; # Maybe you should update this value.
end

Hope this helps!

Upvotes: 1

Related Questions