Styling an image and some text

I am working with someone else's styling, and can't get things as they managed to. I am trying to make things look like this page:

http://www.comehike.com/outdoors/parks/add_trailhead.php

See how the image is nicely on the right, and the form elements are on the left.

I have this page that I am messing with and trying to make similar:

http://开发者_如何学JAVAwww.comehike.com/account/member_home.php

Is there an easy way for me to make the image go to the far left, and the stuff asking the person to log in, to be on the right?

Thanks!

Start with changing the width on the first div within .basic. Change the width to 100% instead of 450px

You should be able to continue from there.

I would also move the image into it's own container and float that right, and put the form actions in another container. Also, make use of classes and ids for styling to clean things up.

Here is how you can make food use of floating elements:

HTML:

<div class="container">
  <div class="form">
     <form>....</form>
  </div>
  <div class="leftImage">
    <img src="img.jpg" />
  </div>
  <div class="clear"></div>
</div>

CSS:

.container {
   width: 800px;
}
.container .form {
   width: 500px;
   float:left;
}

.container .leftImage {
   width: 250px;
   float:left;
}

.clear {
   clear:both;
}

Replace the div with width: 450px to width: 100% then the child H3 float: left

increase the width to 845px for the div.

Float image to the left.

for the h3 tag do the styling

h3 {
   float: right;
  display: inline;

}

This will do the task for you.

Remove the empty tags from the HTML.