hi to all How to center my float div inside the parent div, and why in ie6 min width works but sometime different behavior. If I was trying to resize the window it was broken (second table move to bottom) and the horizontal scroll bar doesn’t appear. thanks in advance here is the link http://www.tirso.webberzsoft.com/fixed_header_min_width.php jhun here is the code <!-- IE in quirks mode --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="css/css.css" type="text/css"> <style type="text/css"> body{ margin:0; padding:100px 0 0 150px; } div#header{ position:absolute; top:0; left:0; width:500%; height:100px; background:lime none repeat scroll 0 0; } div#left-sidebar{ position:absolute; top:100px; left:0; width:150px; height:100%; background:yellow none repeat scroll 0 0; } @media screen{ body>div#header{ position:fixed; } body>div#left-sidebar{ position:fixed; } } * html body{ overflow:hidden; } * html div#content{ height:100%; width: 100%; overflow:auto; } #wrapper{ min-width:1000px; width:[removed]document.body.clientWidth < 1002? "1000px": "auto" ); } </style> </head> <body> <div id="header"> header </div> <div id="left-sidebar"> left-sidebar </div> <div id="content"> <div id="formdiv"> <div id="wrapper" style="border: 1px solid #00CCCC" align="center"> <div style="width:46%;float:left"> <div style="margin:auto"> <div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr"> <div style="padding:20px"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <th scope="col"><label> <select name="select" id="select"> </select> </label></th> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </div></div></div></div></div></div></div></div> </div> </div> <div style="width:46%;float:left"> <div style="margin:auto"> <div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr"> <div style="padding:20px"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <th scope="col"> </th> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </div></div></div></div></div></div></div></div> </div> </div> <div style="clear:both"></div> </div> </div> </div> </body> </html> Code (markup):
First, min-width has never worked in IE6 so you are mistaken. Second, why are you wanting to work in quirks mode? That makes no sense at all and I for one will never help anyone who wants to do so but I have the feeling you are only copying this from somewhere else and don't know the consequences. Correct?
hi, thanks for your response. I know that min-width doesn't work in ie6, that's why I used javascript expession. I copied this in http://limpid.nl/lab/css/fixed/header. I was not so familiar using fixed header and first encounter using min-width and the reason why I'm here to ask for any help. Thanks Tirso
Maybe one thing at a time. The folks at Limpid wouldn't write bad code (that's Anne's company isn't it?). You're mixing bad code with good code, and no I'm not talking about the CSS expression there. You've got inline styles, some of them like margin: 0 auto but then others like "center"... get rid of that. In fact, just make your HTML barebones to start. You can always add junk later. Drop the quirksmode— I know that used to be what everyone had to use back in the day to get IE6 to work with the fixed-elements stuff, but people have since found ways to do it in Standards Mode now too, so you're going to stick with that. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" [b] "http://www.w3.org/TR/html4/strict.dtd">[/b] <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TITLE HERE</title> <link rel="stylesheet" href="css/css.css" type="text/css"> <style type="text/css"> * { margin: 0; } #header{ } #left-sidebar{ } #wrapper{ min-width:1000px; [b] margin: 0 auto; /*center the thing*/ border: 1px solid #0cc;[/b] } [b]* html #wrapper { width: 1000px; width: expression((document.body.clientWidth < 1002? "1000px": "auto" ); } [/b] [b].someClass { width:46%; float:left; } .anotherClass { margin: 0 auto; only works with a width, so pls set one! } .paddingClass { padding: 20px; } table { border-collapse: collapse; border: 1px solid #colour; } table th, table td { border: 1px solid #colour; } [/b] </style> </head> <body> <div id="header"> header </div> <div id="left-sidebar"> left-sidebar </div> <div id="content"> <div id="formdiv"> <div id="wrapper"> <div class="someClass"> <divclass="anotherClass"> <div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr"> <div class="paddingClass"> <table> <tr> <th scope="col"><label> <select name="select" id="select"> </select> </label></th> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </div></div></div></div></div></div></div></div> </div> </div> <div class="someClass"> <div class="anotherClass"> <div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr"> <div class="paddingClass"> <table> <tr> <th scope="col"> </th> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </div></div></div></div></div></div></div></div> </div> </div> </div> </div> </div> </body> </html> Code (markup): Nasty nested divitis, you've got 6 mos to live. Looks like you're trying to do three techniques at once. Anyway, first thing is to center the #wrapper and let even IE6 see a min-width. Always state a regular with for IE6 only so that folks using IE6 who are being smart and surfing with the security settings on HIGH still get something. HIGH blocks scripts, and CSS expressions are JS as well. In any case, start with that minimal-er code and play with the #wrapper until you see exactly what IE6 will and won't do. Get comfortable with it. If you want a GOOD reference to the fixed header and sidebar stuff, I strongly recommend you check this one out from Paul: http://www.pmob.co.uk/temp/fixed-header-footer-left-new.htm He has some others listed too, from his main page, www.pmob.co.uk, just look for "Fixed position examples in standards mode: (Use with care)". I imitated one of his demos, maybe that one before it was updated, here. Pretty much just more of the same. The rounded corners, always save for last. Wait until your other stuff works, before tacking those on. There's a nice example of things like corners done from just one circle image at visibility: inherit: http://www.visibilityinherit.com/code/rounded-corners-css-plus-images.php I think they are very nice techniques.