January 26, 200818 yr hello! Im trying to create a liquid layout... I want to have the top of the page at 90% of the window and the footer 10%, I thought this would work... #container { width: 100%; height: 100%; margin: 10px auto; background-color: #fff; color: #333; } #content { width: 100%; height: 90%; border: 1px solid gray; } #footer { width: 100%; height: 10%; border: 1px solid gray; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <link href="master.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="content">content</div> <div id="footer">footer</div> </div> </body> </html> But I only get the height of the text? Can any one suggest any tips? Thanks Ben
January 26, 200818 yr Author Thanks TT works great! #container { width: 100%; height: 100%; background-color: #fff; color: #333; position: absolute; } cool! Never attempted a liquid layout before any tips?
January 26, 200818 yr Only one tip: - use max-width and min-width so the page won't be too narrow or too wide
January 26, 200818 yr A liquid design is one, like Wikipedia, where the design moves to flow content into the whole screen, or a portion of the screen, no matter what the size of the browser window. Proponents of liquid design prefer to use all the screen space available. Liquid design can be achieved through the use of CSS, by avoiding styling the page altogether, or by using HTML tables (or more semantic divs) set to a percentage of the page. http://en.wikipedia.org/wiki/Web_design#Li...s_fixed_layouts
January 26, 200818 yr http://en.wikipedia.org/wiki/Web_design#Li...s_fixed_layouts Thanks. Is it liquid because the size of the screen is set to the how wide the browser is? Other than that I can see a difference on the Wikipedia site.
January 27, 200818 yr Author Know Im trying to float 2 divs in the content div, Ive set them to 50% each so they should sit in there? (leftcontent & rightcontent), Ive even tried a clear: both; on the content div but with no luck? The rightcontent div sits uneath the leftcontent div? <div id="container"> <div id="content"> <div id="leftcontent">left</div> <div id="rightcontent">right</div> </div> <div id="footer">footer</div> </div> #container { width: 100%; height: 100%; background-color: #fff; color: #333; position: absolute; } #content { width: 100%; height: 90%; border: 1px solid gray; clear: both; } #leftcontent { width: 50%; height: 90%; border: 1px solid gray; float: left; } #rightcontent { width: 50%; height: 90%; border: 1px solid gray; float: left; } #footer { width: 100%; height: 10%; border: 1px solid gray; }
January 27, 200818 yr You haven't took into account the border which is added to the 50% rather than being part of it so really you have 1px on the left +50% + 1px on the right . So there isn't enough space for them to both be on the same line as together as it totals 100% and 4px.
January 27, 200818 yr try to reset all margins and paddings * { padding:0; margin:0; } if that won't work try to change width:50% to width:49% [edit] right.. I didin't saw the borders. just change the the width.
Create an account or sign in to comment