0

Although it is a very simple error but I am unable to solve it. Please check the following link.

http://inimitablesystems.com/demos/interactin/interactin

Under the slider you will find "BUSINESS ESTABLISHMENT" Area. It has an image icon and the text explanation. I want that the text does not appear under the image and it appears aligned after the image where as it is getting under the image. I have tried the padding too but may be I am unable to apply it on the right node.

Kindly tell me how to fix the issue.

Thank you very much. Ahmad

Omicans
  • 531
  • 1
  • 8
  • 26

2 Answers2

0

Please make your architecture of the establishment div like this.

enter image description here

A main establishment div with some fixed width. Then divide that establishment div into two sections "left-establishment" and "right-establishment" width:60%. Hope this approach will solve your problem.

Sami
  • 1,041
  • 3
  • 16
  • 32
  • remember to float left both divs and then clear it before closing the main establishment div – Sami Sep 27 '13 at 11:11
0

Since your code base is already using style attributes (which I don't recommend using at all!), I'll give code samples using them.

@Sami's approach is the most desirable solution since there are no messy width values being set, no worries about container element width changes, and no worries about text additions or subtractions.

However, if you're looking for quick fixes without having to restructure code, I've got a couple for you even though I really recommend @Sami's approach. I'm really only posting this since I already went through the trouble of typing it out before @Sami posted a response.

One possible solution would be to explicitly specify the width of the element containing your text, and then float it next to the image which is already floating.

The issue here is that explicitly specifying the width as well as floating it is rather messy, difficult to maintain (using inline styles is difficult enough to maintain already), and leads to more potential issues.

<p style="text-align: left; width: 375px;">
    <em style="font-style:normal; display:block; width:273px; float:left;">INTERACTin was established 2 years ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of 40-50 staff. Offers 3 occupation types.<br> Operates across various Industries.</em>
</p>

Another possible solution is to add padding below the image to make its box extend far enough down to cover the text.

This approach is bound to fail if the containing element's width is ever changed or more text is added. Again, this makes it difficult to maintain.

(I had to use !important in the code sample since your website already uses !important which, in general, is mostly unnecessary if you follow rules of specificity.)

<img src="http://inimitablesystems.com/demos/interactin/assets/assets/img/events-icon.png" class="pull-left" style="padding-bottom:60px!important;">


jsea
  • 3,859
  • 1
  • 17
  • 21