sharpcode Posted February 3, 2013 Share Posted February 3, 2013 <body> <div id="left"> </div> <div id="right"> </div> <div id="wrapper"> <div id="header"></div> <div id="menu"></div> <div id="content"></div> </div> <div id="footer"> </div> </body> That is my structure at the moment. The footers width is 100%, the wrapper is 940px and centered int he middle of the screen. now i added the left and right div but they are pushing down the wrapper and making it look longer for some funny reason. Any help would be great Link to comment https://forums.phpfreaks.com/topic/273973-3-divs-and-positioning-them/ Share on other sites More sharing options...
sharpcode Posted February 3, 2013 Author Share Posted February 3, 2013 1 2 3 4 thats wha ti am aiming for. 3 divs then a footer (4) with 100% width. So 1 is left, 3 is centered so auto margin or whatever with 940px width and 3 is right. Link to comment https://forums.phpfreaks.com/topic/273973-3-divs-and-positioning-them/#findComment-1409827 Share on other sites More sharing options...
Frank P Posted February 3, 2013 Share Posted February 3, 2013 Sounds like a homework assignment to me. And if you actually are a coder, I'm still going to refer you to my tutorial on CSS positioning, linked from my signature page. Because positioning is such essential, basic stuff, you really cannot do without a thorough knowledge of it. I will give you one tip, though: float the divs 1 and 3, left and right, and nr. 2 will automatically position itself in between them. If there is enough space, of course. Link to comment https://forums.phpfreaks.com/topic/273973-3-divs-and-positioning-them/#findComment-1409847 Share on other sites More sharing options...
sharpcode Posted February 3, 2013 Author Share Posted February 3, 2013 the main problem is its making the header inside the wrapper longer and in turn is pushing the content down further. They float right i always had that from the start thats CSS 101. But just cant figure this little bug out. this is the header css... nothing that would make it resize so really confused if anyone has any idea or maybe a better way let me know otherwise ill post back when i find what this annoying little bug is -.- width: 940px; padding: 40px 10px 20px; background: url(../images/bgheader.png) bottom center no-repeat; Link to comment https://forums.phpfreaks.com/topic/273973-3-divs-and-positioning-them/#findComment-1409872 Share on other sites More sharing options...
Love2c0de Posted February 3, 2013 Share Posted February 3, 2013 Can you post a live link or your relevant HTML and CSS? We can help you much better if we have something to work with or all the relevant style declarations. Kind regards, L2c. Link to comment https://forums.phpfreaks.com/topic/273973-3-divs-and-positioning-them/#findComment-1409956 Share on other sites More sharing options...
Love2c0de Posted February 3, 2013 Share Posted February 3, 2013 Hi dude, Consider this code, this is something I wrote not so long ago for my own site: <?php ?> <!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> <title>HTML Template</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.8.3.js"></script> <style type="text/css"> #content_wrapper { width: 1000px; margin: 10px auto; } #left_container { width: 200px; height: 400px; float: left; text-align: center; font-size: 12px; background: #252527 url('../images/background_img.jpg'); border: 1px solid #fff; -moz-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; } #right_container { width: 200px; background: #252527 url('../images/background_img.jpg'); height: 400px; float: right; text-align: center; border: 1px solid #fff; -moz-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; } #container { background: #252527 url('../images/background_img.jpg'); width: 560px; min-width: 560px; margin: 10px auto; height: 400px; border: 1px solid #fff; padding: 0px 10px 0px 10px; -moz-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; } </style> <script> </script> </head> <body> <div id="content_wrapper"> <div id="left_container"> <?php if(isset($left_sidebar)){print($left_sidebar);} ?> </div> <div id="right_container"> <?php if(isset($right_sidebar)){print($right_sidebar);} ?> </div> <div id="container"> </div> </div> </body> </html> I put everything into a #content_wrapper div. The reason for that is because my left and right 'container' divs are floated left and right, so when you zoom out of the browser the 2 sidebars would have stayed floating - making the layout messed up. Change #content_wrapper div to whatever maximum width needs to be of the 3 columns, taking into account margins and paddings of those divs. Change the sizes of your left and right divs and make the wrapper div 940px as you need it to be. Add your footer OUTSIDE of the 'content_wrapper' div to make sure it spans 100% of whatever resolution the user is browsing in. Put it in a test file and see what it looks like in comparison to what you want to achieve. Hope this helps. Just gives you a bit of an idea of how to do it. Kind regards, L2c. Link to comment https://forums.phpfreaks.com/topic/273973-3-divs-and-positioning-them/#findComment-1409958 Share on other sites More sharing options...
sharpcode Posted February 4, 2013 Author Share Posted February 4, 2013 Problem was the site title inside the header for some reason not sure how to explain it. But updated it and changed the margin and it worked... i will try imitate the problem offline later for fun and see what the problem was exactly. Thanks for your help though L2c! Link to comment https://forums.phpfreaks.com/topic/273973-3-divs-and-positioning-them/#findComment-1409989 Share on other sites More sharing options...
Love2c0de Posted February 4, 2013 Share Posted February 4, 2013 No problem, glad you solved you issue! Regards, L2c. Link to comment https://forums.phpfreaks.com/topic/273973-3-divs-and-positioning-them/#findComment-1409991 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.