Can't seem to get the float working to move image side by side

This post shouldn't appear to be too difficult and I feel foolish, but I can't seem to get the float working properly in one of my rows with 2 images to appear side by side.

Both images are in DIV tags and in my CSS, I have specifically assigned float (left and right) for each image including the width of each image.  But yet, one image is below the other...

#centerleft {
      float: left;
      width: 443px;
}

#centerright {
      float: right;
      width: 557px;
}

The site is not up yet for me to give link to but this is troubling me to get it going. I am attaching the CSS file and the html file for reference

My concerns are "centerleft" and "centerright" tags.  I hope I am not overlooking a silly error on my part.

Thanks
index.html
mchomestyle.css
kaushalkAsked:
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.

RobOwner (Aidellio)Commented:
Your #centerright in the attached css doesn't have the float: right;
0
kaushalkAuthor Commented:
sorry.  I had made the change on my current css file since posting it here.  it still doesn't seem to work
0
RobOwner (Aidellio)Commented:
yes I didn't think so either.  I added it in but you can show a screenshot of what it's doing and what you want it to do?

http://jsbin.com/sohusa/1/edit

I can work with this demo to make it work for you
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.

kaushalkAuthor Commented:
strange.  in my html code I commented both "centerleft" and "centerright" and re-coded it as before without further touching CSS file, and now it seems to work just fine.  Hmmmmmm.

But now my page is left aligned instead of center.  LOL.  What do I need to modify to center the page on the screen?

Let me send you the screenshot anyways of what I was trying to do
0
kaushalkAuthor Commented:
Here is the screenshot
ImageDIVs.jpg
0
kaushalkAuthor Commented:
LOL.  Got the page centered too.  Thanks though
0
RobOwner (Aidellio)Commented:
LOL, don't you love it when you fix one thing only to break another :)

If you want to centre your content then it needs to be done with the parent element, which cannot have any type of float attached.

using the margin: 0px auto; will then centre your content.
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
kaushalkAuthor Commented:
I had done exactly that and it worked.  Thanks a bunch
0
RobOwner (Aidellio)Commented:
in otherwords, in your #wrapper css

#wrapper {
      width: 100%;
      height: auto;
      margin: 0px auto;
}

this causes other issues that are because of the floats so you will need to use clear: both style on the <ul> list

failing that can you post links to your images as well as the css3 menu css and i'll set up a mock up in jsbin
0
kaushalkAuthor Commented:
I do not have the site up yet
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
HTML

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.