> -----Original Message----- > From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css- > discuss.org] On Behalf Of Coleen Holley > Sent: Friday, March 25, 2011 8:53 AM > To: css-d@lists.css-discuss.org > Subject: [css-d] Column overflow problem in IE8... > > I am re-vamping a website and am having some issues with my right-column > overflowing in IE8. Here's a link to see the screen shot: Sidebar Overflow > problem<%20http://i105.photobucket.com/albums/m229/ayliea/Programmi > ng%20Problems/IE8SidebarError.jpg> > > Here's my .css code: > > #aside > { > background-color: transparent; > width: 18%; > height: 100%; > display: inline; > float:right; > margin: 0 10px 10px 10px; > vertical-align:top; > } > > #aside h3 { margin: 0; } > > #sidebar > { > position: absolute; > top: 150px; > width:17%; > padding-left: 15px; > } > > and here's my HTML for that section: > <div id="aside""> > <br /> > <h3> > Mother's tell their stories... > </h3><br /> > <form target="searchwindow" action="../../cgi-sys/entropysearch.cgi"> > <h3>Search Our Site</h3><br /> > <input name="query" /> <input type="hidden" > value="ahc" name="user" /> > <input type="hidden" > value="http://aheartbreakingchoice.com"; name="basehref" /> > <input type="hidden" value="default" name="template" /> > <input type="submit" value="Search" /> > </form><br /> > <div id="sidebar"> > <h3>I told her how sorry... > <br />~Brokenhearted Mother</h3><br /><br /> > </div> > </div> > > This seems to be working just fine in Firefox, Chrome and Opera, but of > course IE never plays by the same rules as everyone else. Can anyone give > me a little help with this issue? Any help would be much appreciated. > > Thanks, > > Coleen > __________________________________________________________ > ____________ > css-discuss [css-d@lists.css-discuss.org] http://www.css- > discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css- > discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > __________ Information from ESET Smart Security, version of virus > signature database 5984 (20110325) __________ > > The message was checked by ESET Smart Security. > > http://www.eset.com >
I see this so often, one of the first things you need in your CSS toolbox is a basic understanding of floats and padding/margins. This is where the focus needs to be. First, change the padding and margin in the body declarations to be padding: 0; margin:0; Next, in #primarycontent change the float to left then in #navdiv add clear:both; Also I see position: absolute in #sidebar change to position: relative; then you can easily position it. Remove the padding-left and the padding-right. Completely unnecessary. Once you start changing these you will see the #navdiv fall to the bottom of the page and your main content will move to the left closer to the sidebar. Looks like you have your work cut out for you. Start with these changes and then check what you have in the browsers. I will suggest a few sites to learn from: www.w3schools.com www.csszengarden.com http://meyerweb.com/ That should be more than enough to get you on your way to understanding CSS design patterns. Thank you, Marc Hall HallMarc Websites 610.446.3346 http://www.hallmarcwebsites.com/ Spread the word about my services and earn money! Contact me for details. ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
