lemmin Posted February 23, 2010 Share Posted February 23, 2010 I am trying to float a div on the left and one on the right with a content div in the middle. Everything works fine until I try to set a height for the content div. Here is the code: <html> <head> <style> #content { background-color:blue; border: 2px solid black; } #left { background-color:red; width:28px; height:420px; float:left; } #right { background-color:green; width:14px; height:247px; float:right; } </style> </head> <body> <div id="left"></div> <div id="right"></div> <div id="content">Content in here</div> </body> </html> If you paste that code into an html document and view it, you will see it working how I want it. However, place a height:420px into the #content style and that div magically gains margins on the left and right. I've tried killing any inherent margins and padding on everything, but that extra space doesn't seem to exist in the styles anywhere. All I am trying to do is get a "min-height" on the content div and, although IE doesn't support that style, "height" effectively works the same. I am using a work-around where the height only gets sets in IE and all other browsers get a min-height. If there is a different way I can do this, that would help too. Thank you. Quote Link to comment Share on other sites More sharing options...
haku Posted February 24, 2010 Share Posted February 24, 2010 Which IE? All of them behave differently. But, I'm assuming you mean IE6, since you mentioned that min-height doesn't work. Give the floated elements 'display:inline-block' and see if that helps. Quote Link to comment Share on other sites More sharing options...
lemmin Posted February 26, 2010 Author Share Posted February 26, 2010 I'm actually using IE8 Beta Version 8.0.6001.18241. MSDN Library shows that min-height and min-width are legal in IE, but they don't work in this version at least. I have tried all the different display types, but none fix this problem. Thanks for the help. Quote Link to comment Share on other sites More sharing options...
haku Posted February 27, 2010 Share Posted February 27, 2010 They are supported in IE8. Why are you using a beta version? Quote Link to comment Share on other sites More sharing options...
arbitter Posted March 13, 2010 Share Posted March 13, 2010 Do they really work? Because I have IE8 and min-height or max-height doesn't work here eather, have to do the workaround also used for IE6 Quote Link to comment Share on other sites More sharing options...
haku Posted March 13, 2010 Share Posted March 13, 2010 They definitely work in IE7 and IE8. So if you are having problems, your problem is somewhere else. Have you validated your CSS on the W3C site? Also, why are you using a beta version of IE8? Quote Link to comment Share on other sites More sharing options...
arbitter Posted March 13, 2010 Share Posted March 13, 2010 I personally havn't validated them, I wouldn't really know what validation type to use. I used the xhtml validation once but it gave 'problems' with the closer for the </head> and the </body> and stuff like that... I'm not the starter of this topic, I'm using the normal versio of IE8. Yet I get all the problems they had n IE6 and I don't understand why. Anyhow, it's better like this, at least I can 'test' it for IE6. I've still got many problems with the site-layout that work perfect in Chrome, Safari, FF, Opera, but not in IE8. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.