IE Problem: Variable width 2 column site, works in Firefox, not IE. Why?

@jtillwickOct 04.2006

I am trying to achieve a completely variable 2 column design. Works flawlessly in Firefox and Opera, yet of course IE has to screw it up.

Anyone get something like this working?

Anyone can tell me why mine doesn’t work in IE?

~~[url]~~http://tillwicks.us/test2.php[/url]

Thanks

~~[B]~~Edit:[/B] URL was wrong. Fixed!

to post a comment

CSS

9 Comments(s) _↴

@drhowarddrfineOct 04.2006 — #<>

@WebJoelOct 04.2006 — #I can't seem to access or view your CSS file. -Is "content" floated-left against "menu"? This would explain the 'drop down' when the window is resized smaller.

I would make "menu' be defined width, and content be percentage of what is left over. That would make it re-sizeable.

This is a 2-column layout? What is that thick red 'border' thing on the far right of "content"? It looks like a third column, with no width. Since I can't see you rCSS I can't experiment with this. :o

@jtillwickauthorOct 04.2006 — #Thanks for the reply.

I can't seem to access or view your CSS file...Since I can't see you rCSS I can't experiment with this.[/QUOTE]
The css file in question is located at http://tillwicks.us/css/test.css. I have no problems accessing this file.

As you may be able to tell from the css file, the menu box is the only thing floated, and it is floated left.

As I said, I am trying to achieve a completely variable 2 column design. That being said, I really only want the right colum to be variable and I want the left column (menu) to be a fixed size.

The menu column is a fixed size of 180px and is floated left. The content column is a block level element with no float and no size specified.

This is a 2-column layout? What is that thick red 'border' thing on the far right of "content"? It looks like a third column, with no width.[/QUOTE]
As for the red bar on the right. I am trying to create a 2 column variable site, however, inside the right most column (the content div) I also want another variable width box with a right padding of 3px (content-win div). This is not a problem, as it is simply a block level element inside the content column. Since the content column has a bg color of red and the box inside is light blue, this is where the red comes from.

The problem I need sovled here is the drop down of the content column in internet explorer when the window is made smaller than 780px.

To achieve the min-width in IE I have set up a window element which contains the menu and content. This window element has a min-width css value of 780px (for firefox, opera) and contains a div element of 780px width and 0px height (for IE) so that the window element can't be made smaller than 780px. Also, since the menu is of width 180px, the content element has a min-width css value of 600px (firefox, opera) and a div element of 600px width and 0px height inside of it as well (IE fix).

So, now you sould understand my design and what I want to achieve.

So why is my site broken in IE?

[B]Edit: [/B] Made slightly less confusing.

@jtillwickauthorOct 04.2006 — #<>[/QUOTE]
Not really sure what that is.

@WebJoelOct 04.2006 — #I see the css now. Before, I kept getting some weird download bar and an error page (page not found on server, etc).

Anyway, read & re-read your request, -still not sure what you're trying to do (other than not have "content" drop below "menu").

@jtillwickauthorOct 04.2006 — #That is pretty much all I am looking for, a way to prevent IE from dropping the content div below the menu div.

Don't want to put any width attribute on the content div because I want it to be able to stretch as big as the user's window gets. Also, considering that the menu div has a absolute width of 180px, setting a percentage width on the content div will not work correctly.

@jtillwickauthorOct 05.2006 — #Well, I solved it on my own. Thanks for all the input.

For anyone interested in this design, here is the code:

[B][SIZE=3]/index.html[/SIZE][/B]

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
  <head>
   <title>Buddha</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link type="text/css" rel="stylesheet" href="/css/main.css" />
  </head>
 
  <body>
   <div class="container">
   <div class="window">
   <div class="min_width_780">&nbsp;</div>
   <div class="menu">
   <h1>Menu</h1>
   </div>
   <div class="content">
   <div class="min_width_600">&nbsp;</div>
   <div class="content_win">
   <div class="min_width_595">&nbsp;</div>
   <h1>Content</h1>
   </div>
   </div>
   <div class="clear_all">&nbsp;</div>
   </div>
   </div>
  </body>
 
 </html>[/CODE]

[B][SIZE=3]/css/main.css[/SIZE][/B]

