Smaller Window Size Makes Content Break (IN IE)

[Zeradin]

Hello I'm working on a website and when the window size shrinks all the content jumps down the page in internet explorer. It doesn't happen in firefox except in one page. I know this must be a common problem. I want for when it reaches whatever its width is to stop and then you'll just have to scroll right to see the rest of it. Thanks.

[haku]

You can set min-width on the containing element. It won't shrink beyond that size. Though be warned, this selector does not work in IE6, so you will have to emulate it (google around, there are a few methods).

[Zeradin]

The only way I can get that to work is to make the content like 950, the container 1000 and the wrapper 1200 (min-widths) and now i have a scroll bar all the time. there's no other way to get the content to not jump down like that? Seems ridiculous. I tried doing some absolute positioning instead of floats, but that didn't work either for some reason.

[Zeradin]

what is making it work in FF but not in IE I guess is what would help me. It works perfectly in firefox. the % elements get smaller until they've reached their smallest width and then they just stick there.

[haku]

I'd say its most likely a problem in your code.

[Zeradin]

Well yes, but what kind of problem could it be only for ie? Here's my code in case anyone has a second to look at it:

 

CSS:

body  {
font: 115% Times New Roman, serif, Garamone, Century, serif;
font-weight: bold;
color: #21130e;
background: url(bg.jpg);
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}

#wrapper {
background: url(sidebar_block.jpg) repeat-y;
height: 100%;
min-width: 950px;
}
.twoColFixLtHdr #container { 
width: 100%;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: url(top_bg.jpg) top left no-repeat;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: none;
text-align: left; /* this overrides the text-align: center on the body element. */
position: relative;
min-width:950px
} 
.twoColFixLtHdr #header { 
background: none; 
padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
height: 135px;
} 
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: none; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 0px;
border: none;
height: 500px;
position: relative;
z-index: 2;
}

.twoColFixLtHdr #mainContent { 
margin: 5px 50px 0 189px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
border: none;
position: relative;
min-height: 600px;
min-width: 950px;
} 
.twoColFixLtHdr #footer { 
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#21130e; 
color: #EEEEEE;

 

HTML:

<body class="twoColFixLtHdr">
<div id="wrapper">
<div id="container">
<?php include('includes/menu.php');?>
<a href="index.php" id="logo"></a>
  <div id="header">
  <!-- end #header --></div>
  <div id="sidebar1">
    
  <!-- end #sidebar1 --></div>
    <div id="mainContent">
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- end #container --></div>
</div>
</body>

[haku]

Now we're getting somewhere! Some code

 

So, you should only need the min-width on the wrapper. Everything else is contained inside that, so if it can't shrink, neither can they.

 

You say it's not working in IE - which one? There are three releases out there in mainstream use.