Web Analytics Made Easy -
StatCounter Images overlapping one another. - CodingForum

Announcement

Collapse
No announcement yet.

Images overlapping one another.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Resolved Images overlapping one another.

    I Have two images, one is floated left and the other is floated right. The problem is when the screen gets smaller or when you make the browser window smaller, the images on the left overlaps the image on the right.

    How can i stop this from happening? i would of thought it would of been position:fixed; but it's not.
    Last edited by kor81; Aug 21, 2011, 05:23 PM.

  • #2
    Hi there kor81,

    you need to use min-width somewhere in your CSS.

    Here is an example...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>fruit</title>
    
    <style type="text/css">
    #image-container {
        min-width:720px;    /*  this is the total width of the two images  */
     }
    #apple {
        float:left;
     }
    #banana {
        float:right;
     }
    </style>
    
    </head>
    <body>
    
    <div id="image-container">
     <img id="apple" src="apple.jpg" alt="apple">
     <img id="banana" src="banana.jpg" alt="banana">
    </div>
    
    </body>
    </html>
    
    coothead
    ~ the original bald headed old fart ~

    Comment


    • #3
      i got that, min-width and max-width, it's not like the image is stretching, it's like the divs are overlapping/moving over one another.

      Comment


      • #4
        Hi there kor81,

        if my offering does not solve your problem then we need to see your code.

        Do you have a link to the site in question for us to view it?

        coothead
        ~ the original bald headed old fart ~

        Comment


        • #5
          Originally posted by coothead View Post
          Hi there kor81,

          if my offering does not solve your problem then we need to see your code.

          Do you have a link to the site in question for us to view it?

          coothead
          Okay, i fixed it (clear:both) thanks for your help.

          Comment

          Working...
          X