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>
Related
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.
I am trying to convert my site to mobile friendly. The easiest way I believe is to hide certain sections when in mobile view and just show the MAIN CONTENT. The site is general divided up like this:
<div class="main">
<div id="header_holder">
HEADER CONTENT
</div>
<div class="side">
<cfinclude template="menu.cfm">
<div class="sidebot">Title 1</div>
<div class="space10">image 1</div>
<div class="space10">image 2</div>
<div class="space10">image 3</div>
<div class="sidebot">Title 2</div>
<div class="lineG2"></div>
<div class="sidebot">Title 3</div>
</div>
<div class="content">
<div class="cLeft">
MAIN CONTENT
</div>
<div class="cRight">
right content 1
right content 2
<cfinclude template="ads.cfm">
</div>
</div>
<div class="footer">
footer content
</div>
</div>
The CSS:
.main{width:960px;margin:0 auto;overflow:hidden;zoom:1}
.side{
float:left;
width:110px;
margin-right:10px;
}
.sidebot{float:left;width:110px;padding-top:20px;font-weight:bold;}
.content{width:840px;float:left}
.content .cLeft{float:left;width:530px;margin-right:10px;}
.content .cRight{float:left;width:300px;margin-bottom:10px;}
.lineGrey {
border-top: 1px solid #C1C1C1;
list-style-type: none;
padding:20px 0px;
overflow: hidden;
width: 100%;
height: 220px;
}
.space10{float:left;margin-top:10px;}
I want to hide the left side ("side") and right side ("cRight") leaving the MAIN CONTENT intact when in mobile view. According to instructions I am supposed to be able to do so by using #media for example like this:
#media screen and (max-width: 530px) {
.side{
visibility: hidden;
clear: both;
display: none;
float:left;
width:110px;
margin-right:10px;
}
}
Well, it does hide the "side" in mobile mode i.e. when it is less than 530. However, it messed up the original desktop format. The "side" menu is displayed properly on the left, but the rest of the "side" content:
<div class="sidebot">Title 1</div>
<div class="space10">image 1</div>
<div class="space10">image 2</div>
<div class="space10">image 3</div>
<div class="sidebot">Title 2</div>
<div class="lineG2"></div>
<div class="sidebot">Title 3</div>
went to the top of the left main content "cLeft". Similar issue with the "cRight" when in desktop mode when I wrap it with:
#media screen and (max-width: 530px) {
.content .cRight{
visibility: hidden;
clear: both;
display: none;
float:left;
width:300px;
margin-bottom:10px;
}
}
some of the cRight content
right content 2
<cfinclude template="ads.cfm">
went to the bottom of the left main content "cLeft". I am at lost as to what happened. Why would it mess up the desktop mode format?
Q2. If we solve this will this work with older version of CSS? i.e. in older browser IE 7?
Any help is appreciated.
I'm not 100% sure what your question is but if you're trying to get rid of content, cRight and side div , then just paste this code here below your Desktop CSS.
CSS is read by the browser top to bottom so if you add all that other code below your display:none, then you're gonna have some different outcomes than display:none because CSS is read top to bottom.
Hope this helps
#media screen and (max-width: 530px) {
.side{
visibility: hidden;
clear: both;
float:left;
width:110px;
margin-right:10px;
display: none;
}
.content .cRight{
visibility: hidden;
clear: both;
float:left;
width:300px;
margin-bottom:10px;
display: none;
}
}
I found many solutions on the internet about different height image grids but i'm trying to make an easy div grid with different heights.
See my JSfiddle here:
http://jsfiddle.net/44ffoafu/1/
(I want the blocks to float into the empty spaces)
I already tried adding one of the following display tags to the div's but they don't work.
display:inline;
display:inline-block;
display:block;
display:table-cell;
I know of javascripts like FreeWall and Masonry but i'm looking for an easier way and a way that works with percentages. A CSS only solution is what i'm looking for but if someone has a small javascript hack, please let me know too!
you can try this one:
only use pure CSS : column-count & column-gap.
firstly:
change your html like this one:
<div class='wrapper'>
<div class="block" id="one"></div>
<div class="block" id="two"></div>
<div class="block" id="three"></div>
<div class="block" id="four"></div>
<div class="block" id="five"></div>
<div class="block" id="six"></div>
<div class="block" id="seven"></div>
<div class="block" id="eight"></div>
<div class="block" id="nine"></div>
<div class="block" id="ten"></div>
<div class="block" id="eleven"></div>
<div class="block" id="twelf"></div>
<div class="block" id="thirteen"></div>
</div>
and then change your css code like this:
.wrapper {
-moz-column-count: 4;
-moz-column-gap: 5px;
-webkit-column-count: 4;
-webkit-column-gap: 5px;
column-count: 4;
column-gap: 5px;
}
.block{
width:100%;
display:inline-block;
margin-bottom: 0px;
margin-top:0px;
}
#one {
height:150px;
background:#ff0000;
}
#two {
height:150px;
background:#00ff00;
}
#three {
height:300px;
background:#0000ff;
}
#four {
height:150px;
background:#000000;
}
#five {
height:150px;
background:#ff0000;
}
refresh your browser.
it's work fine for me.
Im trying to do a simple layout with css and html, the layout consist of a menu on the left and some boxes on the right side, the idea is that the left side will alway be a menu. How can I fix that the content never get under the menu ? or how can I exapand the menu
FIDDLE Demo http://jsfiddle.net/56JdE/
CSS
#wrapper
{
margin:0 auto;
width:960px;
height:auto;
}
#leftNav
{
height:500px;
width:200px;
background:#F00;
float:left;
margin-right:10px;
}
#div1
{
height:200px;
width:250px;
float:left;
background:#000;
margin-right:10px;
}
#div2
{
height:300px;
width:400px;
background:#00C;
float:left;
margin-right:10px;
}
#div3
{
height:200px;
width:250px;
float:left;
background:#00C;
margin-right:10px;
}
#div4
{
height:200px;
width:400px;
float:left;
background:#000;
margin-right:10px;
}
HTML
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<div id="div4">
</div>
</div>
From the look of your FIDDLE, I believe the question is why is my div under the menu?
This is because you have two div4's.
I amended your FIDDLE Demo which fixed the issue.
<div id="div4">
</div>
<div id="div4"> -Remove this!
</div> -And this!
Having two div4's caused the total width to exceed your wrapper width making the float:leftproperty move the div to under your menu.
You can just wrap the div's in another div, and make the margin 210px to left so that is never goes underneath the menu.
#contentRight{
margin-left:210px;
}
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="contentRight">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div class="div4"></div>
<div class="div4"></div>
</div>
See a working example here: http://jsfiddle.net/mtruty/HQ6WJ/3/
Also, ID's should correspond to a single element within the DOM. You should change that second div4 to div5, or make those div's classes. (e.g. class="div4"). I bet you were just adding that extra div4 to show how the box overflowed, but none the less, it is good to always make sure your markup is valid.
Just add a wrapper around content, and set the apropriate width's so they match the parent wrapper.
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="content_wrapper">
...
</div>
See fiddle:
http://jsfiddle.net/56JdE/2/
There's two simple ways you could do this. Either add some padding to the wrapper, maybe 20% to the left or whatever the width of the menu would be, and then absolutely position that menu to the left.
OR
You could create a parent container for your content, within the wrapper, and float both the menu ( first ) and the new container to fill up the wrapper accordingly. If you go the float method you'd have to add a clear somewhere after the content to keep the wrapper from collapsing, or float it as well.
.wrapper {
margin:0 auto;
}
.menu {
height:500px;
width:20%;
float: left;
background: red;
}
.content {
width: 80%;
float: left;
}
Full example # http://jsfiddle.net/M58C6/2/
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;
}