[CODE]body, html {
 overflow:					hidden;
 width:						100%;
 height:						100%;
 margin:						0;
 padding:					0;
 border:						0;
 }
 
 body * {
 margin:						0;
 padding:					0;
 border:						0;
 font-size:					14px;
 font-weight:					normal;
 font-family:					Verdana, Arial, Helvetica, Sans-Serif;
 }
 
 .container {
 position:					absolute;
 overflow:					auto;
 width:						100%;
 height:						100%;
 background:					#C5C5C5;
 }
 
 .window {
 position:					relative;
 margin:						20px;
 min-width:					785px;
 min-height:					700px;
 height:						auto !important;
 height:						700px;
 border:						solid black 1px;
 }
 
 .menu {
 position:					absolute;
 margin:						0;
 padding:					0;
 width:						180px;
 height:						100%;
 border-right:					solid black 1px;
 }
 
 .content {
 margin:						0;
 padding:					0 5px 0 181px;
 min-width:					595px;
 min-height:					700px;
 height:						auto !important;
 height:						700px;
 background:					red;
 }
 
 .content_win {
 min-width:					595px;
 min-height:					700px;
 height:						auto !important;
 height:						700px;
 background:					#3D8EFF;
 }
 
 .min_width_780 {
 overflow:					hidden;
 width:						780px;
 height:						0;
 font-size:					0;
 }
 
 .min_width_600 {
 overflow:					hidden;
 width:						600px;
 height:						0;
 font-size:					0;
 }
 
 .min_width_595 {
 overflow:					hidden;
 width:						595px;
 height:						0;
 font-size:					0;
 }
 
 .clear_all {
 overflow:					hidden;
 clear:						both;
 height:						0px;
 font-size:					0px;
 }[/CODE]

[B]Edit:[/B] Forgot a semicolon after position: absolute

@LeeUOct 05.2006 — #How did you solve it?

@jtillwickauthorOct 06.2006 — #How did you solve it?[/QUOTE]
Well, first of all, IE has a problem with scrollbars. If scrollbars appear because content is stretched beyond the viewable area of the window, the scrollbars appear attached to the <html> element. For some reason IE does not count the width (or height if horizontal scrollbars appear) of the vertical scrollbar. Sounds confusing I know, but basically if your content has a width of 100%, but the conent is stretched vertically so you would have to scroll down, then you would also have to scroll right.

It is really hard to explain and I did a poor job.

So, to fix this, I set the overflow on the html and body tags to hidden, created a .container class and set it's height and width to 100% and it's overflow to auto, I also gave it a position: absolute (otherwise the content appears on top of the scrollbars, ODD). For some reason, IE does count the width of the scrollbars on divs. So, that fixes the first problem.

Next, since the menu div was floated left in my first example, and the content div wasn't specifically set to float, any html tag appearing after a floated element will also float "inline" without specifically setting it to float. The problem with this method was that even thought the div that contains the menu and content has a min-width of 780px, when the window was made smaller than 780px, the content div would be dropped down below the menu div, even though the container (.window in this case) still showed a width of 780px. Firefox and opera do not drop the content div down below the menu div, so this is obviously an IE bug.

So, to fix this problem, I simply used the old absolutely positioned element inside of a relatively positioned element trick. Since my menu div is set to 180px and i wanted my content div to stretch the width of the users window (min-width of 780px though, so no smaller than that) I couldn't specify a width. So I set my content to have a left padding of 180px and since my menu div is absolutely positioned, it just sits on top of the content div (padding left fixes that). Since it is absolutely positioned inside a relatively positioned div, I can set both .menu and .content to a height of 100% and they will always stretch the length of the page depending on the content.

Anyone lost yet???

I have provided all the code necessary to reproduce this, so it would probably make more sense to take my code and mess around with it so that you can understand how it works.

[B]Quirk[/B] One quirk does still exist though, and suprisingly it is in Firefox. When the window is made 780px or smaller, the right padding disappears. Working on a fix for this now.

Also in #CSS _↴

Demented <DIV> block implementation 100% accordion height: for the legends tbody scroll for explorer

Success!

Help @jtillwick spread the word by sharing this article on Twitter...

Tweet This

IE Problem: Variable width 2 column site, works in Firefox, not IE. Why?

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

IE Problem: Variable width 2 column site, works in Firefox, not IE. Why?

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