tsilenzio Posted January 10, 2008 Share Posted January 10, 2008 I am trying to make a frame for my site, and ive tried so many times to do this but fail, im sure it can be done anyways im trying to make a liquid layout (Expands and shrinks when the browser is expanded or shrinks) Here is a picture of the layout: Specs: Body Margin: 10px [Header Bottom Margin: 10px Footer Top Margin: 10px Sidebar Width: 190px Sidebar Right Margin: 10px Main Content Width: Liquid, Absorb what ever is left out of the 200 px's (190px [sidebar Width] + 10px [sidebar Margin] used (210px if you include the body margin) Also once it is smaller then 500 px's it stays at 500px's If this is not possible with DIVs and CSS then I will just switch back to the use of tables Quote Link to comment Share on other sites More sharing options...
tsilenzio Posted January 10, 2008 Author Share Posted January 10, 2008 Heres what I have so far: <html> <head> <title>Two Column Liquid Layout With Floating Boxes</title> <style type="text/css"> <!-- body { margin: 10px; padding: 0px; } #header { background: #0f0; width: 100%; } #leftcol { background: #f00; float: left; width: 19%; height: 500px; } #content { float: right; width: 80%; height: 500px; background-color: #999999; } #footer { background: #0f0; clear: both; width: 100%; } --> </style> </head> <body> <div id="header">Header</div> <div id="sidebar">Sidebar</div> <div id="content">Main Content</div> <div id="footer">Footer</div> </body> </html> Image: Problems With Current Layout: Sidebar shrinks smaller then 190px No Margin between Sidebar and Main Content Pseudo Margin for Sidebar shrinks Once Main Content is smaller then 500 pixels it still will keep shrinking If none of this is possible then please let me know I will probably just go back to the use of Tables instead, I thank you very much for all of your time! =] - tsilenzio Quote Link to comment Share on other sites More sharing options...
tsilenzio Posted January 10, 2008 Author Share Posted January 10, 2008 Oh I think i found somthing very valuable, my book that taught me CSS never mensioned max-width, min-width =] Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted January 10, 2008 Share Posted January 10, 2008 Oh I think i found somthing very valuable, my book that taught me CSS never mensioned max-width, min-width =] doesn't work in every browser Quote Link to comment Share on other sites More sharing options...
tsilenzio Posted January 10, 2008 Author Share Posted January 10, 2008 Oh I think i found somthing very valuable, my book that taught me CSS never mensioned max-width, min-width =] doesn't work in every browser Do you know if it will work in Firefox + Internet Explorer? If so what versions of internet explorer? =/ Quote Link to comment Share on other sites More sharing options...
tsilenzio Posted January 10, 2008 Author Share Posted January 10, 2008 I see it dont work with internet exploer 6 ='[ Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted January 10, 2008 Share Posted January 10, 2008 I see it dont work with internet exploer 6 ='[ It will not render in any IE browsers; it does work in FF. Quote Link to comment Share on other sites More sharing options...
tsilenzio Posted January 10, 2008 Author Share Posted January 10, 2008 Yea its the one I use but im trying to make one that will work on both, oh well ill just use tables, atleast I learned CSS =] closest thing I found was [http://css.maxdesign.com.au/floatutorial/tutorial0816.htm] but that max width wont work in IE, and 50% of the ppl use IE so i cant just ignore that many ppl =/ Quote Link to comment Share on other sites More sharing options...
AndyB Posted January 10, 2008 Share Posted January 10, 2008 There are plenty of methods for getting IE to emulate min- and max-width - and none that require tables - linked here http://www.google.com/search?q=max+width+IE+CSS&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a Quote Link to comment Share on other sites More sharing options...
tsilenzio Posted January 11, 2008 Author Share Posted January 11, 2008 Yay I finally got it to work! Okay incase anyone else down the road has the same problem I will post my fix for the problem <html> <head> <title>Untitled Document</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; background-color: #666666; text-align: center; } div#container { width: expression(document.body.clientWidth < 740 ? "700px" : document.body.clientWidth - 40 ); /* Emulates min-width for Internet Explorer, Other browsers will skip this code */ min-width: 700px; /* Set a min-width for browsers other then Internet Explorer */ margin: 10px; /* Some browsers will omit the right margin */ text-align: center; } div#header { height: 100px; width: 700px; border-color: #000000; border-width: 1px; border-style: solid; margin: 10px auto 0px auto; } div#nav { height: 35px; width: 700px; margin: 0px auto 10px auto; border-color: #000000; border-style: solid; border-width: 1px 1px 1px 1px; } div#leftcol { width: 190px; height: 100px; float: left; border-color: #000000; border-style: solid; border-width: 1px; margin: 0px 10px 0px 0px; } div#content { float: none; width: auto; height: 100px; border-color: #000000; border-style: solid; border-width: 1px; margin: 0px auto 0px auto; } div#footer { height: 35px; width: 700px; margin: 10px auto 10px auto; border-color: #000000; border-style: solid; border-width: 1px; } --> </style> </head> <body> <div id="container"> <div id="header">Header</div> <div id="nav">Navagation</div> <div id="leftcol">Sidebar</div> <div id="content">Main</div> <div id="footer">Footer</div> </div> </body> </html> There is still one problem I cannot seem to fix at the moment =/ but i will keep trying. In Internet Explorer The Sidebar will put a margin between itself and the Main Content, but in firefox, it does not put the margin ??? Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted January 11, 2008 Share Posted January 11, 2008 min/max width will work in IE7. you should move the css for the IE expression into an IE-only stylesheet or conditional comment because it is not valid css. the differences in margin you have noticed between IE and FF are down to the different default styles that those browsers use. you will need to reset some of the defaults. for example: html, body, div, span, h1, h2, h3, h4, h5, h6, ul, ol, li, p {padding:0; border:0; margin:0;} Quote Link to comment Share on other sites More sharing options...
tsilenzio Posted January 12, 2008 Author Share Posted January 12, 2008 the differences in margin you have noticed between IE and FF are down to the different default styles that those browsers use. you will need to reset some of the defaults. for example: html, body, div, span, h1, h2, h3, h4, h5, h6, ul, ol, li, p {padding:0; border:0; margin:0;} I tried this it didnt work =[ HOWEVER I was trying to find out other things and was not even meaning to but when I added "overflow: auto;" to the div#content (The div that holds the main content) in css, it fixed the problem, i dont know why ??? 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.