IE7 div not stretching to fill width

Deevlin

I keep getting this and I can't find the fix to it anywhere.... please help!

When a div doesn't have enough content to fill the width of the area the div doesn't fill the whole width. A gap will appear at the end of the div in IE7 browsers. I don't want to have to set fixed widths for the middle content section so that it can shrink to fit re-sizing the browser.

I've tried everything I can think of. Setting the width to 100% breaks it because the left navigation pane or right pane will no longer float. It's probably something really obvious so I can't find it on blogs. Floats, display states and random bug fixes I've found for IE7 don't seem to work.

Thanks!!

funkmonkey

I'm a little confused by your question, but if I understand what your asking, I think you need to give a relative width to this middle div. SOmething like 60% or whatever you find works. However at certain browser sizes I think you will still find the site breaks. I'm assuming your left and right divs are fixed widths. Things would work better I think if everything was relative. Maybe sometthing like 20%-60%-20%.
Without seeing the code, this is about the best I can do for you.

JonasNilsson

Hi,
I have the same problem with IE7 rearranging the divs. I have some code also =).

In FireFox and IE6 the divs behave as I want (on the same line) even whenI resize the window and make it smaller. IE7 rearranges the divs and puts the content after the left div when the window is too small. Which browser is doing this right and why the different result
The code below is just an example from a much more complex site. I've tried almost every css combination possible to make it behave as the other browsers but with no luck....

********* test.html ********************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<link rel="stylesheet" href="default.css" type="text/css" />
</head>

<body>
<div id="content">

<div id="leftfloat">
</div> 

<form action="#" method="post">

<table>
<tr>
<td>
<select name="sel1"><option>TEST TEST TEST TEST</option></select>
</td>
<td>
<select name="sel2"><option>TEST TEST TEST TEST</option></select>
</td>
<td>
<select name="sel3"><option>TEST TEST TEST TEST</option></select>
</td>
</tr>
</table>

</form>

</div> 
</body>
</html>

************* default.css *********************
#content
{
width: auto;
}
#leftfloat
{
width: 160px;
height: 200px;
float: left;
left: 20px;
top: 20px;

background-color: red;
}

IE7 div not stretching to fill width

Re: Internet Explorer Web Development IE7 div not stretching to fill width

Re: Internet Explorer Web Development IE7 div not stretching to fill width