I was trying to apply iScroll to my scrolling item however i dont understand the way it works.
it cuts off bottom content
it makes additional margin top for some reason
this is the code
var _scroll = new IScroll('.helper', {
mouseWheel: true,
scrollbars: true
});
div {
box-sizing:border-box;
}
.main {
width:600px;
margin:20px auto;
height:300px;
background:crimson;
border:solid 1px #000;
padding:10px;
}
.helper {
height:100%;
position:relative;
overflow:hidden;
}
.scroller {
background:cornflowerblue;
}
.box {
height:50px;
background:#ccc;
border:solid 1px #000;
margin:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<div class="main">
<div class="helper">
<div class="scroller">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Maybe someone could help me with this one.
Related
I want to create a gallery which the images get bigger in the middle.
The ammont of images are random.
With this code, I could find the middle, but I dont know how to change the size of the Images ascendens and/or descendant.
var boxes = document.querySelectorAll(".box");
var middle = boxes[Math.round((boxes.length - 1) / 2)];
middle.style.width = "70px"
middle.style.height= "70px"
.container{
display:flex;
justify-content:center;
align-items:center;
}
.box{
width:50px;
height:50px;
background-color:black;
margin:10px;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
something like this.. you can play with the number, depending on how much bigger or smaller you want them..
var boxes = document.querySelectorAll(".box");
var middle_index = Math.round((boxes.length - 1) / 2);
for ( var i=0; i<boxes.length; i++) {
boxes[i].style.width = `${70-Math.abs(boxes.length-i*2-1)*5}px`;
boxes[i].style.height = `${70-Math.abs(boxes.length-i*2-1)*5}px`;
}
.container{
display:flex;
justify-content:center;
align-items:center;
}
.box{
width:50px;
height:50px;
background-color:black;
margin:10px;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Same as the other answer except the size calculation is moved to CSS
const boxes = document.querySelectorAll(".box");
let middle = Math.floor((boxes.length - 1) / 2);
const reductionModifier = 4; //Reduces size diff, higher means less diff.
const marginModifier = -1; //-1 means margin will be -10px
boxes.forEach((e, i) => {
e.style.setProperty('--s', 1 - ((Math.abs(i - middle) / boxes.length) / reductionModifier));
e.style.setProperty('--m', i == middle ? 1 : marginModifier);
e.style.setProperty('--z', 1 - Math.abs(i - middle));
});
.container{
display:flex;
justify-content:center;
align-items:center;
}
.box {
border: 1px solid red;
width: calc(70px * var(--s));
height: calc(70px * var(--s));
background-color:black;
margin: calc(10px * var(--m));
z-index: calc(10 * var(--z));
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
I am making an interactive puzzle where the user is supposed to change the color of particular blocks in order to make an image. In this case, I would like a pop up to appear (the pop up currently hidden) when all particular blocks are X color. I know how to trigger a 1 click pop up, but I don't know how to make it so when MULTIPLE boxes are the right color, the pop up is revealed to advance the player to the next puzzle. My sad attempt can be found at the bottom of the JS (the audio right now isn't important).
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Block Party</title>
<link rel="stylesheet" href="gridtest.css">
</head>
<body>
<div class="boxorganization">
<div class="popup">
<div class="congrats">puzzle <br>complete!</div>
<div class="next">next</div>
</div>
<!-- 20 boxes per group MAGENTA BOXES-->
<div class="box" id="specialbox"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
<audio id="coin" src="sounds/coin.mp3"></audio>
<audio id="ding" src="sounds/ding.mp3"></audio>
<audio id="drip" src="sounds/drip.mp3"></audio>
<audio id="flick" src="sounds/flick.mp3"></audio>
<audio id="power" src="sounds/power.mp3"></audio>
<audio id="zap" src="sounds/zap.mp3"></audio>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="gridtest.js" charset="utf-8"></script>
Here is my CSS:
html{
height: 100%;
}
*, *::before, *::after{
box-sizing: border-box;
}
body{
box-sizing: border-box;
background-color: #00008B;
}
.boxorganization{
position: absolute;
width: 500px;
top: 85px;
left: 400px;
display: flex;
flex-wrap: wrap;
}
.box{
width: 50px;
height: 50px;
background: magenta;
/*margin: -.5px;*/
border: 1px solid #00008B;
}
.specialbox{
width: 50px;
height: 50px;
background: magenta;
/*margin: -.5px;*/
border: 1px solid #00008B;
}
.popup{
display: none;
position: absolute;
top: 50%;
margin-top: -250px;
left: 50%;
margin-left: -250px;
width: 500px;
height: 500px;
opacity: 0.8;
background-color: yellow;
}
.popupvisible{
position: absolute;
top: 50%;
margin-top: -250px;
left: 50%;
margin-left: -250px;
width: 500px;
height: 500px;
opacity: 0.8;
background-color: yellow;
}
.congrats{
font-family: 'Primetime';
font-size: 50px;
text-align: center;
position: absolute;
left: 25%;
top: 35%;
color: magenta;
opacity: 1;
}
.next{
font-family: 'Primetime';
font-size: 50px;
text-align: center;
position: absolute;
left: 38%;
top: 62%;
color: magenta;
opacity: 1;
}
/*~~~~~~~block colors~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.yellow{
background: yellow;
}
.blue{
background: -webkit-linear-gradient(315deg, magenta 50%, yellow 50%);
/*background: blue;*/
}
.red{
background: -webkit-linear-gradient(45deg, magenta 50%, yellow 50%);
/*background: red;*/
}
.green{
background: -webkit-linear-gradient(135deg, magenta 50%, yellow 50%);
/*background: green;*/
}
.white{
background: -webkit-linear-gradient(225deg, magenta 50%, yellow 50%);
/*background: white;*/
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
and here is the JS:
// INDEX TITLE HOVER EFFECT
$(".title").hover(function () {
$(".title").addClass("titlehover");}, function () {
$(".title").removeClass("titlehover");
});
// INSTRUCTIONS HOVER EFFECT
$(".instructions").hover(function () {
$(".instructions").addClass("instructionshover");}, function () {
$(".instructions").removeClass("instructionshover");
});
// TITLE PAGE FADE INS
$(document).ready(function(){
$(".title").hide(0).delay(100).fadeIn(2000)
});
$(document).ready(function(){
$(".by").hide(0).delay(700).fadeIn(2000)
});
// PAGE 1 TITLE EFFECT
$(".text").hover(function () {
$(".text").addClass("texthover");}, function () {
$(".text").removeClass("texthover");
});
// BOX SOUNDS
//
// $('.box').click(function()){
// $(this).play('coin.mp3')
// });
// box color
$('.box').click(function(){
$(this).addClass(function(index,currentClass){
console.log(currentClass)
if(currentClass == 'box'){
$('#drip')[0].play()
return 'yellow'
}
if(currentClass == 'box yellow'){
$(this).removeClass('yellow')
$('#ding')[0].play()
return 'blue'
}
if(currentClass == 'box blue'){
$(this).removeClass('blue')
$('#flick')[0].play()
return 'red'
}
if(currentClass == 'box red'){
$(this).removeClass('red')
$('#drip')[0].play()
return 'green'
}
if(currentClass == 'box green'){
$(this).removeClass('green')
$('#ding')[0].play()
return 'white'
}
if(currentClass == 'box white'){
$(this).removeClass('white')
$('#flick')[0].play()
}
// ~~~~~~~~~~~~~ I would like for popupvisible to appear when ALL of the correct blocks are turned yellow or whatever color
if ('#specialbox' == 'box yellow'){
$("popup").addClass('popupvisible')
// or should it be "this" instead of popup?
})
});
When you click on a box, give it a class or something that indicates it was clicked/selected. You'll want to give all of the boxes a consistent class or something so that you can loop through all of them and check to see if they're selected or not. And if you loop through them all and they're all selected, show the popup. Otherwise, hide it. Here's a demo.
var $boxes = $('.box');
$('.box').on('click',function() {
var allSelected = true,
$popup = $('.popup');
$(this).toggleClass('selected');
$boxes.each(function() {
if (!$(this).hasClass('selected')) {
allSelected = false;
}
})
if (allSelected) {
$popup.addClass('popupvisible');
} else {
$popup.removeClass('popupvisible');
}
})
.box {
width: 50px;
height: 50px;
background: magenta;
border: 1px solid #00008B;
display: inline-block;
}
.selected {
background: purple;
}
.popup {
display: none;
}
.popupvisible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="popup">popup</div>
The solution is to set up a click event handler on all the boxes that record that box color and check that record upon each click to know whether or not to display the popup.
Your code is too long to modify here, but here is a scaled down example that you could implement with your code:
// Get a collection of all the "cells"
var cells = document.querySelectorAll(".cell");
// Set up an array of possible colors
var colors = ["red", "green", "blue", "yellow", "orange", "gray", "aqua"];
// This is the record of which cell is what color:
var storage = {
cell0: "",
cell1: "",
cell2: "",
cell3: ""
};
// Set a click event handler on each cell
Array.prototype.slice.call(cells).forEach(function(cell, index){
cell.addEventListener("click", function(e){
// Change the cell color to a random color from the colors array
var c = Math.floor(Math.random() * colors.length);
e.target.style.backgroundColor = colors[c];
// Store cell and color:
storage["cell" + index] = c;
// Debugger test
console.clear();
console.log(storage);
// Test to make sure all cells have had an initial color set for them
var initialized = true;
for(var prop in storage){
if(storage[prop] === ""){
initialized = false;
break;
}
}
// Only check for color matches after each cell has had an initial
// color set for it (each cell has been clicked once).
if(initialized){
// Check to see if two adjacent cells have same color
if(storage.cell0 === storage.cell1 ||
storage.cell0 === storage.cell2 ||
storage.cell1 === storage.cell3 ||
storage.cell2 === storage.cell3){
alert("You win!");
}
}
});
});
.row1, .row2 { display:table-row; }
.cell {
display:table-cell;
height:50px;
width:50px;
border:1px solid black;
padding:5px;
}
<div class="row1">
<div class="cell">One</div>
<div class="cell">Two</div>
</div>
<div class="row2">
<div class="cell">Three</div>
<div class="cell">Four</div>
</div>
This code I written for to show child category when clicking on the parent category. And it working good.
$(function(){
$(".class1-parrent").on("click",function(){
$(".after-class").css("display","none");
$('.class1-child').appendTo('.after-4');
$(".after-4").css("display","flex");
$(".common-child-class").css("display","none");
$(".class1-child").css("display","block");
});
$(".class2-parrent").on("click",function(){
$(".after-class").css("display","none");
$('.class2-child').appendTo('.after-4');
$(".after-4").css("display","flex");
$(".common-child-class").css("display","none");
$(".class2-child").css("display","block");
});
});
.after-4, .after-5 {
border: 1px solid black;
display:none;
width:100%;
}
.common-parrent-class {
border:1px solid black;
margin:2px;
float:left;
width:20%;
cursor:pointer;
}
.main, .sub-category {
display: inline-table;
padding:22px;
border:1px solid black;
}
.sub-category {
margin-top:10%;
display:none;
width:100%;
}
.common-child-class {
display:none;
width:100%;
}
.inner {
float:left;
width:24%;
margin:2px;
}
#media screen and (max-width: 299px) and (min-width:200px){
.common-parrent-class, .inner {
width:60%;
}
}
#media screen and (max-width: 420px) and (min-width:300px){
.common-parrent-class, .inner {
width:40%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 main">
<div class="main-category">
<div class="class1-parrent common-parrent-class">Class1</div>
<div class="class2-parrent common-parrent-class">Class2</div>
<div class="class3-parrent common-parrent-class">Class3</div>
<div class="class4-parrent common-parrent-class">Class4</div>
<div class="after-4 after-class"></div>
<div class="class5-parrent common-parrent-class">Class5</div>
<div class="after-5 after-class"></div>
</div>
<div class="sub-category">
<div class="class1-child common-child-class">
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
</div>
<div class="class2-child common-child-class">
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
</div>
</div>
</div>
</div>
</div>
Here I only write code for class1 and class2.
What I need is when we click parent category(class) then
(1) Show it's child category & after-class if child category not
displayed
(2)Hide it's child category & after-class if it is already
How to do this ?
Here is the jsfiddle for solution:
Demo
You can write like this to show and hide.
Edit : To hide after class then modify the code to this
if(status == 'none'){
$('.'+$child).appendTo('.after-4');
$(".after-4").css("display","flex");
$(".common-child-class").css("display","none");
$('.'+$child).css("display","block");
}
if(status == 'block'){
$(".after-4").css("display","none");
}
Here is the solution. Add the given jquery.
$(".class3-parrent").on("click",function(e){
$(".common-child-class").hide();
$(".after-4.after-class").hide();
});
Working DEMO!!!
Use the toggle(), I have done a basic sample. You can do the styling and aligment part.
$(function(){
$(".class1-parrent").on("click",function(){
//$(".after-class").css("display","none");
//$('.class1-child').appendTo('.after-4');
//$(".after-4").css("display","flex");
//$(".common-child-class").css("display","none");
//$(".class1-child").css("display","block");
//$('.class1-child common-child-class').toggle('show');
//$(".common-child-class").css("display","none");
$(".class1-child").toggle('hide')
});
$(".class2-parrent").on("click",function(){
//$(".after-class").css("display","none");
//$('.class2-child').appendTo('.after-4');
//$(".after-4").css("display","flex");
//$(".common-child-class").css("display","none");
//$(".class2-child").css("display","block");
$(".class2-child").toggle('hide')
});
});
.after-4, .after-5{
border: 1px solid black;
display:none;
width:100%;
}
.common-parrent-class{
border:1px solid black;
margin:2px;
float:left;
width:20%;
cursor:pointer;
}
.main, .sub-category{
display: inline-table;
padding:22px;
border:1px solid black;
}
.sub-category{
margin-top:10%;
display:none;
width:100%;
}
.common-child-class{
display:none;
width:100%;
}
.inner{
float:left;
width:24%;
margin:2px;
}
#media screen and (max-width: 299px) and (min-width:200px)
{
.common-parrent-class, .inner{
width:60%;
}
}
#media screen and (max-width: 420px) and (min-width:300px)
{
.common-parrent-class, .inner{
width:40%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 main">
<div class="main-category">
<div class="class1-parrent common-parrent-class">Class1</div>
<div class="class1-child common-child-class" >
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
</div>
<div class="class2-parrent common-parrent-class">Class2</div>
<div class="class2-child common-child-class">
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
</div>
<div class="class3-parrent common-parrent-class">Class3</div>
<div class="class4-parrent common-parrent-class">Class4</div>
<div class="after-4 after-class"></div>
<div class="class5-parrent common-parrent-class">Class5</div>
<div class="after-5 after-class"></div>
</div>
<div class="sub-category">
</div>
</div>
</div>
</div>
I have two rows of data (green) and a header (red), which should be visible at all times:
Check out the example I already have:
http://jsfiddle.net/j9C8R/33/
Now the red header scrolls away together with the content, but it should stick to where it is now, but scroll vertically with the content (MS Excel style).
How can this be achieved (preferably with only CSS).
UPDATE: It is important that the red headers scroll vertically along with the corresponding content but stick to the left edge when scrolling horizontally.
.main {
background-color: blue;
overflow: scroll;
height: 200px;
width: 400px;
}
.row {
height: 50px;
overflow: scroll;
clear: both;
width: 1000px;
background-color: yellow;
}
.sticky,
.content {
float: left;
width: 150px;
border: 1px solid black;
}
.sticky {
background-color: red;
}
.content {
background-color: green;
}
<div class="main">
<div class="row">
<div class="sticky">Sticky header A</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
</div>
<div class="row">
<div class="sticky">Sticky header B</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
</div>
<div class="row">
<div class="sticky">Sticky header C</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
</div>
<div class="row">
<div class="sticky">Sticky header D</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
</div>
<div class="row">
<div class="sticky">Sticky header E</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
</div>
</div>
UPDATE
please note the below is now a little out of date as we have css position sticky
Original Post
I do not think it is possible to achieve your goal through pure css as items that are sticky usually use position:fixed which unfortunately fixes them relative to the viewport.
with the use of javascript (in this case the jquery library) and absolute positioning, you should be able to achieve what you are after:
$('.main').scroll(function() {
$(this).find('.sticky').css('left', $(this).scrollLeft());
});
.main {
background-color:blue;
overflow:scroll;
height:200px;
width:400px;
}
.row {
height:50px;
overflow:scroll;
clear:both;
width:1000px;
position:relative;
background-color:yellow;
padding-left:150px;
box-sizing:border-box;
}
.sticky, .content {
float:left;
width:150px;
border:1px solid black;
}
.sticky {
background-color:red;
position:absolute; left:0; top:0;
}
.content {
background-color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>
Ok I've scrapped your thing and have made a complete new one, I've just not wrapped up things inside a position relative container but you can manage to do it atleast
The things are easy for vertical scroll but if you expect horizontal scroll and move headers along, (CSS Wont Just Do It)
Demo
CSS
.head {
background-color: #f00;
width: 300px;
position: absolute;
left: 100px;
}
.head table {
width: 100%;
}
.body {
position: relative;
left: 100px;
top: 20px;
width: 300px;
height: 50px;
overflow-y: auto;
}
.body table {
width: 100%;
}
.body td {
width: 100px;
}
.head table td {
width: 100px;
}
.left {
position: absolute;
background-color: #0f0;
width: 90px;
top: 40px;
}
I am building a website with content in small divs. They are all floating left so basically it's all tiled. I want a banner every third row. How many content divs are visible depends on the users screen width. I had a solution in JavaScript, but IE doesn't like that.
More graphic: this is what I want:
and on a wider screen things should look like this:
This is what I came up with:
Preview: http://jsfiddle.net/Yqy9B/5/embedded/result/
<div class="row clear">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row clear">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="advert">
Advertisement
</div>
.row {
height:80px; /*height = 10px margin(top/bottom) + 60px height of .box */
overflow: hidden;
}
.box {
width:160px;
height:60px;
float:left;
background:#999;
margin:10px;
display:inline;
}
.advert {
width:485px;
height:60px;
margin:10px auto;
background:red;
text-align:center;
line-height:60px;
}
.clear:before, .clear:after { content:""; display:table; }
.clear:after { clear:both; }
.clear { zoom:1; } /* For IE 6/7 (trigger hasLayout) */
Is that what you are talking about?
http://jsfiddle.net/Yqy9B/5/
Update:
For the overlapping issue in Chrome and Safari, I've added some code that will add some padding for those browsers, as I could not find a more elegant cross-browser solution. To see the version with the additional code, see http://jsfiddle.net/Yqy9B/16/. I've also updated the code below.
Using a combination of clear: and float: properties in CSS, we can space the advertisements down one side and the content down the other. This will allow for the content to flow around the advertisements, which will keep the ads in the same spot on resize, but flow the content boxes below it.
Here's an example: http://jsfiddle.net/cjyoung1/Yqy9B/10/ (update: new example to address overlap: http://jsfiddle.net/Yqy9B/16/)
(Note: I left the spacer as red to show how it works, you can change it to your background color or transparent - but needs to be at least 1px wide to work properly in some browsers)
The CSS:
.box {
width:160px;
height:60px;
margin:10px;
background:#999;
display:inline-block;
}
.advert {
width:100%;
height:60px;
margin:10px auto;
background:red;
text-align:center;
line-height:60px;
display:block;
float:right;
clear:right;
}
.spacer {
float:right;
clear: right;
height: 250px;
width: 1px;
background: #f00;
}
/* **Below are the updates to fix the overlap in other browsers** */
/* fix webkit overlap */
#media screen and (-webkit-min-device-pixel-ratio:0) {
.advert{
margin-top:80px;
}
.spacer{
margin-bottom:-80px;
}
}
/* fix IE6 overlap */
* html .advert {
margin-top: 40px;
}
The HTML:
<!-- floating to right -->
<span class="spacer"></span>
<span class="advert">Advertisement</span>
<span class="spacer"></span>
<span class="advert">Advertisement</span>
<!-- floating to left -->
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>