Floating div problem

CHEWX

08-04-2012, 09:12 PM

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/

tempz

08-04-2012, 10:17 PM

Which is your side-menu?

tempz

08-04-2012, 10:19 PM

Can you show me like a screenshot of how it SHOULD look.

CHEWX

08-04-2012, 10:40 PM

www.chewx.co.uk/atw/1140CSSGRID_IPAD.jpg

CHEWX

08-05-2012, 11:10 AM

For the lazy ones.

HTML:

<!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>

</div>

</div>

<header id="header">

<div class="outer-pad">

<div class="inner">

<aside class="logo">

<img src="http://lorempixum.com/150/150/">

</aside> 

<div class="search">
Search
<input type="search" name="search" />

</div> 

<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>

<div style="clear: both;"></div>

</div>

</div>

</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> 

<div class="ads">

<img src="http://lorempixum.com/340/150/" />

</div> 

</aside> 

<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> 

<div class="inspir-date">

12th July 2012

</div> 

<div style="clear: both;"></div>

</header> 

<footer class="inspir-footer">

<div class="inspir-cat">

<a href="">minimal</a>, <a href="">responsive</a>

</div> 

<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> 

<div class="inspir-share">

sdsdsd

</div>

<div class="inspir-comments">

<a href="">comments(0)</a>

</div>

<div style="clear: both;"></div>

</footer> 

</article> 

<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> 

<div class="inspir-date">

12th July 2012

</div> 

<div style="clear: both;"></div>

</header> 

<footer class="inspir-footer">

<div class="inspir-cat">

<a href="">minimal</a>, <a href="">responsive</a>

</div> 

<div class="inspir-tags">

<span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span>

</div> 

<div class="inspir-comments">

<a href="">comments(0)</a>

</div>

</footer> 

</article> 

<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> 

<div class="inspir-date">

12th July 2012

</div> 

<div style="clear: both;"></div>

</header> 

<footer class="inspir-footer">

<div class="inspir-cat">

<a href="">minimal</a>, <a href="">responsive</a>

</div> 

<div class="inspir-tags">

<span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span>

</div> 

<div class="inspir-comments">

<a href="">comments(0)</a>

</div>

</footer> 

</article> 

<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> 

<div class="inspir-date">

12th July 2012

</div> 

<div style="clear: both;"></div>

</header> 

<footer class="inspir-footer">

<div class="inspir-cat">

<a href="">minimal</a>, <a href="">responsive</a>

</div> 

<div class="inspir-tags">

<span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span><span>tag</span>

</div> 

<div class="inspir-comments">

<a href="">comments(0)</a>

</div>

</footer> 

</article> 

<div style="clear: both;"></div>

</section> 

<aside id="page">

</aside> 

</div>

</div>

</div> 

<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>

</div>

</div>

<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> 

<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> 

<div id="jstwitter">

</div> 

</div>

</div>

</footer>

</body>
</html>

CHEWX

08-05-2012, 11:11 AM

and CSS:

/* 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%;
}

}

CHEWX

08-07-2012, 06:07 PM

Can no one help with this float issue ?

CHEWX

08-07-2012, 09:18 PM

Knew it was simple.

It was the clearfix below the #sidebar end tag.

RESOLVED !