Hello: I am having problems with what I think is a fluid page that I thought worked, but it doesn't. I basically have 3 problems, 1 major, 2 minor that are keeping me up at night. The first problem ( major ) is that my "rite content" loses it's bottom padding when the screen res goes beyond 1400px. I don't know all that much about css, but I wonder why it would work on smaller res but changes on higher. I basically want a bottom padding of 10px above my footer. If the left content is larger, well the right padding would not matter, but when the left is shorter than the right, then the right padding should kick in. Second problem is cosmetic in that the space between the "home" section and "footer" section have 10px, but the space between the first portion of the left content and the second is greater. I would like to get it to be the space, 10px for example. There could be more sections, so it needs to look uniform regardless of how many sections I have. Third problem, and again, it is minor and perhaps not worth mentioning, but looking at the code below, I would like to have the "rite page" within the "page body". Why??? I just think that it belongs to the main content section and should follow the "left page". http://www.pepelepew1962.x10.mx/ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test Page</title> <link rel="icon" href="favicon.ico" type="image/x-icon"> <meta name="author" content="Blank"> <style type="text/css"> body { margin: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; background: #4A4A4A; background-image: url(homeback.jpg); } img { border: none; } a { outline: none; color: #0091E8; text-decoration: none; } a:visited { color: #0091E8; } a:hover { color: #666; text-decoration: underline; } #head_Main { background: url(homehead.png) repeat-x; height: 112px; } #head_Wrap { width: 90%; margin: 0px auto; height: 112px; } #head_Logo { float: left; height: 112px; width: 90px; padding-top: 6px; } #head_News { margin-top: 0px; padding: 0px; color: #0FF; font-size: 20px; height: 44px; width: 0 auto; margin-left: 90px; line-height: 44px; padding-left: 5px; } #head_Menu { text-align: center; font-weight: bold; height: 44px; width: 0 auto; margin-left: 90px; } #head_Menu ul { margin: 0; padding: 0; } #head_Menu li { margin: 13px 5px 10px 0; padding: 0; list-style: none; display: inline-block; *display: inline; /* ie7 */ } #head_Menu a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; border-radius: 5px; background: #151515; border: 1px solid #262626; } #head_Menu a:hover { color: #000; border: 1px solid #383838; border-radius: 5px; background-color: #666666; } #head_Menu #current a { color: #fff; background: #999; border: 1px solid #383838; border-radius: 5px; background-color: #444444; } #head_Info { height: 22px; width: 0 auto; margin-left: 90px; color: #F00; font-size: 12px; padding-top: 6px; } #head_Lead { clear: both; height: 90px; text-align: center; } #page_Body { width: 100%; float: left; /* [disabled]margin-top: 25px; */ /* [disabled]padding-bottom: 25px; */ /* [disabled]padding-left: 10px; */ /* [disabled]height: 100%; */ /* [disabled]border: 2px solid #383838; */ border-radius: 5px; /* [disabled]background-color: #2C2C2C; */ } #page_Left { margin-right: 210px; /*Set right margin to RightColumnWidth*/ /* [disabled]background-color: #90EE90; */ } #page_Rite { margin-top: 10px; width: 200px; /*Width of right column in pixels*/ margin-left: -210px; /*Set left margin to -(RightColumnWidth) */ background-color: #2c2c2c; float: left; color: #F00; border-radius: 5px; border: 2px solid #383838; } #page_Name { /* [disabled]margin-top: 0px; */ /* [disabled]margin-left: 10px; */ border: 2px solid #383838; border-radius: 5px; background-color: #333333; width: 100%; /* [disabled]height: 200px; */ /* [disabled]margin-right: 200px; */ /* [disabled]margin-bottom: 25px; */ margin-left: 0px; padding: 4px 0; clear: left; /* [disabled]padding-right: -25px; */ } #left_Body { margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/ margin-top: 0; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; } #rite_Body { margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/ margin-top: 0; padding-left: 10px; padding-right: 10px; padding-top: 10px; } .name_Text { /* [disabled]padding-right: 10px; */ color: #FF0; font-weight: bold; text-align: left; padding-left: 25px; } .left_Text { margin-top: 25px; /* [disabled]margin-left: 10px; */ border: 2px solid #383838; border-radius: 5px; background-color: #2c2c2c; /* [disabled]width: 97%; */ /* [disabled]height: 200px; */ /* [disabled]margin-right: 200px; */ margin: 0px auto; padding: 10px; color: #CF6; /* [disabled]margin-bottom: 25px; */ text-align: left; } .rite_Text { } /* 300 x 250 IMU - (Medium Rectangle) */ /* 180 x 150 IMU - (Rectangle) */ /* 160 x 600 IMU - (Wide Skyscraper) */ /* 728 x 090 IMU - (Leaderboard) */ #head_Foot { /* [disabled]margin-top: 0px; */ /* [disabled]margin-left: 10px; */ border: 2px solid #383838; border-radius: 5px; background-color: #333333; width: 100%; /* [disabled]height: 200px; */ /* [disabled]margin-right: 200px; */ /* [disabled]margin-bottom: 25px; */ margin-left: 0px; color: #0F0; font-weight: bold; text-align: center; padding: 4px 0; clear: left; } #head_Foot a { color: #FFFF80; } </style> <script type="text/javascript"> /*** Temporary text filler function. Remove when deploying template. ***/ var gibberish=["THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.", "the quick brown fox jumps over the lazy dog.", "PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS.", "pack my box with five dozen liquor jugs."] function filltext(words){ for (var i=0; i<words; i++) document.write(gibberish[Math.floor(Math.random()*4)]+" ") } </script> </head> <body> <div id="head_Main"> <div id="head_Wrap"> <div id="head_Logo"> <a href="http://www.webintersect.com"> <img src="logo.png" alt="logo" title="Web Intersect Home"> </a> </div><!--End of head_Logo --> <div id="head_News">THIS IS A MSG AREA!!!</div> <nav id="head_Menu"> <ul> <li id="current"><a href="http://www.yahoo.com">HOME</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">CONTACT US</a></li> <li><a href="#">LOG IN</a></li> </ul> </nav><!--End of head_Menu --> <div id="head_Info"> <img src="pmFlash.gif" width="17" height="12" alt="fuk"> EMAILS ( 44 )</div> <div id="head_Lead"><img src="728x090_uap.gif" width="728" height="90"</div> <div id="page_Name"><div class="name_Text">HOME</div> </div><!--End of page_Name --> <div id="page_Body"> <div id="page_Left"> <div id="left_Body"><div class="left_Text"><script type="text/javascript">filltext(45)</script></div> </div><!--End of left_Body --> <div id="left_Body"><div class="left_Text"><script type="text/javascript">filltext(45)</script></div> </div><!--End of left_Body --> </div><!--End of page_Left --> </div><!--End of page_Body --> <div id="page_Rite"> <div id="rite_Body"><script type="text/javascript">filltext(14)</script> </div><!--End of rite_Body --> </div><!--End of page_Rite --> <div id="head_Foot">FOOTER</a> </div> </div><!--End of head_Wrap Div --> </div><!--End of head_Main Div --> </body> </html> Any help regarding this would greatly be appreciated.
Generally speaking that entire layout is rife with design issues, particularly from an accessibility standpoint. The inaccessible (and illegible here) px metric fonts on everything being just the start of the problems. The large width loss of padding is because you aren't clearing/containing floats properly, so when the content is shorter than the bar there's no way for it to even have a margin. But there's more... lack of a max width makes long lines hard to read, fixed metric (px) fonts are gibberish for anyone wanting a larger default, sending users like myself diving for the zoom. px width sidebar can't adjust to content, out of order content, no logical document structure, javascript for nothing (even for testing that's a bad idea as how do you test scripting off behaviors?), endless pointless DIV and classes for nothing, and that's before talking the HTML 5 garbage. (Not a fan). You've also got invalid markup with an improperly closed IMG tag, and presentational images in the markup. It looks like the markup was designed thinking appearance on screen instead of semantics, an extremely common mistake. Even your comment placements could be tripping rendering bugs in IE and some versions of FF. (No, that's not a joke -- crazy as it sounds comments between sibling elements can trip rendering errors!) The CSS has issues too, pointlessly bloated and redundant, no explicit line-heights resulting in wildly different (and painful to read) appearances across different browsers, no reset so wasting time trying to get margins and padding to behave on multiple elements, and even for testing I do not advise making your life harder putting CSS in the same file as the markup. (separate files can be separate windows, so you can see CSS and the markup it targets side-by-side -- handy tip!) First order of business on such a simple page would be to clean up the markup. For filler text I use the Lorem Ipsum generator here: http://www.lipsum.com/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Test Page </title> </head><body> <div id="headerSandbag"></div> <div id="pageWrapper"> <h1> Web <span>Intersect<span><!-- image replacement --></span></span> </h1> <div id="messages"> This is a message area! <!-- #messages --></div> <ul id="mainMenu"> <li><a href="/" class="current">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Log In</a></li> </ul> <div id="eMailNotice"> <a href="#mails" class="hasMail"> EMAILS ( 44 ) </a> <!-- #eMailNotice --></div> <hr /> <img src="images/728x090_uap.gif" alt="advertisement" class="advert" /> <h2>Home</h2> <div id="contentWrapper"><div id="content"> <div class="subSection"> <!-- should probably be a h3 here --><hr /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget blandit turpis. Cras vel turpis non dolor lobortis mollis non eu mauris. Phasellus tincidunt tincidunt aliquam. Sed porttitor scelerisque blandit. Nam sed mi eget turpis rutrum blandit. Nullam ac commodo diam. Nunc interdum dui et ipsum posuere, at consequat elit fringilla. Etiam ultrices turpis eu purus placerat, non dictum urna fringilla. Aenean rutrum leo elit, elementum fringilla orci condimentum ut. Nam non mi sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas vehicula eget nulla et facilisis. Suspendisse ultrices nec velit eget faucibus. Quisque nulla sapien, pellentesque sit amet tellus quis, egestas commodo velit. </p><p> In condimentum turpis nec elit hendrerit tristique. Nunc eget hendrerit nisi. Morbi a metus accumsan, commodo leo ac, rutrum risus. Nam ac euismod risus. Mauris tincidunt felis eget egestas convallis. In dapibus ornare varius. Nam in rhoncus augue. </p> <!-- .subSection --></div> <div class="subSection"> <!-- should probably be a h3 here --><hr /> <p> Nullam tincidunt justo in molestie iaculis. In nec rutrum lectus. Proin congue, est id ultrices posuere, risus mi tristique tellus, in rhoncus orci tellus id lorem. Integer sit amet pulvinar justo. In arcu orci, rutrum ac purus vitae, rutrum sollicitudin lectus. Donec lobortis lacinia felis. Mauris pharetra adipiscing dolor eu adipiscing. </p><p> Morbi gravida dictum libero, lobortis rhoncus metus mattis at. Nullam laoreet, diam ac adipiscing condimentum, justo odio semper ipsum, at mattis magna urna ac nunc. Proin blandit justo purus, tincidunt rhoncus mauris fermentum ac. Suspendisse elit tortor, gravida eu iaculis quis, tristique vel ligula. Proin eget ultrices elit, eu luctus diam. Morbi sem ipsum, dictum ut enim et, imperdiet fringilla eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut nec erat sit amet est tempus feugiat. Nulla adipiscing sagittis enim. </p> <!-- .subSection --></div> <!-- #content, #contentWrapper --></div></div> <div id="extras"> <div class="subSection"> <!-- should probably be a h2 here --><hr /> <p> Morbi lacinia orci sed mauris facilisis, sed dignissim dolor tempus. Cras malesuada consequat purus a semper. Donec eu lectus nec turpis elementum rutrum. Nunc ultricies eros sit amet ultrices semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut ut sapien sit amet felis egestas tincidunt. Duis adipiscing eu leo et porttitor. Cras ut congue felis. Quisque ut tristique erat, et lobortis urna. Aliquam dictum, ante sit amet scelerisque semper, erat tellus pellentesque massa, vitae mollis diam leo et diam. Praesent lorem eros, tempor ut consectetur a, vehicula vel purus. Proin eleifend velit orci, blandit faucibus lectus venenatis non. </p> <!-- .subSection --></div> <!-- #extras --></div> <hr /> <div id="footer"> Footer <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): Notice the MEDIA target on the CSS link, the change to the favicon include which is a far more reliable version (some use shortcut, some use icon... and type can actually cause favicons NOT to render so omit that!), and most importantly the change to comment styling. Putting comments before the close prevents them from EVER being between sibling level elements - the cause of rendering errors that can drive you batty when they rear their ugly heads. Also note I use . and # on the closing names to say if it's a ID or class just like CSS, and don't waste time saying "end" since no ****, really? </div> is the end of something?!? You'll notice I included a number of HR. In semantic markup (even the train wreck of idiocy known as HTML 5 agrees with this) are for indicating a change in topic when a numbered heading is unwanted, unwarranted, or just plain makes no sense. This is why the new 'section' tag is 100% grade A farm fresh BS as it's redundant to proper use of numbered headings and horizontal rules. Stylistically if you don't want the HR, hide them for your screen target as they are there to provide logical document structure for OTHER targets. Writing HTML is NOT just about what it looks like on the display in front of you!!! The H1 I used for the site title and logo because it's the top-most heading -- the heading under which ALL OTHER HEADINGS ON THE PAGE ARE A SUBSECTION. This is why 5's "go ahead and use H1 however you see fit" is a bunch of nonsense created by people who don't know how to write a proper non-web document, much less a web one. That's also why I changed 'home' to a H2, since thats the start of that section. The subsections in the main column I list as should be started with H3, as subsections of that h2, but I say the one for the sidebar should be H2 since such content is rarely a subsection of the page topic. When you get real headings and content in there those should be adjusted as appropriate. Which is why I don't generally test with auto-generated concept, and instead make a mockup of REAL content of what would actually be on a page LONG before I even THINK about what the page is going to look like. Generally speaking if you are thinking appearance before you have proper semantic markup of real content (or a reasonable facsimile) you're doing it ALL WRONG. For the CSS, I like to start out with a reset -- the one I use is only 188 bytes, and only targets what NEEDS to be reset. There are shorter resets like the so called "universal" one of "* { margin:0; padding:0 }" but that can cause headaches with sizing form elements, particularly when image interactions with form elements are involved. There are longer ones like Meyer's "reset reloaded", but that massive wreck borders on being a framework, and to be frank is responsible for resets getting a bad reputation. This (designed by Dan Schulz several years before his passing): /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul,dd,dt, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } Code (markup): For now, here's how I'd code that same general idea -- I cleaned up the paddings to be consistent as things seemed a bit willy-nilly slapped in there, switched it to dynamic fonts (%/em) in the content areas (the heading area isn't quite designed dynamic compatible), and for laughs tossed a responsive layout on it as well. http://www.cutcodedown.com/for_others/pepe_lepew1962/template.html as with all my examples the directory is wide open for easy access to the gooey bits and pieces. http://www.cutcodedown.com/for_others/pepe_lepew1962/ (feel free to browse the stuff I've done for others) Valid XHTML 1.0 Strict, tested working perfect IE9 and 10, Opera 12 and 15, latest each of Chrome, Safari and FF. Works well in IE8 and IE7 (though naturally no rounded corners or responsive layout), and is at least usable in IE6. Uses less CSS than your original despite adding media queries due to the use of condensed properties and removal of redundant/pointless declarations... likewise the HTML is in fact smaller despite the larger XHTML header. I also redid it so that there's no reliance on alpha transparency, making it render faster, use less battery, and work better in older browsers. Hope this helps. If you like I can write up a section by section breakdown explaining the how/what/why.
Your problem could be resolved by media queries @media (min-width: 1200px) { } @media (min-width: 768px) and (max-width: 979px) { } @media (max-width: 767px) { } @media (max-width: 480px){ } in these media queries you will put your code according to your requirement.
Media queries won't fix a float clearing (or lack therin) issue, which is the lack of a gap before the footer problem, or inconsistent padding across all widths. Not sure why you even said that...
Actually I am working on bootstrap and every day I am fixing problems like that, I have done more than 4 projects in bootstrap and every website have more than 10 pages.
Given what a steaming pile of **** bootstrap is, I'd hate to see the inaccessible train wrecks you're vomiting up using it (no offense intended, just saying the truth). NOT that anything you've posted in this thread has ANYTHING to do with the OP's problem or would do anything to fix it.
Ok, I have 3 things to say... RESPECT...RESPECT...RESPECT. You not only took the time to look at this post, you also fixed and educated me. Okay, my code is crap and I can take the beatings. You say it like it is and that is cool. Just a little info, I do use css files, but for testing I keep in the same file and move when it works, just easier for me. The right content MIGHT be for advertising ONLY. With media queries I will either show/hide the right and top uap portion. Thank you and I will definitely look at the "others" you have helped. \_/ Cheers