Two images side by side move on top of each other on smaller screens...

Discussion in 'CSS' started by wvccboy, Jan 4, 2012.

0
  1. #1
    Hello!

    The URL which I am referencing is http://www.edgecoupons.com.

    If you have a widescreen monitor, you will recognize that the logo and the form on the right are side by side. However, if you have a smaller
    monitor or if you squeeze the page, you will find that the logo will appear to be on top of the form on the right.

    I can't seem to figure out where I've gone wrong with the CSS so they always remain side by side.

    Thanks!
     
    Solved! View solution.
    wvccboy, Jan 4, 2012 IP
  2. #2
    What do we have in horizontal:

    1) logo:
    float: left;
    width: 558px;
    margin-left: 370px;

    2) sideright:
    float: left;
    width: 653px;

    So, to see these blocks side by side, the screen must has min.wide = 558+370+653
    I think margin-left is absolutely unnecessary here.
     
    Inna, Jan 5, 2012 IP
    wvccboy likes this.
  3. wvccboy

    wvccboy Notable Member

    Messages:
    2,632
    Likes Received:
    81
    Best Answers:
    1
    Trophy Points:
    250
    #3
    I gotcha. Thanks for the heads up. I removed the margin-left, and it seems to look great now.

    Thank you!
     
    wvccboy, Jan 5, 2012 IP