CODEWITHSUNDEEP
htmlcss
David Tunnell
David Tunnell

Reputation: 7532

image wont align right

I am modifying html and css that is part of a wordpress theme:

<div id="featured_content">
<h1>Balance for Work and Life</h1>
<p class="flavorText">If it is having a physical impact on you or those around you, if it is weighing on your mind, affecting your emotions or stirring your spirit – whatever it is – if it is important to you, it’s important to us.<p>
<img class="angledMan" src="http://www.eap.zhi.com/wp-content/uploads/2013/10/angledman.png">
</div>

This is what it currently looks like:

enter image description here

My problem is that the image is showing below the text but I want it to show to the right of the text.

Here is my css:

.flavorText {
    margin-top:2em;
    text-align: center;
    width: 21em;
    font-size: 1.75em;
    color: white;
}

.angledMan {
    float:right;
}

Additionally here is the associated css of the wordpress theme:

#header #featured #left_arrow { float: left; background: url('images/featured_before.png') no-repeat top right; width: 34px; margin-left: 7px; padding-top: 110px; height: 217px;}
#header #featured #featured_content { padding: 19px 19px 19px 40px; float: left; background: #9ebadb; width: 902px; height: 280px;  color: #000; font-size: 1em; line-height: 1.6em;}
#header #featured #featured_content img { float: left; margin: 0 30px 0 0; }
#header #featured #featured_content h1 {line-height: 1.2em; font-size: 3em; margin: 0px 0 14px 0; font-family: Century Gothic; font-weight: normal; color: #fff; text-shadow: -2px -1px 0px #000; }
#header #featured #featured_content #spotlight { float: left; width: 500px; margin-right: 10px; }

I've tried removing all of the float left tags above but it is still not working.

How do I get the desired result?

Upvotes: 0

Views: 121

Answers (4)

A.O.
A.O.

Reputation: 3763

All you need to do is change your css to this:

.flavorText {
    margin-top:2em;
    text-align: center;
    width: 21em;
    font-size: 1.75em;
    color: white;
    float:left;
}

.angledMan {
    float:left;
}

Notice, you need to float both classes to the left if you want to get this result. You can change the .angledMan to float: right if you want it to float all the way to the right of the screen...but you definitely need to add float: left to the .flavorText

http://jsfiddle.net/VkDzV/1/

Upvotes: 1

Christian Ternus
Christian Ternus

Reputation: 8492

You want to add 

float: left;

to your CSS, like so:

.flavorText {
    margin-top:2em;
    text-align: center;
    width: 21em;
    font-size: 1.75em;
    color: white;
    float: left;
}

.angledMan {
    float:right;
}

and also close your </p> tag properly.

Upvotes: 1

user2188149
user2188149

Reputation:

try it without the tag

because it breaks

tag line

use span

<div id="featured_content">
<h1>Balance for Work and Life</h1>
<span class="flavorText">If it is having a physical impact on you or those around you, if it is weighing on your mind, affecting your emotions or stirring your spirit – whatever it is – if it is important to you, it’s important to us.</span>
<img class="angledMan" src="http://www.eap.zhi.com/wp-content/uploads/2013/10/angledman.png">
</div>

Upvotes: 0

user240141
user240141

Reputation:

Use <div> or <span> instead of <p></p> for the text part as <p> consumes entire line, set its to float:left.

Upvotes: 1

Related Questions