asked on

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

Rob

Your #centerright in the attached css doesn't have the float: right;

kaushalk

ASKER

sorry. I had made the change on my current css file since posting it here. it still doesn't seem to work

Rob

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

kaushalk

ASKER

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

kaushalk

ASKER

Here is the screenshot
ImageDIVs.jpg

kaushalk

ASKER

LOL. Got the page centered too. Thanks though

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kaushalk

ASKER

I had done exactly that and it worked. Thanks a bunch

Rob

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

kaushalk

ASKER

I do not have the site up yet