Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
i have 3 images in the header with same height but different width from which 2 of them floating left and one is floating to right. The width of the header is 100% but the total size of the 3 images is 1000px. But when i Resize the width of the browser less than 1000px the image on the right side drops to the next like and if i reduces the width of the browser less then the total width of the two remaing images then the middle image also drops to the next line and moves the third image below it. I just want to have these three images remain at the same line no matter how less the width of the browser . Can anyone guide me in this regard.
Thanks -
Floating isn't the way to go. You may need to absolutely position the images and set the overflow of the container.
-
Is there anyway we can see this on an actual site, or is it only in a local testing stage?
-
Or there is another way around this still using the float method.
If you already have your three images inside a "header" <div> then just wrap the header inside another <div> tag. (note: You can call it whatever you want.)
Then set your newly created <div> tag to width:100%, and set your existing header tag to width:1000px; and margin:auto; (Adjust your padding and colors as you like.)
Now that you have your images wrapped inside another <div> you should see the images stay in place.
This technique works for me, but let me know if you run into trouble. -
thanks for all of u to give suggestions. But the thing is that i dont want to keep the 3 images at fixed 1000px. i want to have them browser width dependent as they are floating but ya we can say that the minimum width is 1000px.
-
then use min-width instead of width (and an appropiate js emulation of min-width for IE6)
-
- CommentAuthorthedotmack
- CommentTimeJan 28th 2008
do what kylesteed said but dont float the images.
<div style="width:100%">
<div style="width:1000px"><img /><img /><img /></div>
</div>
no floating necessary. the easiest answer is always the best one.
1 to 7 of 7