How do I align an image parallel to the text?

Question

2.00/5 (1 vote)

See more:

I am trying to align a logo parallel to the text, but my code is not working properly.

HTML

<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
  
                    <p>Where some see a Wastewater Treatment Plant, Huber Technology envisions a Resource Recovery Center.</p>
            <div class="col-xs-6">
                 <img src="http://www.huber-technology.com/fileadmin/huber-template2013/www/img/logo-huber_hd.png">
              </div> 
              </div>
            </div>
          </div>
        </div>
    </section>

Can anyone point me in the right direction to align these items parallel to each other?

Posted 27-Jul-15 9:40am

Member 11866959

Add a Solution

Comments

Sergey Alexandrovich Kryukov 27-Jul-15 16:06pm

How anything can be "not parallel"? Did you turn anything? No, you did not. Rather, you have to explain what do you mean.
—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Afzaal Ahmad Zeeshan · Answer 1 · 2015-07-27T10:02:00

Even in ab HTML web site, you need to provide enough space for the elements to be able to fit in. Otherwise, they will continue to stack themselves from top to bottom. In your case, the problem is similar (as per default CSS; you have not shown any CSS code).

I have tried a similar case as you are having. I added some CSS properties to change the width of elements, set them to a value that can hold both of the child element. Then finally, set them to display inline.

HTML

<!-- Sample HTML code; that ressembles your case -->
<div class="container">
    <p>Where some see a Wastewater Treatment Plant, Huber Technology envisions a Resource Recovery Center.</p>
    <div class="col-xs-6">
        <img src="https://www.google.com.pk/images/srpr/logo11w.png" />
    </div> 
</div>

To align the paragraph and the Google's logo in one place, I used the following CSS code,

CSS

// Container element should take 100% of space. 
.container {
    width: 100%;
}

// Display them in one line
.container p, .container div img {
    display: inline-block;
}

// Paragraph to left side
.container p {
    width: 60%;
    float: left;
}

// Image to the right
.container div img {
    width: 38%;
    float: right;
}
// You can change the floating positions to change the position of elements.

The content was aligned in a line; because of their widths set to a percentage of their parent's and the display set to inline-block. You can test the above sample at, http://jsfiddle.net/afzaal_ahmad_zeeshan/2hu1dk3w/[^].