November 11, 201213 yr So, My Float tags are being pain in the asses and are not working right. Help me please? My HTML <html> <head> <link rel="stylesheet" type="text/css" href="design.css"> </head> <body> <!-- Begin Navigation Menu --> <div id="nav_bar_main_un"> <div id="nav_bar_main_deux"> </div> </div> <!-- Begin Wrapper_Main --> <div id="wrapper_main"> <div id="user_bar> user_bar </div> <div id="main_container> main_container </div> </div> </body> </html> My CSS body { width:100%; height:100%; color:#76818d; background:#b5cbb0; margin:0 auto; padding:0; } /* Begin Navigation Menu */ #nav_bar_main_un{ width:100%; height:33px; color:#76818d; background:#93b7aa; margin:0 auto; padding:0; border-bottom:1px solid #717e90; } #nav_bar_main_deux{ width:100%; height:32px; color:#76818d; background:#93b7aa; margin:0 auto; padding:0; border-bottom:1px solid rgba(255,255,255,0.45); } /* Finish Navigation Menu */ /* Start wrapper Menu */ #wrapper_main{ width:800px; height:100%; margin:0 auto; border-left:1px solid rgba(255,255,255,0.45); border-right:1px solid rgba(255,255,255,0.45); padding-top:5px; } /* Finish Wrapper Menu */ /* Start notifications Menu */ #user_bar { width:100px; height:320px; background:#ffffff; } #main_container { width:790px; height:320px; background:#ffffff; float:right; } For some reason, they're overlapping each other. Edited November 11, 201213 yr by RickyCook
November 11, 201213 yr Your wrappermain div is 800px wide,your user_bar is 100px wide and your main_container is 790px wide. 100+790px=890px.
November 11, 201213 yr Author Your wrappermain div is 800px wide,your user_bar is 100px wide and your main_container is 790px wide. 100+790px=890px. I just fixed that, but they're still not working. =/ I've found the problem. I've missed 2 quoteation marks as shown below. <html> <head> <link rel="stylesheet" type="text/css" href="design.css"> </head> <body> <!-- Begin Navigation Menu --> <div id="nav_bar_main_un"> <div id="nav_bar_main_deux"> </div> </div> <!-- Begin Wrapper_Main --> <div id="wrapper_main"> <div id="user_bar (" was missing here)> user_bar </div> <div id="main_container(" was missing here)> main_container </div> </div> </body> </html> Edited November 11, 201213 yr by RickyCook
November 11, 201213 yr I just fixed that, but they're still not working. =/ have you accounted for any paddings or margins within the Divs? you need to factor these in as well. Also, its a bit (a lot) of a hack, but as you're using a fixed width it might work. try adding this to your #main_container div margin-left:101px; Edited November 11, 201213 yr by kree8or
Create an account or sign in to comment