Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    134
    Thanks
    17
    Thanked 6 Times in 6 Posts

    Floating div problem

    On my media query for under 750px width I have changed the #sidebar and #main divs to float left and right, however #main floats under #sidebar, for the life of me I can't figure out why, I know it's going to be something simple but need a second set of eyes as I'm going cross-eyed looking for the error.

    Thanks

    link: www.chewx.co.uk/atw/

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Which is your side-menu?

  • #3
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Can you show me like a screenshot of how it SHOULD look.

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    134
    Thanks
    17
    Thanked 6 Times in 6 Posts

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    134
    Thanks
    17
    Thanked 6 Times in 6 Posts
    For the lazy ones.

    HTML:

    Code:
    <!DOCTYPE HTML>
    <head>
    
    <title>Untitled Document</title>
    
    <link rel="stylesheet" media="all" href="style.css" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script src="js/twitter.js"></script>
    
    <script type="text/javascript" charset="utf-8">
    //<![CDATA[
    jQuery(function() {
      jQuery('.main-nav li').each(function() {
        var href = jQuery(this).find('a').attr('href');
        if (href === window.location.pathname) {
          jQuery(this).addClass('current');
        }
      });
    });  
    //]]>
    </script>
    </head>
    
    <body>
    
            <div class="top">
            
            	<div class="outer-pad">
            
                    <div class="inner">
                    
                    
                    </div><!--inner-->
        
        		</div><!--outer-pad-->
        
            </div><!--top-->
        
            <header id="header">
            
            	<div class="outer-pad">
            
                    <div class="inner">
                
                        <aside class="logo">
                        
                            <img src="http://lorempixum.com/150/150/">
                        
                        </aside> <!--logo-->
                        
                        <div class="search">
                            Search 
                            <input type="search" name="search" />
                          
                        </div> <!--search-->
                        
                        <nav id="nav">
                            
                            <ul class="main-nav">
                            
                                <li class="current"><h1><a href="index.html">link1</a></h1></li>
                                <li><h1><a href="">link2</a></h1></li>
                                <li><h1><a href="">link3</a></h1></li>
                                <li><h1><a href="">link4</a></h1></li>
                            </ul><!--nav-main-->
                        </nav>
                        
                    <div style="clear: both;"></div>
                
                    </div><!--inner-->
            
            	</div><!--outer-pad-->
            
            </header> <!--header-->
    
    <div id="wrapper">
    
    	<div class="outer-pad">
    
    		<div class="inner-main">
    
                <aside id="sidebar">
                
                    <div class="cats">
                    
                        <ul class="float-l">
                            <li><a href="">link1</a></li>
                            <li><a href="">link2</a></li>
                            <li><a href="">link3</a></li>
                            <li><a href="">link4</a></li>
                            <li><a href="">link4</a></li>
                        </ul>
            
                        <ul class="float-l">
                            <li><a href="">link1</a></li>
                            <li><a href="">link2</a></li>
                            <li><a href="">link3</a></li>
                            <li><a href="">link4</a></li>
                            <li><a href="">link4</a></li>
                        </ul>
            
                        <ul class="float-l">
                            <li><a href="">link1</a></li>
                            <li><a href="">link2</a></li>
                            <li><a href="">link3</a></li>
                            <li><a href="">link4</a></li>
                            <li><a href="">link4</a></li>
                        </ul>
                    
                        <ul class="float-l">
                            <li><a href="">link1</a></li>
                            <li><a href="">link2</a></li>
                            <li><a href="">link3</a></li>
                            <li><a href="">link4</a></li>
                            <li><a href="">link4</a></li>
                        </ul>
                    
                    </div> <!--cats-->
            
                    <div class="ads">
                            
                            <img src="http://lorempixum.com/340/150/" />
                        
                    </div> <!--ads-->
                        
                </aside> <!--sidebar-->
            
                <div style="clear: both;"></div>
            
                <section id="main">
                
                    <article id="article-inspir" class="drop-shadow curved curved-hz-1">
                    
                        <img src="http://lorempixum.com/545/328/">
                        
                        <header class="inspir-header">
                        
                            <div class="inspir-title">
                                
                                <h1><a href="">Title 686</a></h1>
                                
                            </div> <!--inspir-title-->
                            
                            <div class="inspir-date">
                            
                                12th July 2012
                            
                            </div> <!--inspir-date-->
                        
                        
                        <div style="clear: both;"></div>
                        
                        </header> <!--inspir-header-->	
                    
                        <footer class="inspir-footer">
                        
                            <div class="inspir-cat">
                            
                                <a href="">minimal</a>, <a href="">responsive</a>
                            
                            </div> <!--inspir-cat-->
                        
                            <div class="inspir-tags">
                            
                                <span><A href="">tag</A></span><span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span>
                            
                            </div> <!--inspir-tags-->
                            
                            <div class="inspir-share">
                            
                                sdsdsd
                            
                            </div><!--inspir-share-->
                            
                            
                            <div class="inspir-comments">
                            
                                <a href="">comments(0)</a>
                            
                            </div><!--inspir-comments-->
            
                        <div style="clear: both;"></div>
            
                        </footer> <!--inspir-footer-->
                        
                    </article> <!--article-inspir-->
            
            
                    <article id="article-inspir">
                    
                        <img src="http://lorempixum.com/545/328/">
                        
                        <header class="inspir-header">
                        
                            <div class="inspir-title">
                                
                                <h1><a href="">Title 686</a></h1>
                                
                            </div> <!--inspir-title-->
                            
                            <div class="inspir-date">
                            
                                12th July 2012
                            
                            </div> <!--inspir-date-->
                        
                        
                        <div style="clear: both;"></div>
                        
                        </header> <!--inspir-header-->	
                    
                        <footer class="inspir-footer">
                        
                            <div class="inspir-cat">
                            
                                <a href="">minimal</a>, <a href="">responsive</a>
                            
                            </div> <!--inspir-cat-->
                        
                            <div class="inspir-tags">
                            
                                <span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span>
                            
                            </div> <!--inspir-tags-->
                        
                            <div class="inspir-comments">
                            
                                <a href="">comments(0)</a>
                            
                            </div><!--inspir-comments-->
                        
                        </footer> <!--inspir-footer-->
                        
                    </article> <!--article-inspir-->
            
            
            
                    <article id="article-inspir">
                    
                        <img src="http://lorempixum.com/545/328/">
                        
                        <header class="inspir-header">
                        
                            <div class="inspir-title">
                                
                                <h1><a href="">Title 686</a></h1>
                                
                            </div> <!--inspir-title-->
                            
                            <div class="inspir-date">
                            
                                12th July 2012
                            
                            </div> <!--inspir-date-->
                        
                        <div style="clear: both;"></div>
                        
                        </header> <!--inspir-header-->	
                    
                        <footer class="inspir-footer">
                        
                            <div class="inspir-cat">
                            
                                <a href="">minimal</a>, <a href="">responsive</a>
                            
                            </div> <!--inspir-cat-->
                        
                            <div class="inspir-tags">
                            
                                <span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span>
                            
                            </div> <!--inspir-tags-->
                        
                            <div class="inspir-comments">
                            
                                <a href="">comments(0)</a>
                            
                            </div><!--inspir-comments-->
                        
                        </footer> <!--inspir-footer-->
                        
                    </article> <!--article-inspir-->
            
            
                    <article id="article-inspir">
                    
                        <img src="http://lorempixum.com/545/328/">
                        
                        <header class="inspir-header">
                        
                            <div class="inspir-title">
                                
                                <h1><a href="">Title 686</a></h1>
                                
                            </div> <!--inspir-title-->
                            
                            <div class="inspir-date">
                            
                                12th July 2012
                            
                            </div> <!--inspir-date-->
                        
                        <div style="clear: both;"></div>
                        
                        </header> <!--inspir-header-->	
                    
                        <footer class="inspir-footer">
                        
                            <div class="inspir-cat">
                            
                                <a href="">minimal</a>, <a href="">responsive</a>
                            
                            </div> <!--inspir-cat-->
                        
                            <div class="inspir-tags">
                            
                                <span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span>
                            
                            </div> <!--inspir-tags-->
                        
                            <div class="inspir-comments">
                            
                                <a href="">comments(0)</a>
                            
                            </div><!--inspir-comments-->
                        
                        </footer> <!--inspir-footer-->
                        
                    </article> <!--article-inspir-->
            
            
            
            
                <div style="clear: both;"></div>
            
            
                </section> <!--main-->
    
            
                <aside id="page">
                
                </aside> <!--page-->
    		
            </div><!--inner-main-->
            
    	</div><!--outer-pad-->
    
    </div> <!-- wrapper -->
    
    <div id="page-change">
    	
        <div class="outer-pad">
        
        	<div class="inner">
        	
                <div class="page-old">
                
                    <a href="">older web</a>
                
                </div>
                
                <div class="page-new">
                    
                    <a href="">newer web</a>
                    
                </div>
            
            
                <div style="clear: both;"></div>
    
    		</div><!--inner-->
    
    	</div><!--outer-pad-->
    
    </div><!--page-change-->
    
    <footer id="footer">
    	
        <div class="outer-pad">
        
            <div class="inner">
            
                <div class="follow-like">
                    
                    <div class="fb-like" data-href="http://www.facebook.com/pages/Admire-The-Web/282575275146373" data-send="false" data-layout="button_count" data-width="25" data-show-faces="false"></div>
                    
                    <div id="fb-root"></div>
                    
                    <script>(function(d, s, id) {
                      var js, fjs = d.getElementsByTagName(s)[0];
                      if (d.getElementById(id)) return;
                      js = d.createElement(s); js.id = id;
                      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                      fjs.parentNode.insertBefore(js, fjs);
                    }(document, 'script', 'facebook-jssdk'));</script>
        
                    <a href="https://twitter.com/AdmireTheWeb" class="twitter-follow-button" data-align="right" data-button="grey" data-text-color="#FFFFFF" data-link-color="#cccccc" data-show-count="false">Follow @AdmireTheWeb</a>
                    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
        
                </div> <!--follow-like-->
        
                <div class="rss">
                    
                    <h1 class="rss-title">Sign up to rss emails</h1>
                    <input type="text" name="rss-email" /><button type="button">subscribe</button>
                    
                </div> <!--rss-->
        
                <div id="jstwitter">
                
                </div> <!--tweets-->
        
            </div><!--inner-->
       
       </div><!--outer-pad-->
        
    </footer>
    
    
    </body>
    </html>

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Posts
    134
    Thanks
    17
    Thanked 6 Times in 6 Posts
    and CSS:

    Code:
    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */
    
    /*********************************** RESETS ***********************************/
    
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /*********************************** TYPE ***********************************/
    
    
    @font-face{ 
    	font-family: 'museo';
    	src: url('fonts/Museo_Slab_500-webfont.eot');
    	src: url('fonts/Museo_Slab_500-webfont.eot?iefix') format('eot'),
    	     url('fonts/Museo_Slab_500-webfont.woff') format('woff'),
    	     url('fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
    	     url('fonts/Museo_Slab_500-webfont.svg#webfont') format('svg');
    }
    
    @font-face{ 
    	font-family: 'stmarie';
    	src: url('fonts/StMarie-Thin-webfont.eot');
    	src: url('fonts/StMarie-Thin-webfont.eot?iefix') format('eot'),
    	     url('fonts/StMarie-Thin-webfont.woff') format('woff'),
    	     url('fonts/StMarie-Thin-webfont.ttf') format('truetype'),
    	     url('fonts/StMarie-Thin-webfont.svg#webfont') format('svg');
    }
    
    body{
    	font-family: 'stmarie';
    	font-size:1.000em; /* 16px */
    	line-height:1.375em; /* 22px */
    	color:#333;
    }
    
    h1, h1 a{
    	font-family: 'museo';
    	font-size:1.188em; /* 19px */
    	text-decoration:none;
    	color:#66cc99;
    	text-transform:uppercase;
    }
    
    /*********************************** LINKS ***********************************/
    
    a, h1 a:hover{
    	text-decoration:none;
    }
    
    a{
    	color:#333;
    }
    
    a:hover{
    	text-decoration:underline;
    	color:#666;
    }
    
    h1 a:hover{
    	color:#66cc99;
    }
    
    .cats ul li a{
    	text-decoration:none;
    	text-transform:uppercase;
    }
    
    span a:hover{
    	text-decoration:none;
    }
    
    .main-nav li.current{
    	background: url(underline.png) center -10px no-repeat;
    }
    
    /*********************************** SEGMANTS ***********************************/
    
    
    body{
    	background-color:#ccc;
    }
    
    .inner, .inner-main{
    	width: 100%;
    	max-width: 1140px;
    	margin:0pt auto;
    }
    
    .inner-main{
    	overflow:auto;
    }
    
    #wrapper{}
    
    .top{
    	height:60px;
    	background-color:#666;
    }
    
    #header{
    	padding:20px 0px 20px 0px;
    	background-color:#fff;
    	overflow:hidden;
    }
    
    #sidebar{
    	padding-top:20px;
    	overflow:auto;
    
    }
    
    #main{
    	margin-top:50px;
    }
    
    #footer{
    	background-color:#000;
    }
    
    .outer-pad{
    	padding-left:20px;
    	padding-right:20px;
    }
    
    /*********************************** HEADER ***********************************/
    
    .inner{
    	position:relative;
    }
    
    .search{
    	float:right;
    	text-transform:uppercase;
    }
    
    .search input{
    	width:150px;
    	height:15px;
    	padding:5px;
    	margin-left:20px;
    	
    }
    
    #nav{
    	position:absolute;
    	bottom:0px;
    	right:0px;
    	width:70%;
    	text-align:right;
    }
    
    .logo{
    	width:30%;
    	float:left;
    }
    
    /*********************************** NAVIGATION ***********************************/
    
    #nav ul li{
    	display:inline-block;
    	margin-right:40px;
    
    }
    
    #nav ul li:last-child{
    	margin-right:0px;
    }
    
    /*********************************** SIDEBAR ***********************************/
    
    .cats{
    	overflow:hidden;
    	display:inline;
    	width:auto;
    }
    
    .float-l{
    	float:left;
    	margin-right:4.3859649122807%; /* 50 / 1140 */
    }
    
    .ads{
    	float:right;
    	width:29.8245614035088%; /* 340 / 1140 */
    }
    
    .ads img{
    	max-width:100%;
    }
    
    .cats ul{
    	width:13.1578947368421%; /* 150 / 1140 */ 
    }
    
    .cats ul li{
    	border-bottom: dotted 1px #000;
    	padding:5px 0px 5px 0px;
    }
    
    .cats ul li:first-child{
    	border-top: dotted 1px #000;
    }
    
    
    /*********************************** MAIN ***********************************/
    
    /*********************************** INSPIR-POST ***********************************/
    
    #article-inspir{
    	width:47.8070175438596%; /* 545 / 1140 */
    	float:left;
    	margin:0px 1.0964912280702% 50px 1.0964912280702%; /* 12.5 / 1140 */ 
    	background-color:#fff;
    }
    
    
    #article-inspir img{
    	max-width:100%;
    }
    
    .inspir-header{
    	padding:3.6697247706422%;  /* 20 / 545  */
    }
    
    .inspir-footer{
    	padding:0px 3.6697247706422% 20px 3.6697247706422%; /* 20 / 545  */
    	overflow:auto;
    }
    
    .inspir-title{
    	float:left;
    }
    
    .inspir-date{
    	float:right;
    }
    
    .inspir-tags{
    	margin-bottom:20px;
    }
    
    .inspir-cat{
    	padding: 0px 0px 20px 0.9174311926606%; /* 5 / 545 */
    	font-style:italic;
    }
    
    .inspir-comments{
    	text-align:right;
    	width:50%;
    	float:right;
    }
    
    .inspir-share{
    	width:50%;
    	float:left;
    }
    
    span{
    	background-color:#CCCCCC;
    	margin-right:10px;
    	padding:2px;
    	color:#000;
    	text-transform:uppercase;
    }
    
    
    /*********************************** SHADOW ***********************************/
    
    .drop-shadow {
    	position:relative;
    	background:#fff;
    	-webkit-box-shadow:0 0px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    	-moz-box-shadow:0 0px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    	box-shadow:0 0px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    
    .drop-shadow:before, .drop-shadow:after {
    	content:"";
    	position:absolute;
    	z-index:-2;
    }
    
    .curved:before {
    	top:10px;
    	bottom:10px;
    	left:0;
    	right:50%;
    	-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
    	-moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
    	box-shadow:0 0 15px rgba(0,0,0,0.6);
    	-moz-border-radius:10px / 100px;
    	border-radius:10px / 100px;
    }
    
    .curved-hz-1:before {
    	top:50%;
    	bottom:0;
    	left:10px;
    	right:10px;
    	-moz-border-radius:100px / 10px;
    	border-radius:100px / 10px;
    }
    
    /*********************************** FOOTER ***********************************/
    
    #page-change{
    	overflow:auto;
    	margin-bottom:40px;
    }
    
    .page-old{
    	float:left;
    	width:50%;
    }
    
    .page-new{
    	float:right;
    	width:50%;
    	text-align:right;
    }
    
    
    #footer{
    	height:530px;
    	padding: 40px 0px 0px 0px;
    }
    
    .follow-like{
    	text-align:right;
    	margin-bottom:20px;
    	width:47.8070175438596%; /* 545 / 1140 */
    	float:left;
    }
    
    .rss{
    	float:right;
    	width:47.8070175438596%; /* 545 / 1140 */
    	text-align:right;
    
    }
    
    .rss-title{
    	margin-bottom:20px;
    	text-align:right;
    }
    
    .rss input{
    	height:20px;
    	width:36.697247706422%; /* 200 / 545 */
    	background-color:#666666;
    	border:none;
    	padding:10px;
    	font-family: 'stmarie';
    	font-size:18px;
    }
    
    .rss input:focus{
    	outline:none;
    }
    
    .rss button{
    	height:40px;
    	width:27.5229357798165%; /* 150 / 545 */
    	margin-left:20px;
    	font-family: 'stmarie';
    	font-size:16px;
    }
    
    #jstwitter{
    	color:#fff;
    	width:47.8070175438596%; /* 545 / 1140 */
    	float:left;
    }
     
    #jstwitter .tweet {
        margin: 0 auto 15px auto;
        padding: 20px 0px 15px 0;
        border-top: 1px dotted #ccc;
    }
     
    #jstwitter .tweet a {
        text-decoration: none;
        color: #66cc99;
    }
     
    #jstwitter .tweet a:hover {
        text-decoration: underline;
    }
     
    #jstwitter .tweet .time {
    	text-align:right;
    	padding-top:20px;
        font-size: 10px;
        font-style: italic;
        color: #666666;
    }
    
    @media only screen and (min-width:751px) and (max-width:950px){/* SMALL DESKTOP */
    
    
    
    }
    
    @media only screen and (min-width:551px) and (max-width:750px){ /* IPAD */
    
    /*********************************** SEGMANTS ***********************************/
    
    .inner{
    	max-width:750px;
    }
    
    .inner_main{
    	overflow:auto;
    }
    
    #main{
    	width:73.3333333333333%; /* 550 / 750 */
    	margin-top:50px;
    	float:right;
    }
    
    #sidebar{
    	float:left;
    	width:20%; /* 150 / 750 */
    }
    
    /*********************************** SIDEBAR ***********************************/
    
    .float-l{
    	float:none;
    	margin-right:0px; /* 50 / 750 */
    }
    
    .ads{
    	float:none;
    	width:100%; 
    	margin-top:20px;
    }
    
    .cats ul{
    	width:100%; 
    }
    
    .cats ul li:first-child{
    	border-top:none;
    }
    
    /*********************************** INSPIR-POST ***********************************/
    
    #article-inspir{
    	width:100%;
    	float:none;
    	margin:0px 0px 50px 0px;  
    }
    
    }
    
    @media only screen and (min-width:351px) and (max-width:550px){ /* MOBILE WIDE */
    
    /*********************************** SEGMANTS ***********************************/
    
    .inner{
    	max-width:550px;
    }
    
    .inner_main{
    	overflow:auto;
    }
    
    #main{
    	width:100%;
    	margin-top:50px;
    	float:none;
    }
    
    #sidebar{
    	float:none;
    	width:100%; /* 150 / 750 */
    }
    
    /*********************************** SIDEBAR ***********************************/
    
    .float-l{
    	float:none;
    	margin-right:0px; /* 50 / 750 */
    }
    
    .ads{
    	display:none;
    }
    
    .cats ul{
    	width:100%; 
    }
    
    .cats ul li:first-child{
    	border-top:none;
    }
    
    /*********************************** INSPIR-POST ***********************************/
    
    #article-inspir{
    	width:100%;
    	float:none;
    	margin:0px 0px 50px 0px;  
    }
    
    /*********************************** FOOTER ***********************************/
    
    .rss{
    	display:none;
    }
    
    .follow-like{
    	width:100%;
    }
    
    }
    
    @media only screen and (min-width:0px) and (max-width:350px){ /* MOBILE */
    
    /*********************************** SEGMANTS ***********************************/
    
    .inner{
    	max-width:350px;
    }
    
    .inner_main{
    	overflow:auto;
    }
    
    #main{
    	width:100%;
    	margin-top:50px;
    	float:none;
    }
    
    #sidebar{
    	float:none;
    	width:100%; /* 150 / 750 */
    }
    
    /*********************************** SIDEBAR ***********************************/
    
    .float-l{
    	float:none;
    	margin-right:0px; /* 50 / 750 */
    }
    
    .ads{
    	display:none;
    }
    
    .cats ul{
    	width:100%; 
    }
    
    .cats ul li:first-child{
    	border-top:none;
    }
    
    /*********************************** INSPIR-POST ***********************************/
    
    #article-inspir{
    	width:100%;
    	float:none;
    	margin:0px 0px 50px 0px;  
    }
    
    /*********************************** FOOTER ***********************************/
    
    .rss{
    	display:none;
    }
    
    .follow-like{
    	width:100%;
    }
    
    
    
    }

  • #7
    Regular Coder
    Join Date
    Dec 2010
    Posts
    134
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Can no one help with this float issue ?

  • #8
    Regular Coder
    Join Date
    Dec 2010
    Posts
    134
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Knew it was simple.

    It was the clearfix below the #sidebar end tag.

    RESOLVED !


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •