Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 216
  • Last Modified:

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
0
kaushalk
Asked:
kaushalk
  • 6
  • 4
1 Solution
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now