Zane Posted January 30, 2009 Share Posted January 30, 2009 Ok I'm trying to make something really simple. I've seen this type of layout used many places....I would think it's just two divs side by side.....and the container has full height (which took me forever to figure out as well). Now I've finally got it positioned the way I want...but the only problem is that the right div extends all the way into the left div or something....according the firebug. I want to set padding in the right div....or at least its content child and be happy. Here's my code LEFT There is a lot of content in here damnit dkkkkkkkkkkkkkkkkkkkk k kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkk body,html,#left,#right { height:100%; margin: 0px; padding:0px; background: blue; } div#main { margin: 0px 12em; height:100%; } #left { float:left; } #right { background-color:#76D16B; padding: 1em; } #content { padding: 1em; } I can only get it to pad the top and bottom... what's wrong? here is a screenshot of how it looks [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
phparray Posted January 30, 2009 Share Posted January 30, 2009 This works. html, body { height:100%; margin:0; padding:0; background: blue; } #main { margin:0 auto 0 auto; height:100%; width:1024px; } #right, #left { color:white; float:left; padding: 1em; margin:0; width:15%; height:100%; background: blue; } #content { margin:0; width:60%; float:left; height:100%; padding: 1em; background-color:#76D16B; } <body> <div id="main"> <div id="left">LEFT</div> <div id="content"> There is a lot of content in here d@mnit dkkkkkkkkk kkkkkkkkkk k k kkkkkkkkkkk kkkkkkkkkkkkk kkkkkkk kkkkkkkk kkkkkkkkk kkkkkkkkkkkk kkkkkkkk kkkkkkkkk kkkkkkkkk kkkkkkkkkkkkk kkkkkkkk kkkkkk kkkkkk kkkkkkkk kkkkkkkkkkkk kkkkk </div> <div id="right">RIGHT</div> </div> </body> Quote Link to comment Share on other sites More sharing options...
DamienRoche Posted February 2, 2009 Share Posted February 2, 2009 At times though, I've found that simply having padding: 1em; with a single declaration doesn't work with firefox. Try to be more specific. padding: 1em 1em 1em 1em; for top, right, bottom, left. Hope that helps. 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.