mpsn Posted February 13, 2012 Share Posted February 13, 2012 Hi, for my sidebar, I'm not sure why when I add content (eg:<p>The qquick brown fox jumps over the lazy dog.</p>) inside the content div, that the sidebar shifts downwards, you can try, just cut out the <p>The quick brown...</p> and the sidebar shifts back upwards? Here is my CSS: =========== /*================PAGE STYLES=============*/ body { background-image:url('images/fadedGreenbackground.jpg'); background-attachment:fixed; } h3 { font-family:Verdana,Arial,sans-serif; text-align:center; color: #000080; margin-left:250px; border:1px solid black; } h5 { font-family:Verdana, Arial, sans-serif; text-align:center; } .container { width:800px; margin-left:auto; margin-right:auto; border:1px solid black; padding:100px 5px 0px; background-color:#9F9; } /*=================HEADER STYLE============*/ .header { width:750px; margin-left:auto; margin-right:auto; margin-top:-98px; padding:20px; border:1px solid black; background-color:#FFF; } .header img/*this means all images inside div 'header' will have header's style*/ { width:200px; height:220px; margin-top:-10px;/*we have to overlap and go past the header padding of 10px (see above)*/ border-right:1px solid black; } /*==================MENU NAV STYLE============*/ .menu/*container for menu nav items*/ { width:780px; margin-left:auto; margin-right:auto; padding:8px 5px; border:1px solid black; text-align:center; } .menu ul li { display:inline; border:1px solid #00FF7F; background-color:#00FF7F; margin:0px 6px 0px -4px; padding:20px 15px 23px 15px; font-family:Verdana,Arial,sans-serif; } .menu a:link { color:#000; text-decoration:none; } .menu ul li a:hover { color:#FFF; text-decoration:underline; background-color:#006400; } .menu a:visited { color:#191970; } /*===============CONTENT BODY STYLE===========*/ .content { width:790px; margin-left:auto; margin-right:auto; margin-top:30px; padding:400px 5px 0px 5px; border:1px solid black; background-color:#FDF5E6; } #bodyText { background-color:yellow; border:1px solid black; margin-left:300px; margin-right:330px; } /*.content p/*NB: p.content NOT same as .content p**/ /*{*/ /*background-color:yellow;*/ /*}*/ /*==========SIDEBAR STYLE=================*/ .sidebar { width:200px; margin-top:-390px; margin-left:500px; margin-right:300px;/*WHY DOESN"T THIS WORK? why doesn't side bar move 300 from the right towards the left??*/ margin-bottom:10px; padding:100px 50px 500px 10px; border:1px solid black; } /*===========FOOTER STYLE====================*/ .footer { width:750px; margin-left:auto; margin-right:auto; margin-bottom:5px; padding:20px; margin-top:10px; background-color:#00FF7F; border:1px solid black; } Here is my HTML: ============ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"><!--wrapper for content body: holds header, menu, content body (which in turn holds sidebar), footer--> <div class="header"> <img src="images/logo.jpg" title="Welcome to my Website!" alt="Welcome to my Website!"/> </div> <div class="menu"> <ul> <li><a href="#home">home</a></li> <li><a href="#education">education</a></li> <li><a href="#photo">photo gallery</a></li> <li><a href="#games">Games</a></li> <li><a href="#contact">contact us</a></li> </ul> </div> <div class="content"> <p> the quick brown fox jumps over the lazy dog.<!--Why does adding this line cause the sidebar to shift downwards????--> </p> <div class="sidebar"> </div> </div> <div class="footer"> </div> </div> </body> </html> Any help appreciated. Quote Link to comment https://forums.phpfreaks.com/topic/257062-why-does-my-sidebar-shift-downwards-when-i-add-content/ Share on other sites More sharing options...
smerny Posted February 13, 2012 Share Posted February 13, 2012 get rid of crazy margins and padding on the sidebar and add float:right edit: +"and padding" Quote Link to comment https://forums.phpfreaks.com/topic/257062-why-does-my-sidebar-shift-downwards-when-i-add-content/#findComment-1317765 Share on other sites More sharing options...
mpsn Posted February 13, 2012 Author Share Posted February 13, 2012 Ok, I'll try that first, also do you know why when I zoom out (CTRL and minus sign), why does the the 'contact us' move out of place, if you try, you will see what I mean. Appreciate it. Quote Link to comment https://forums.phpfreaks.com/topic/257062-why-does-my-sidebar-shift-downwards-when-i-add-content/#findComment-1317887 Share on other sites More sharing options...
mpsn Posted February 13, 2012 Author Share Posted February 13, 2012 No, it's still not working after removing margin attribute, and now the sidebar goes to the right (still inside my content 'div') BUT now the sidebar top border is lined up withe the bottom of the 'content' div... Any help appreciated. Quote Link to comment https://forums.phpfreaks.com/topic/257062-why-does-my-sidebar-shift-downwards-when-i-add-content/#findComment-1317915 Share on other sites More sharing options...
bspace Posted February 18, 2012 Share Posted February 18, 2012 you'd be better putting the sidebar and content in separate divs, like this <div class="content"> <p>the quick brown fox jumps over the lazy dog.</p> </div> <div class="sidebar"> <p>stuff in the sidebar.</p> </div> then your css goes like this .sidebar { float:left; left:0px; position:relative; width:200px; } .content { float:right; position:relative; right:0; width:590px; } don't go adding padding / margin to these unless you can deal with possible box model problems as regards the way you've got the code right now, it's behaving just like it should if you wanted to go with it like that you'd have to float you're sidebar left then either give the <p> in the content a 200px left margin or float it right with a 590px width Quote Link to comment https://forums.phpfreaks.com/topic/257062-why-does-my-sidebar-shift-downwards-when-i-add-content/#findComment-1318534 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.