jaikob Posted September 23, 2008 Share Posted September 23, 2008 I am trying to make my website layout all CSS, and am doing very well, until I want to make a 3 column body. I have 1 side navigation div (Left), and another on the right. They always overlap one another. How do I stop a float, and all div's in that matter from crossing over? Here is my code. Sorry if it isn't clear. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SSG Sports</title> <style type="text/css"> body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #0D0D0D; } html, body { height: 100%; } #container { min-height: 100%; margin-bottom: -41px; position: relative; margin-left: 0px; margin-right: 0px; overflow: hidden; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #f6f6f6; background-image:url(bg.png); background-position: center; background-repeat:no-repeat; } #header_main { height: 116px; background-image:url(images/layout4_03.png); overflow: hidden; } #notice_bar { height: 20px; padding-top: 2px; padding-right: 2px; text-align: right; padding: 3px; } .border_yellow { border: 1px solid #beab2a; } #flash { margin-left: 205px; background-color:#000000; height: 200px; } #user_space { text-align: right; padding-top: 1px; } #logo { float: left; overflow: hidden; } #footer { background-image: url(images/footer.png); background-repeat: repeat-x; height: 41px; vertical-align: middle; text-align: center; position: relative; overflow: hidden; } #ticker_tape { height: 21px; margin-top: 3px; margin-bottom: 3px; background-color:#000000; } .style1 {color: #FFFFFF} #spacer1 { height: 41px; clear: both; } #navigation { margin-top: 78px; margin-left: 0px; margin-right: 0px; text-align: left; height: 32px; overflow: hidden; } #footer_text { padding-top: 13px; } #logos { position: relative; float: left; overflow: hidden; height:73px; } #user_nav { float: right; padding-right: 5px; padding-top: 5px; } #specials_bar { left: 220px; top: 350px; background-color:#FAF99E; border: 1px solid #beab2a; padding: 3px; margin-left: 205px; width: auto; margin-top: 10px; margin-bottom: 10px; height: 60px; filter:alpha(opacity=85); -moz-opacity:.85; opacity:.85; } #spacer2 { height: 41px; } /*#side_nav { position: relative; width: 200px; background-color:#FFFFFF; height: 300px; float: left; }*/ #side_nav { position: relative; width: 200px; background-color:#000000; height: 300px; float: left; margin-right: auto; margin-left: 10px; margin-top: 5px; } #side_nav2 { position: relative; width: 200px; background-color:#000000; height: 300px; float: right; margin-right: 10px; margin-left: auto; margin-top: 5px; } #main_container { margin-left: auto; margin-right: auto; margin-top: 4px; width: 950px; } #content { text-align: center; } #spacer3 { height: 20px; } #content_body { background-color:#000000; height: 40px; } #search { background-color:#000000; float: right; height: 32px;} #test { width: 600px; background-color:#666666; height: 100px; position: relative; margin-left: auto; margin-right: auto; float: inherit;} </style> </head> <body> <div id="container"> <!-- Start Header --> <div id="header_main"> <div id="logo"><a href="#"><img src="logo.png" border="0" /></a></div> <div id="user_space"> </div> <div id="user_nav"><table id="notice_bar" border="0" align="right" cellpadding="0" cellspacing="0" bgcolor="#faf99e" class="border_yellow"> <tr> <td><strong>Login | Register | Cart</strong></td> </tr> </table><br /><br /><br /> <table border="0" cellspacing="0" align="right" cellpadding="0"> <tr> <td><input name="" type="text" /> <input name="Search" value="Search" type="button" /></td> </tr> </table> </div> <div id="navigation"> <img src="nav_div.png" /><img src="home.png"/><img src="nav_div.png" /><img src="home.png"/><img src="nav_div.png" /><img src="home.png"/><img src="nav_div.png" /><img src="home.png"/><img src="nav_div.png" /><img src="home.png"/><img src="nav_div.png" /><img src="home.png"/><img src="nav_div.png" /><img src="home.png"/><img src="nav_div.png" /><img src="home.png"/><img src="nav_div.png" /></div> </div> <div id="notice_bar"> <table id="notice_bar" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#faf99e" class="border_yellow"> <tr> <td><strong>This is a Notice Bar.</strong></td> </tr> </table> </div> <!-- End Header --> <!-- Start body --> <div id="side_nav"><span style="color: #000000; font-size: 20px; text-align: center;">Side Nav Bar</span></div> <div id="side_nav2"><span style="color: #000000; font-size: 20px; text-align: center;">Side Nav Bar</span></div> <div id="test"></div> <div id="main_container"> <!-- End Body --> <div id="spacer2"><!-- Spacer for Footer --></div> </div></div></div> <!-- Start Footer --> <div class="spacer1"></div> <div id="footer"><div id="footer_text"> <span style="color: #FFFFFF;">© <?php echo date("Y"); ?> SSG Sports. All Rights Reserved. Web Application Designed By The Swan Valley Web Applications Team.</span> </div></div></div> </body> </html> Edit, here is the html uploaded. As you can see, if you resize the window, the body div's go ontop of one another: http://jaikobcreate.com/layout.php/ Quote Link to comment Share on other sites More sharing options...
dropfaith Posted September 23, 2008 Share Posted September 23, 2008 im working with floats right now so this is actually from my template im building div.left {float:left;width:150px ;height:600px;background-color:#fff;} div.right {float:right;width:200px;height:600px;} div.center{width:100%;height:600px; } <div class="left"> </div> <div class="right">test </div> <div class="center"><p>this is a common news article to be formated at a later date</p> </div> Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted September 23, 2008 Share Posted September 23, 2008 im working with floats right now so this is actually from my template im building div.left {float:left;width:150px ;height:600px;background-color:#fff;} div.right {float:right;width:200px;height:600px;} div.center{width:100%;height:600px; } <div class="left"> </div> <div class="right">test </div> <div class="center"><p>this is a common news article to be formated at a later date</p> </div> Okay, the code is okay, but it's a bad practice to give a div a class like "left" and make it universal. What if you want another div to take up the class "left"... it would not work since you defined it already! This is what you should do: <div id="body"> <div class="right"></div> <div class="center"></div> <div class="left"></div> </div> CSS: #body .right { } #body .center { } #body .left { } It's difficult to explain, but you simply always want to enclose everything in a unique ID and then use classes within that id. This way you can create a new parent id div and use some other .left and .right divs that are unique to that parent id. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted September 23, 2008 Share Posted September 23, 2008 I don't think The Film God was clear in what he meant. What he said was correct ... don't limit your classes or IDs by forcing them to be used with a tag (like, "div", "span", etc) This Means you can ONLY use it within a div: div.left {float:left;width:150px ;height:600px;background-color:#fff;} div.right {float:right;width:200px;height:600px;} div.center{width:100%;height:600px; } The whole point of css is to reduce the amount of markup code. Also, lose position:relative; It has no benefits and should only be used to force contain position:absolute elements (avoid those as well). You need to float all columns (including"center"). But, if you give them specific fixed widths and heights ... don't be confused when they don't "auto-size". The main reason your corner floats slide over the center float is because the center is not floated as well! However, even if it was, you would still have issues because of the fixed widths and heights and non-existant proper float clearing. Floats require a LOT of research, study and trial and error before using them becomes relatively easy. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted September 24, 2008 Share Posted September 24, 2008 Dbrimlow, you are correct. You don't want to limit your classes or ids by attaching them to a tag like "div" or "span". However, what I meant to say, is that when you are creating a complex website with tons of divs, it is to your benefit to do this: <div id="sidebar"> <div class="top">Sidebar Top</div> <div class="main">Main Sidebar</div> </div> <div id="footer"> <div class="top">Footer Top</div> <div class="main">Main Footer</div> </div> If you look closely, you see that I used two of the same named classes in 2 different divs! Why? Well first of all, the classes give you a good description. It tells you that class "top" in id sidebar, is the TOP portion of the SIDBAR div. Class "top" in id footer, tells you that it's the top of the footer. When doing the css, you do the following: #sidebar .top { } #sibar .main { } #footer .top { } #footer .main { } You don't want to unnecessarily reduce your code. Adding all those "#sidebar" and "#footer" may seem to add a lot of weight to your total file size, but the clear advantage of having complete control of every aspect of element on the page while having html that is easy to understand and analyze is well worth the extra markup. Hope that helps. Maybe I should write a book on css? What do you think? 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.