twinklerip Posted January 25, 2006 Share Posted January 25, 2006 i can't get this to work. i've been trying a lot of things... fixed positioning, floats etc. but not working. <html><head><style type="text/css">body{text-align:center;}#bdy{width:770px; height:auto;}#header{height:100px; width:100%;}#navbar{ float:left; width:10em; /*height:???; height of #bdy is unknown. so if i use 100%, the result is same as auto. i want it's height = (height of #bdy - height of #header) */ }#navbar2{ float:right; width:20em; /*height:???; just like #navbar*/ }#content float:left; /*should i use float:left? */ width:auto; height:auto; /*the height of #content is unknown and it determines the height of #bdy*/ } </style></head><body><div id="bdy"> <div id="hearder"> </div> <div id="navbar"> </div> <div id="content"> </div> <div id="navbar2"> </div></div></body></html> The page should look something like this:#bdy should appear in the middle and everything else should be in side that div tag. Link to comment Share on other sites More sharing options...
Err Posted January 25, 2006 Share Posted January 25, 2006 Have you tried tables? It would simplify things. <style type="text/css">.maintable { width: 100%;}.topcell { text-align: center; font-size: 20px;}.middlecell { width: 73%;}.bottomheight { height: 200px;}</style><table border="1" class="maintable"> <tr> <td colspan="3" class="topcell"> Header Content Table </td> </tr> <tr class="bottomheight"> <td> Content Left </td> <td class="middlecell"> Content Middle </td> <td> Content Right </td> </tr></table> Link to comment Share on other sites More sharing options...
twinklerip Posted January 25, 2006 Author Share Posted January 25, 2006 not exactly what i was looking for. thanx anyways. Link to comment Share on other sites More sharing options...
Err Posted January 26, 2006 Share Posted January 26, 2006 not exactly what i was looking for. thanx anyways.<{POST_SNAPBACK}> Something like this?<html><head><style type="text/css">div { border: 1px solid black; text-align: center;}#bdy { width:770px;}#header { height:100px; width:100%;}#navbar { height: 130px; width: 150px; display: inline;}#navbar2 { height: 130px; width: 150px; display: inline;}#content { width: 466px; height: 130px; display: inline;}#maindiv { width: 100%; height: 130px;}</style></head><body><div id="bdy"><div id="header">Top Content</div><div id="maindiv"><div id="navbar">Left Content</div><div id="content">Main Content</div><div id="navbar2">Right Content</div></div></div></body></html> I could not get the height and width to work on firefox, it perhaps has to deal with the display being inline... I don't know. But you can add content in and perhaps adjust it accordingly. Link to comment Share on other sites More sharing options...
~Shinta Posted January 26, 2006 Share Posted January 26, 2006 Have you tried tables? It would simplify things.<style type="text/css">.maintable { width: 100%;}.topcell { text-align: center; font-size: 20px;}.middlecell { width: 73%;}.bottomheight { height: 200px;}</style><table border="1" class="maintable"> <tr> <td colspan="3" class="topcell"> Header Content Table </td> </tr> <tr class="bottomheight"> <td> Content Left </td> <td class="middlecell"> Content Middle </td> <td> Content Right </td> </tr></table> <{POST_SNAPBACK}> Tables? Where have you been? Link to comment Share on other sites More sharing options...
Err Posted January 26, 2006 Share Posted January 26, 2006 Tables? Where have you been? I do something wrong? Link to comment Share on other sites More sharing options...
~Shinta Posted January 26, 2006 Share Posted January 26, 2006 Well, according to the w3c, maybe. According to the standards uniformed public, no.http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layoutIt's alright though, you are here on the forums to learn things, so you did nothing wrong. Link to comment Share on other sites More sharing options...
Err Posted January 26, 2006 Share Posted January 26, 2006 well that's good to know. But I'm sticking with tables for simplitys sake, DIV's are hard as heck. Link to comment Share on other sites More sharing options...
~Shinta Posted January 26, 2006 Share Posted January 26, 2006 The code looks alot more neat, and make editting alot more easier. Link to comment Share on other sites More sharing options...
twinklerip Posted January 27, 2006 Author Share Posted January 27, 2006 Something like this?positioning is off. i think i'm gonna go with div and table combination. as div is harder and table is messy. div - table combination would minimize the mess and would be easy. Link to comment Share on other sites More sharing options...
Err Posted February 10, 2006 Share Posted February 10, 2006 I wanted a good solution for this problem myself and I came up with one. <style type="text/css">#holder { width: 620px; text-align: left; margin: 5px;}.left, .right, .center,.header, .footer { border: 1px solid black; padding: 2px; text-align: center;}.left { float: left; width: 100px;}.right { float: left; width: 100px;}.center { float: left; width: 398px;}.header { width: 610px;}.footer { width: 610px;}</style> <div id="holder"> <div class="header">Header Div</div> <div class="left">Left Div</div> <div class="center">Center Div</div> <div class="right">Right Div</div> <div class="footer">Footer Div</div></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now