I'm currently trying to make a color gradient in javascript with numerical values in some of the divs to represent as the scale. However, I've noticed with larger values, the numbers get cut off due to the float:left. I've also tried used display:inline-block, but it seems that has weird positioning and leaves gaps between them. I need the divs flush together, but just have the text overflow ontop of the following div. Is there a way to do this?
Both examples I mentioned are here:
http://jsfiddle.net/y3LTZ/3/
<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
</div>
and
<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
<div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
<div style="width: 20px;height:100%;float:left;background-color:green;"></div>
<div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
<div style="width: 20px;height:100%;float:left;background-color:green;"></div>
<div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
</div>
Thanks!
DEMO
using inline-block
HTML
<div class="wrapper">
<div class="single-block red">texts</div>
<div class="single-block green"></div>
<div class="single-block red">texts</div>
<div class="single-block green"></div>
<div class="single-block red">texts</div>
</div>
CSS
.wrapper{
width: 600px;
height: 30px;
white-space: nowrap;
font-size:0;
}
.single-block{
width:20px;
height:100%;
display:inline-block;
vertical-align:bottom;
font-size:16px;
}
.red{
background-color:red;
position:relative;
}
.green{
background-color:green;
}
If you want the text overlap the following div, you have to give them position:absolute;
<div style="position: relative; overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
<div class="column" style="background-color:red;">
<div class="textontop">texts</div>
</div>
<div class="column" style="background-color:green;"></div>
<div class="column" style="background-color:red;">
<div class="textontop">texts</div>
</div>
<div class="column" style="background-color:green;"></div>
<div class="column" style="background-color:red;">
<div class="textontop">texts</div>
</div>
</div>
Css:
.column {
width:20px;
height:100%;
overflow: visible;
float:left;
z-index:0;
}
.textontop {
position:absolute;
z-index:999;
}
Jsfiddle:
http://jsfiddle.net/y3LTZ/5/
Related
I want to display 5 poker cards laid side by side with horizontal margin just like on a poker table. I tried this but I can't make it display:
I also want this to be responsive that is it preserves aspect ratio when resized.
.card {
width: 100%;
height: 100%;
background-size: cover;
}
.is2d .two.hearts {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4=')}
<div class="poker is2d">
<div class="middle">
<div class="card two hearts"></div>
<div class="card two hearts"></div>
<div class="card two hearts"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
As Armedin said, you do not have any content inside your div. Width and height 100% won't do anything.
I suggest you to put the image not as background, as it won't change the dimensions of the div. Use img tag and display: inline; for the card div.
.card {
width: 100%;
height: 100%;
background-size: cover;
display:inline;
}
<div class="poker is2d">
<div class="middle">
<div class="card two hearts"> <img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4='/></div>
<div class="card two hearts"> <img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4='/></div>
<div class="card two hearts"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
Edit: If you do not want to use img you can put the img to invisible and then use the background image as the div would still have the dimensions of the img tag inside. Not a good solution, but it would work.
Learn flex or grid; both very useful for things like this.
Flex example:
html, body {
height: 100%;
margin: 0;
}
.card {
border: 1px black solid;
border-radius: 15px;
flex-grow: 1;
padding: 5px;
margin: 5px;
}
.container {
display: flex;
height: 100%;
}
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
I was tried to make child div take height 100% but it's not working, so I'd like to know why it is not working:
I give html, body height: 100% then .hero height 100% and .hero-image must be 100%:
html, body{
height:100%;
}
.hero{
width:100%;
height:100%;
border:1px solid #0094ff;
.hero-image{
width:100%;
height:100%;
background-image:url('../images/1.jpg');
background-size:cover;
}
}
<section class="hero">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="hero-image">
Hello
</div>
</div>
<div class="col-lg-6">
<div class="hero-content">
<h1>Hey, I Am Mike Ross</h1>
<p>
Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
</p>
</div>
<div class="skills">
</div>
</div>
</div>
</div>
</section>
Height 100% is a very elusive issue, and normally creates more problems than it solves. However, to answer your question:
Basically, every container between the html element and the element you want to be 100% must have height: 100%; on it.
So, in your case, this means the following CSS must be added:
/* These styles get all of the containers to 100% height */
/* address ONLY sub-elements of .hero element to prevent issues with other pages / code */
.hero .container-fluid,
.hero .row,
.hero [class*="col-"] {
height: 100%;
}
Below is your code, built into a snippet, so you can see it work. Note that I've additionally added col-sm-6 classes to your col-lg-6 elements so you can see it work in a narrower window. (NOTE: click the "Expand Snippet" link in order to get a wide enough window to see it working).
html,
body {
height: 100%;
}
.hero {
width: 100%;
height: 100%;
border: 1px solid #0094ff;
}
.hero-image {
width: 100%;
height: 100%;
background-image: url('http://via.placeholder.com/500x100');
background-size: cover;
}
/* These styles get all of the containers to 100% height */
.hero .container-fluid,
.hero .row,
.hero [class*="col-"] {
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="hero">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-6">
<div class="hero-image">
Hello
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="hero-content">
<h1>Hey, I Am Mike Ross</h1>
<p>
Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
</p>
</div>
<div class="skills">
</div>
</div>
</div>
</div>
</section>
.hero-image is not taking 100% of a parent because container-fluid, row and col-lg-6 height is not 100%
html, body{
height:100%;
}
.hero{
width:100%;
height:100%;
border:1px solid #0094ff;
}
.heroFullHeight{
/*height: inherit;*/
height:100%;
}
.hero-image{
width:100%;
height:100%;
background-image:url('../images/1.jpg');
background-size:cover;
background-color: red;
}
<section class="hero">
<div class="container-fluid heroFullHeight">
<div class="row heroFullHeight">
<div class="col-lg-6 heroFullHeight">
<div class="hero-image">
Hello
</div>
</div>
<div class="col-lg-6">
<div class="hero-content">
<h1>Hey, I Am Mike Ross</h1>
<p>
Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
</p>
</div>
<div class="skills">
</div>
</div>
</div>
</div>
</section>
<div class="main">
<div class="test" style="width:40px;height:100px"><div>
<div class="test" style="width:20px;height:150px;"><div>
<div class="test" style="width:40px;height:100px;"><div>
<div class="test" style="width:40px;height:100px;"><div>
</div>
.main{
position:relative;
border:1px solid red;
width:140px;
height:400px;
}
.test{
float:left;
border:1px solid silver;
position:relative;
padding:10px;
display:inline-block;
}
Div and its height and width are coming dynamically. I am trying to fit the div width in the layout .2 per on raw.
Please suggest.
The height of the container div should be auto. So, it'll take the optimal space to fit the inner elements.
.main {
...
height: auto;
}
Demo
.main {
border: 1px solid red;
width: 140px;
height: auto;
overflow: hidden;
}
.test {
float: left;
border: 1px solid silver;
position: relative;
padding: 10px;
display: inline-block;
}
<div class="main">
<div class="test" style="width:40px;height:100px"></div>
<div class="test" style="width:20px;height:150px;"></div>
<div class="test" style="width:40px;height:100px;"></div>
<div class="test" style="width:40px;height:100px;"></div>
</div>
If you already use Bootstrap you can use its classes to make 2 items per row
https://jsfiddle.net/3mdrrjf8/1/
<div class="main row">
<div class="test col-md-8 col-xs-6" style="height:100px"></div>
<div class="test col-md-8 col-xs-6" style="height:150px;"></div>
<div class="test col-md-8 col-xs-6" style="height:100px;"></div>
<div class="test col-md-8 col-xs-6" style="height:100px;"></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>