CSS Spacing & alignment

See attached html & CSS.

I am trying to get the image img src="images/metro50_2014_winners_plaque.jpg"> to appear next to the text "Oklahoma's Leading Wholesale ...." and at the top.

I don't want to screw up any of the existing CSS.

How can I do this?

See how it functions now at http://davispipe.com/default1.html

Thanks.
default1.html
style.css
Richard KortsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Move the container for the image so it's the first item under <div class="feature_widgets">

Then on style.css line 304 change the width of this as shown:
#main .container .feature_widgets .widget_rt_rt {
    float: right;
    margin-left: 25px;
    width: 155px;
}

Adjust as necessary.

Then on styles.css line 299 change this item to float:left

#main .container .feature_widgets .widget_rt {
    float: left;
    margin-left: 25px;
    width: 150px;
}
0
Richard KortsAuthor Commented:
I think we might be looking at two different places. I am looking near the bottom at :

<div class="feature_widgets">
                          <div class="widgetn widget_text">
                            <div class="textwidget">
                              <h3>Oklahoma's leading wholesale distributor conveniently located in <strong>edmond</strong> and <strong>norman</strong>.</h3>
                            </div>
            </div>
This does not appear as Flash to me.

Thanks
0
Tom BeckCommented:
Sorry, our posts crossed. I figured out what you meant and changed my post.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Richard KortsAuthor Commented:
To Tom Beck,

I did as you said EXCEPT I made special versions of the css that I included in the effected page only; I don't know what other pages might be effected by changing the global css.

See http://davispipe.com/default1.html

I want the image to be to the right of the text "Oklahoma's leading wholesale distributor conveniently located in ..." and for that text to be top aligned.

Thanks
0
Tom BeckCommented:
Move the widget block...

<div class="widget_lt widget_text">
    <div class="textwidget">
      <img src="images/metro50_2014_winners_plaque.jpg">
    </div>
</div>

..so it's the second child div under <div class="feature_widgets">

Add these css rules to this page only to align the text to the top of the image and move the image closer to the text.

#main .container .feature_widgets .widgetn {
    margin-top: -12px;
}
#main .container .feature_widgets .widget_lt {
    margin-left: 0;
}

Then I would change the width of the css you added to the page for this item from 155px to 200px.

#main .container .feature_widgets .widget_rt_rt1 {
    float: right;
    margin-left: 25px;
    width: 200px;
}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsAuthor Commented:
I did something wrong; it now stacks the WHOLE footer vertically in one column on the left.

http://davispipe.com/default1.html
0
Tom BeckCommented:
The markup is missing a </div> or the nesting is wrong. Hang on I'll try to find it.
0
Tom BeckCommented:
I think you removed the parent container for the widgets. I don't see it in the source.

Add this just inside <div class="container" id="homekey">

<div class="feature_widgets">
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.