Xyphon Posted October 23, 2009 Share Posted October 23, 2009 I'm not sure if this is an html or css problem, so I decided just to put it in html. Anyway, here is the problem. I have 3 divs inside a table. The problem is, in firefox, the third div goes around the table or at the edge of the table around the other divs (not quite sure), instead of beside the second div like it should. In IE it goes beside the second div like expected. Here is the html: <html> <head> <link rel='stylesheet' type='text/css' href='Style.css'> </head> <body> <table border='0' align='center' height='100%'><td width='750' height='100%'> <div id='banner'><font color='red'>Banner Here</font></div> <br /> <div id='leftmenu'><a href='Signup.php'><img style='border: none;' src='signup.png'></a></div> <div id='Content'>.... </div></td></table> </body> </html> Here is the css so far (Content is the one thats wrapping around) body { background-color: #000000; color:white; text-align: center; } #Banner { border-style: solid; border-width: 1px; border-color:red; width:750px; height:150px; float:left; } #leftmenu { background-color: #990000; border-style: solid; border-color: #990000; border-width: 1px; margin-right:5px; margin-bottom:100px; margin-top:5px; width:200px; height:100%; float:left; text-align:center; } #Content { width:500px; height:100% float:left; text-align: center; } Any ideas? Quote Link to comment Share on other sites More sharing options...
cags Posted October 23, 2009 Share Posted October 23, 2009 Is that your full HTML, or do you actually have a valid DOCTYPE declared? Quote Link to comment Share on other sites More sharing options...
jcombs_31 Posted October 23, 2009 Share Posted October 23, 2009 First, you need to understand the box model, this is how the full width is determined by the width, borders, padding. This can be rendered different from browser to browser. Second, why are you wrapping your code in a table? Third, I'd suggest learning some CSS shorthand, you are writing too much code. Quote Link to comment Share on other sites More sharing options...
Dorky Posted October 25, 2009 Share Posted October 25, 2009 <html> <head> <style> body { background-color: #000000; color: #ffffff; } #box {position: relative; width: 750px; height: 100%; margin-left: auto; margin-right: auto; } #box h1 { color: #ff0000; text-align: center; } #box img { border: 0px; } #box .Banner { border-style: solid; border-width: 1px; border-color:red; width:750px; height:150px; float:left; } #box .leftmenu { background-color: #990000; border-style: solid; border-color: #990000; border-width: 1px; margin-right:5px; margin-bottom:100px; margin-top:5px; width:200px; height:100%; float:left; } #box .Content { width:500px; height:100%; text-align: center; float:left; } </style> </head> <body> <div id="box"> <div class='banner'><h1>Banner Here<h1></div> <br /> <div class='leftmenu'><a href='Signup.php'><img src='signup.png' /></a></div> <div class='Content'>....</div> </div> </body> </html> 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.