We help IT Professionals succeed at work.

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

kaushalk
kaushalk asked
on
232 Views
Last Modified: 2014-08-18
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
Comment
Watch Question

RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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

Author

Commented:
sorry.  I had made the change on my current css file since posting it here.  it still doesn't seem to work
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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

Author

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

Author

Commented:
Here is the screenshot
ImageDIVs.jpg

Author

Commented:
LOL.  Got the page centered too.  Thanks though
Owner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
I had done exactly that and it worked.  Thanks a bunch
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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

Author

Commented:
I do not have the site up yet
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.