"overflow:hidden" not working

HTML & CSS
1

Hi everyone,
My web page is consisted of 3 images located on one row. Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Attention !</title>
<style type="text/css">
  * {margin:0;padding:0;} 
  #title_wrapper {overflow:hidden;}
  #logo2 {float:left;}
  #title
   { 
    float:left;
   }
  #logo {float:left;}
</style>
</head>

<body>
  <div id="title_wrapper">
    <div id="logo2"><img src="logo2.gif"/></div>
    <div id="title"><img src="attention.gif"/></div>
    <div id="logo"><img src="logo_small.gif"/></div>
  </div>
</body>
</html>

Its’ web address is: http://avirot.bravehost.com/to_forum.html. I’d like those 3 images to remain on one row even when the user diminishs the browser’s window. any redundant image should disappear when there is not enough space. Thats why i added the following style:


#title_wrapper {overflow:hidden;}

But this is not helpful: When i diminish my “Google Chrome” window, all 3 images are located one beneath its preceding image.
Any suggestion ?
Thanks

2

Create a surrounding div with width = width(img1) + width(img2) + width(img3) + width(paddings) + width(margins).


<div id="images">
  <img src="img1.jpg"/> <!-- Let's say this one is 100px wide -->
  <img src="img2.jpg"/> <!-- Let's say this one is 200px wide -->
  <img src="img3.jpg"/> <!-- Let's say this one is 400px wide -->
</div>



#images {
  width: 700px;  /* 100 + 200 + 400 = 700 */
}
3

Hi, he doesn’t need an extra element. Since #title_wrapper is only containig those 3 div/image elements, he can just set the width on the #title_wrapper :slight_smile:

4

True, I missed that one :slight_smile:

5

He could actually lose the 3 <div>'s containing each image and just apply the styles onto the direct <img>'s.

Noone likes divitis :).

6

Both solutions you suggested obtained the goal of images fading away from screen when diminishing browser’s window.
I had a problem applying RyanReese conseille to cancel 3 images divs because the left image has height greater than second’s thus causing the second image to be placed lower then it should. Applying “float:left” to all three images keeps 3 images at the same top level. 2 screenshots added. Hence, I’ll use initial ScallioXTX’s suggestion, not omitting the 3 images divs. Unless you can give me another idea…
Thanks a lot to you both !

7

In my solution did you clear the parent? Add overflow:hidden; to #title_wrapper in my suggestion and hopefully that will work :slight_smile:

8

I didnt apply : “float:left” to img. This code:


<style type="text/css">
  * {margin:0;padding:0;}
  #title_wrapper {width:1010px; overflow:hidden}
  img {float:left;padding:4px;}
</style>
</head>

<body>
  <div id="title_wrapper">
    <img src="logo2.gif"/>
    <img src="attention.gif"/>
    <img src="logo_small.gif"/>
  </div>
</body>
</html>

Worked excactly as you suggested. I didnt apply it excactly…
Thanks again…

9

You’re welcome :).

10

@deotpit, You did want the images fade away from screen, but they are just scrolled off screen. And the “overflow: hidden” has no effect at all, so I can’t see that your problem is yet solved. :slight_smile:

To hide the overflow and take control over fading/scrolling, you could do something like this:

#title_wrapper{
  overflow:hidden; /* hides overflow that goes outside screen */
/* uncomment if you want to protect the centre image
  margin:auto;
  min-width:700px;
*/
}
#title_wrapper div{
  margin:0 -552px 0 -526px; /* To keep the middle image centred: give the side margins the same length-difference as of the outer images, the additional length is arbitrary */
  text-align:center;
}
#title_wrapper img{
  vertical-align:top; /* top, middle, bottom, aligns the images according to the tallest image */
}



<div id="title_wrapper">
  <div>
    <img src="logo2.gif"/>
    <img src="attention.gif"/>
    <img src="logo_small.gif"/>
  </div>
</div>
11

Hi Eric,
Thanks for your post. I wouldn’t want to delay my response for too long so i can only say that your code works very nice but my understanding it may take some extra time. By the meantime i’ll just thank you for an intersting code, not yet understood on my side.
Thanks.

12

Huh, I’ve never seen equal negative sidemargins.

Where the hell’d you come up with that, Erik? Looks cool.

13

I believe he used the same thing on the float:center quiz Stomme if you want to look at that.

14

Hi Eric,
As I understand it is the “text-align:center” That centers the 3 images on the page and “vertical-align:top” that keeps them at the top of the page as desired.
Why is the right margin of the images’ div assigned a smaller value than the left margin (margin:0 -552px 0 -526px; ) and why those values are less zero and why the difference between those 2 values is arbitrary is beyond my understanding…
Thanks

15

Hi deotpit, you are right, it is the text-align vertical-align that does the image positioning.

My margin-comment was unclear in what was arbitrary, I think:

#title_wrapper div{
  margin:0 -552px 0 -526px; /* To keep the middle image centred: give the side margins the same length-difference as of the outer images, the additional length is arbitrary */
  text-align:center;

What I tried to say was; In order to make the image-container wide enough to not wrap the images when the #title_wrapper gets narrow, the negative side margins extends its width by an arbitrary length enough to keep the images on the same line.

I also thought the middle image should be in the exact centre of the window, but as the center-align applies to the group of images it would be off centre due to the different width of the two adjacent images.

So, to keep the middle image in the exact centre, the margin on the wider image’s side needs to soak up the difference. (The “arbitrary” extended margin-values’ was meant to reflect the different width of the two images. :slight_smile: )

There are other ways to achieve the same result, but this was the easiest cross-browser I thought. :wink:

16

Thanks Erik for your efforts,
With where i am now with CSS (and other utilities) i’ll have to be satisfied with less sophisticated solutions i was kindly supplied here. I’ll keep in mind the possibility you suggested and once i feel i can handle it i’ll give it another chance in my page…
Thanks again.