CODEWITHSUNDEEP
htmlcss
Mike.Whitehead
Mike.Whitehead

Reputation: 818

CSS - Positioning an image alongside text

I have a section of a site that needs a small image to sit alongside text for contact information. It needs to look like this - PSD version

At the moment it looks like this - Coded version

I've tried some different positioning aspects but can't seem to fix it. Here's the relevant code so far -

HTML

<div class="six columns">
                    <h2>To start getting great advice, get in touch.</h2>
                        <div class="phone">
                            <img src="images/phone.png">
                            <p>0113 220 5265</p>
                        </div>
                        <div class="email">    
                            <img src="images/email.png">
                            <p>[email protected]</p>
                        </div>    
                        <img src="images/Logo.png" style="width:250px;height:30px; margin-top: 20px;">
            </div>

CSS 

section#form h2 {
    font-size: 15px;
    margin-top: 40px;
}

.phone {
    float: left;
    margin-right: 100px;

}

.email {
    float: left;

}

I still need to re-size the images but my main concern is getting the image to sit correctly alongside the text as in the first image above.

Upvotes: 2

Views: 1748

Answers (6)

Sumith Chalil
Sumith Chalil

Reputation: 358

<style> 
.sameline{display:inline-block}
<\style>

<div>

<div class="sameline">
<img src="" />
</div>

<div class="sameline">
<p>text</p>
</div>

</div>

This will work perfectly fine

Upvotes: -1

CalvT
CalvT

Reputation: 3213

Add display: inline-block to your img and p elements.

section#form h2 {
  font-size: 15px;
  margin-top: 40px;
}

.phone {
  float: left;
  margin-right: 100px;
}

.email {
  float: left;
}

p,
img {
  display: inline-block;
}

/*Extra CSS to mimic your container*/
.six.columns {
  width: 300px;
}
<div class="six columns">
  <h2>To start getting great advice, get in touch.</h2>
  <div class="phone">
    <img src="images/phone.png">
    <p>0113 220 5265</p>
  </div>
  <div class="email">
    <img src="images/email.png">
    <p>[email protected]</p>
  </div>
  <img src="images/Logo.png" style="width:250px;height:30px; margin-top: 20px;">
</div>

Upvotes: 1

Mitch
Mitch

Reputation: 1394

You'll want to use the following styles: https://jsfiddle.net/56n074g6/1/

.phone p,
.email p {
  display: flex;
  align-items: center;
  margin: 0 6px;
}

.phone,
.email {
  display: flex;
  margin-bottom: 6px;
}
<div class="six columns">
  <h2>To start getting great advice, get in touch.</h2>
  <div class="phone">
    <img src="http://via.placeholder.com/30x30">
    <p>0113 220 5265</p>
  </div>
  <div class="email">
    <img src="http://via.placeholder.com/30x30">
    <p>[email protected]</p>
  </div>
  <img src="http://via.placeholder.com/150x75" style="width:250px;height:30px; margin-top: 20px;">
</div>

Upvotes: 2

Dalin Huang
Dalin Huang

Reputation: 11342

Since you are using float on those containers, add clear: both; will make sure there is no floating element on the left and right side (take the whole row).

Also p is a block element, you can change it to inline or just use a span

section#form h2 {
    font-size: 15px;
    margin-top: 40px;
}

.phone {
    float: left;
    margin-right: 100px;
}

.email, .mylogo {
    clear: both;
    float: left;
}
<div class="six columns">
  <h2>To start getting great advice, get in touch.</h2>
  <div class="phone">
    <img src="images/phone.png">
    <span>0113 220 5265</span>
  </div>
  <div class="email">
    <img src="images/email.png">
    <span>[email protected]</span>
  </div>
  <div class="mylogo">
    <img src="images/Logo.png" style="width:250px;height:30px; margin-top: 20px;">
  </div>
</div>

Upvotes: 2

cjl750
cjl750

Reputation: 4629

Since other answers use flexbox or inline-block, here's one to use floats as you originally had.

Remember that in your HTML you are trying to float the images and the phone numbers, which are contained within the divs .phone and .email. So don't float .phone and .email, float their contents:

.phone img, .phone p, .email img, .email p {
  float: left;
}

After that it is a matter of margins and also clearfixing the divs so that they will take the full height of their children and fall into a horizontal column.

section#form h2 {
  font-size: 15px;
  margin-top: 40px;
}
.phone img, .phone p, .email img, .email p {
  float: left;
}
.email {
  margin-top: 10px;
}
.phone p, .email p {
  margin: 3px 0 0 10px;
}
.phone::after, .email::after { /*clearfix*/
  content: '';
  display: table;
  clear: both;
}
<div class="six columns">
  <h2>To start getting great advice, get in touch.</h2>
  <div class="phone">
    <img src="http://placehold.it/25x25">
    <p>0113 220 5265</p>
  </div>
  <div class="email">
    <img src="http://placehold.it/25x25">
    <p>[email protected]</p>
  </div>
  <img src="http://placehold.it/250x30" style="width:250px;height:30px; margin-top: 20px;">
</div>

Upvotes: 1

Hitmands
Hitmands

Reputation: 14159

it's now easy with flexboxes

.row {
  display: flex;
  align-items: center;
}
<div class="row">
<div class="col">
  <img src="http://www.pngmart.com/files/2/Mario-Transparent-Background.png" style="width: 100px;" />
</div>

<div class="col">
  Hello World
</div>
</div>

Upvotes: 0

Related Questions