I have two images on one line. One is floated left, the other right.
<style>
.floatRight {float:right;}
.floatLeft {float:left;}
</style>
...
<div class="floatLeft"><img src=http://www.webdeveloper.com/forum/archive/index.php/"/beta/online-Logo2.jpg" alt=""></div>
<div class="floatRight"><img src=http://www.webdeveloper.com/forum/archive/index.php/"/beta/online-Logo3.jpg" alt=""></div>
This works fine except for if the browser window's width is less than the width of both of the images, they wrap on to two lines and it looks wrong. I tried putting those two div's in another div with style="white-space:nowrap;" but that doesn't work.
How do I make these two images stay on the same line when the browser window's width is too small?I think the only way to do that is to not use <div>s. <div>s follow the flow. So if the width becomes to small, they will wrap. I think if you floated them both left, it might work a little better. If you must have them stay though, then I think you'll have to go with a table. Check around a little more though, I may be wrong on this one.I guess I'll just have to keep using a table for this one until I find something that works. I have this problem often because I have quite a few things that are floated left and right on the same line.I just thought of something else that might work.
Wrap the two image divs with a wrapper div and set the width! That should do it.[EDIT]
still workin on it. i'll get it soon.Like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>2 images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
/* <!-- m --><a class="postlink" href="http://www.svendtofte.com/code/max_width_in_ie/">http://www.svendtofte.com/code/max_width_in_ie/</a><!-- m --> */
div {
min-width:250px;
width:expression(document.documentElement.clientWidth < 250? "250px": "auto" );
}
-->
</style>
</head>
<body>
<div>
<img style="float:left;" alt="MyImage" src=http://www.webdeveloper.com/forum/archive/index.php/"MyImage.gif" height="25" width="100" />
<img style="float:right;" alt="MyImage" src=http://www.webdeveloper.com/forum/archive/index.php/"MyImage.gif" height="25" width="100" />
</div>
</body>
</html>Yeah, that is the idea, but blue had the <img>s wrapped with <div>s.Thanks for the link to that page Fang. I didn't even know you could use the "expression" technique like that in IE for the CSS properties it doesn't support.
There is one problem with this code. The line with the images on it will wrap when the browser window is between 1 and 20px more than the min-width in IE. Here's what I did to fix it so that line never wraps in any browser:
<style>
#headerImgs{
width:expression(document.documentElement.clientWidth < 763? "742px": "auto" );
min-width:742px;
}
</style>
...
<div id="headerImgs">
<div style="float:left;"><img src=http://www.webdeveloper.com/forum/archive/index.php/"/beta/online-Logo2.jpg" alt="" width="317" height="77"></div>
<div style="float:right;"><img src=http://www.webdeveloper.com/forum/archive/index.php/"/beta/online-Logo3.jpg" alt="" width="425" height="77"></div>
</div>
As you can see, the sum if the width of both images is 742px. You would think using this in the CSS would work:
width:expression(document.documentElement.clientWidth < 742? "742px": "auto" );
Now look at this page (<!-- m --><a class="postlink" href="http://buildingboom.com/beta/header-2.htm">http://buildingboom.com/beta/header-2.htm</a><!-- m -->) in IE. Resize the window so the width is between 742 and 762 (the browser width is displayed in the text field). The line will wrap.
For some reason in IE, there is a 20px offset. I'm not sure why, but changing <742 to <763 fixes the problem.Adding this will reduce the effect:
* {margin:0;padding:0;}
If the window is reduced quickly it can still occur due to a lag in the re-calculation time.
<style>
.floatRight {float:right;}
.floatLeft {float:left;}
</style>
...
<div class="floatLeft"><img src=http://www.webdeveloper.com/forum/archive/index.php/"/beta/online-Logo2.jpg" alt=""></div>
<div class="floatRight"><img src=http://www.webdeveloper.com/forum/archive/index.php/"/beta/online-Logo3.jpg" alt=""></div>
This works fine except for if the browser window's width is less than the width of both of the images, they wrap on to two lines and it looks wrong. I tried putting those two div's in another div with style="white-space:nowrap;" but that doesn't work.
How do I make these two images stay on the same line when the browser window's width is too small?I think the only way to do that is to not use <div>s. <div>s follow the flow. So if the width becomes to small, they will wrap. I think if you floated them both left, it might work a little better. If you must have them stay though, then I think you'll have to go with a table. Check around a little more though, I may be wrong on this one.I guess I'll just have to keep using a table for this one until I find something that works. I have this problem often because I have quite a few things that are floated left and right on the same line.I just thought of something else that might work.
Wrap the two image divs with a wrapper div and set the width! That should do it.[EDIT]
still workin on it. i'll get it soon.Like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>2 images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
/* <!-- m --><a class="postlink" href="http://www.svendtofte.com/code/max_width_in_ie/">http://www.svendtofte.com/code/max_width_in_ie/</a><!-- m --> */
div {
min-width:250px;
width:expression(document.documentElement.clientWidth < 250? "250px": "auto" );
}
-->
</style>
</head>
<body>
<div>
<img style="float:left;" alt="MyImage" src=http://www.webdeveloper.com/forum/archive/index.php/"MyImage.gif" height="25" width="100" />
<img style="float:right;" alt="MyImage" src=http://www.webdeveloper.com/forum/archive/index.php/"MyImage.gif" height="25" width="100" />
</div>
</body>
</html>Yeah, that is the idea, but blue had the <img>s wrapped with <div>s.Thanks for the link to that page Fang. I didn't even know you could use the "expression" technique like that in IE for the CSS properties it doesn't support.
There is one problem with this code. The line with the images on it will wrap when the browser window is between 1 and 20px more than the min-width in IE. Here's what I did to fix it so that line never wraps in any browser:
<style>
#headerImgs{
width:expression(document.documentElement.clientWidth < 763? "742px": "auto" );
min-width:742px;
}
</style>
...
<div id="headerImgs">
<div style="float:left;"><img src=http://www.webdeveloper.com/forum/archive/index.php/"/beta/online-Logo2.jpg" alt="" width="317" height="77"></div>
<div style="float:right;"><img src=http://www.webdeveloper.com/forum/archive/index.php/"/beta/online-Logo3.jpg" alt="" width="425" height="77"></div>
</div>
As you can see, the sum if the width of both images is 742px. You would think using this in the CSS would work:
width:expression(document.documentElement.clientWidth < 742? "742px": "auto" );
Now look at this page (<!-- m --><a class="postlink" href="http://buildingboom.com/beta/header-2.htm">http://buildingboom.com/beta/header-2.htm</a><!-- m -->) in IE. Resize the window so the width is between 742 and 762 (the browser width is displayed in the text field). The line will wrap.
For some reason in IE, there is a 20px offset. I'm not sure why, but changing <742 to <763 fixes the problem.Adding this will reduce the effect:
* {margin:0;padding:0;}
If the window is reduced quickly it can still occur due to a lag in the re-calculation time.