Problems aligning text with image

[tobeeornot]

Hi, I am trying to push the text down in the main content container so it aligns neatly beside the image. I know I could incorporate the cup and tin image into the background and do it from there but I want to do it using css. Any suggestions?

Here is the link: http://jsfiddle.net/tobeeornot/fgHga/

I have tried pushing the text down using top-padding from the H2 but the text gets distorted. Any help would be appreciated.

[TerryJuneJr]

For the text try:

float: left;

For the image try:

float: right;

Then, for the next element put:

clear: both;

[Arkinder]

First off, I just want to mention that your header is a little off. You'll see what I mean here. What TerryJuneJr suggested will work fine. You just need to make a few changes so you can actually do it.

Place the text in a division on its own.

<div id="mainContent"> 
<div id="intro">   
    <h2>BLISS NO.5</h2><!--The clear property specifies which sides of an element where other floating elements are not allowed.-->
    <h1>A New Dimension in Good Taste</h1>
    <div id="sideImage"><img height="223" width="355" alt="cup" src="http://i1200.photobucket.com/albums/bb328/tobeeornot/cup_tin.png"></div><!--make sure png image is set upon a transparent canvas in Fireworks (modify/canvas/canvas color/transparent-->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco aboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- end #mainContent --></div>

And then move sideImage outside of that.

<div id="mainContent"> 

<div id="intro">   
    <h2>BLISS NO.5</h2><!--The clear property specifies which sides of an element where other floating elements are not allowed.-->
    <h1>A New Dimension in Good Taste</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco aboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="sideImage"><img height="223" width="355" alt="cup" src="http://i1200.photobucket.com/albums/bb328/tobeeornot/cup_tin.png"></div><!--make sure png image is set upon a transparent canvas in Fireworks (modify/canvas/canvas color/transparent-->

<!-- end #mainContent --></div>

Now for the CSS. Create a new rule for intro .

#intro {
    float: left;
    width: 585px;
}

Then remove the clear: left; from sideImage .

#mainContent #sideImage {
    float: right;
    height: 223px;
    margin: 10px;
    padding: 0;
    width: 355px;
}

If you don't mind my asking. Are you using this hosting site as your text editor?

Regards
Arkinder

[tobeeornot]

Hi Terry & Arkinder,

Thanks very much to the both of you for replying. I just wanted to mention that I am very much a beginner with coding so your advice is really appreciated, as it really does help me understand what steps I should take with the code and why.

Arkinder - I am using Dreamweaver as my text editor but thought it is better to demonstrate my coding issues via a direct link that people can play with rather than just inserting code.

[Arkinder]

Alright, I was asking because testing in a smaller window like the one provided is a bad idea. It messes with how the page can look in an actual browser.

Anytime, if there's ever something that you don't understand - feel free to ask.

Regards
Arkinder

[tobeeornot]

That is great, Arkinder. Many thanks!

Toby