css - Responsive Theme 2 column layout - wrap text under widgets in right column -
i have been working on bit , not savvy enough know how correctly implement (such remains responsive design).
i running free "responsive" wordpress theme themeid on test site , need have main body content text of single article page wrap underneath right sidebar , adjust "dynamically" sidebar changes height on time. plan on having "archives" widget in right sidebar, on time grow in height...so body text should not extend underneath sidebar until reaches bottom of sidebar. take @ mockup made real quick demonstrate mean.
before: http://www.heliossolutions.net/responsive.jpg
after 2: http://www.heliossolutions.net/responsive3.jpg
as can see, text leaves huge white space beneath sidebar able flow underneath , adapt sidebar height. needs maintain responsive nature of theme , work correctly on mobile devices (i.e. sidebar widgets should display underneath content when viewed on mobile phone, out-of-the-box).
does make sense?
the page code looks this:
<!doctype html> <!--[if lt ie 7 ]> <html class="no-js ie6" dir="ltr" lang="en-us"> <![endif]--> <!--[if ie 7 ]> <html class="no-js ie7" dir="ltr" lang="en-us"> <![endif]--> <!--[if ie 8 ]> <html class="no-js ie8" dir="ltr" lang="en-us"> <![endif]--> <!--[if (gte ie 9)|!(ie)]><!--> <html class="no-js" dir="ltr" lang="en-us"> <!--<![endif]--> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" /> <title>title</title> <meta name="template" content="responsive 1.6.9" /> </head> <body class="single single-post postid-36 single-format-standard"> <div id="container" class="hfeed"> <div id="header"> <div id="logo"> </div><!-- end of #logo --> <ul class="menu"><li >home</li></ul> </div><!-- end of #header --> <div id="wrapper" class="clearfix"> <div id="content" class="grid col-620"> <div id="post-36" class="post-36 post type-post status-publish format-standard hentry category-web-development"> <div class="post-meta"> <span class="meta-prep meta-prep-author">posted on </span> july 2, 2012</span> </div><!-- end of .post-meta --> <div class="post-entry"> <p>post content here.post content here.post content here.post content here.post content here.post content here.post content here.post content here.</p> </div><!-- end of .post-entry --> <div class="post-data"> </div><!-- end of .post-data --> <div class="post-edit"></div> </div><!-- end of #post-36 --> <div id="respond"> <h3 id="reply-title">leave reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/parallax-slider/#respond" style="display:none;">cancel reply</a></small></h3> <p class="must-log-in">you must logged in post comment.</p> </div><!-- #respond --> </div><!-- end of #content --> <div id="widgets" class="grid col-300 fit"> <div class="widget-wrapper"> <div class="widget-title">in archive</div> <ul> </ul> </div><!-- end of .widget-wrapper --> </div><!-- end of #widgets --> </div><!-- end of #wrapper --> </div><!-- end of #container --> <div id="footer" class="clearfix"> <div id="footer-wrapper"> <div class="grid col-940"> <div class="grid col-540"> </div><!-- end of col-540 --> <div class="grid col-380 fit"> <ul class="social-icons"></ul><!-- end of .social-icons --> </div><!-- end of col-380 fit --> </div><!-- end of col-940 --> <div class="grid col-300 copyright"> © 2012 </div><!-- end of .copyright --> <div class="grid col-300 scroll-top"><a href="#scroll-top" title="scroll top">↑</a></div> <div class="grid col-300 fit powered"> </div><!-- end .powered --> </div><!-- end #footer-wrapper --> </div><!-- end #footer --> </body> </html> and corresponding css (tried give more enough, since can't pinpoint exact issue):
#content { margin-bottom:20px; } .grid { float:left; margin-bottom:2.127659574468%; padding-top:0; } .col-60, .col-140, .col-220, .col-300, .col-380, .col-460, .col-540, .col-620, .col-700, .col-780, .col-860 { display:inline; margin-right:2.127659574468%; } .col-620 { width:65.957446808511%; } .post-meta { clear:both; color:#9f9f9f; font-size:13px; margin-bottom:10px; } .post-entry { clear:both; } .post-data { clear:both; font-size:11px; font-weight:700; margin-top:20px; } .post-edit { clear:both; display:block; font-size:12px; margin:1.5em 0; } #widgets { margin-top:40px; } .col-300 { width:31.914893617021%; } .fit { margin-left:0!important; margin-right:0!important; } .widget-wrapper { -webkit-border-radius:6px; -moz-border-radius:6px; background-color:#f9f9f9; border:1px solid #d6d6d6; border-radius:6px; font-size:13px; margin:0 0 20px; padding:20px; } .clearfix:after, #container:after, .widget-wrapper:after { clear:both; content:"\0020"; display:block; height:0; max-height:0; overflow:hidden; visibility:hidden; } .clearfix, #container, .widget-wrapper { display:inline-block; } .clearfix, #container, .widget-wrapper { display:block; } any ideas how this? know possible , simple change, i'm not adept enough @ responsive css see it!
thanks, d
[4/9/12 - updated html code show entire page, head info (javascript , style sheets) removed]
it's hard tell because html not complete (most of divs not closed example). however, both .widget-wrapper , .col-300 have bottom margins if remove might trick.
Comments
Post a Comment