Demo
Html
When vertical scroll appears, also horizontal scroll appears and elements in div are still wider then div container. Screen
.scroll {
overflow-y: auto;
background: #CCC;
display: inline-block;
height: 150px;
}
.element {
background: #CD8115;
}
Css
<div class="scroll">
<div class="list">
<div class="element">111111111111111111111</div>
<div class="element">22</div>
...
</div>
</div>
Set the list css class with value display: inherit. This will make the child span then entire width.
.list{
display: inherit;
}
.scroll {
overflow-y: auto;
background: #CCC;
display: inline-block;
height: 150px;
}
.list{
display: inherit;
}
.element {
background: #CD8115;
}
<h2>With scroll</h2>
<div class="scroll">
<div class="list">
<div class="element">111111111111111111111</div>
<div class="element">22</div>
<div class="element">333333333</div>
<div class="element">4444</div>
<div class="element">5555555</div>
<div class="element">66</div>
<div class="element">777</div>
<div class="element">8888</div>
<div class="element">99999</div>
<div class="element">0</div>
</div>
</div>
<!-- Absolt same, exept height: auto-->
<h2>Without scroll</h2>
<div class="scroll" style="height: auto;">
<div class="list">
<div class="element">111111111111111111111</div>
<div class="element">22</div>
<div class="element">333333333</div>
<div class="element">4444</div>
<div class="element">5555555</div>
<div class="element">66</div>
<div class="element">777</div>
<div class="element">8888</div>
<div class="element">99999</div>
<div class="element">0</div>
</div>
</div>
Related
I want to position a div according to the picture:
I'm successful so far by using Bootstrap's row class and using z-index in my CSS. But when I resize the browser, it's not responsive, it just floats off the right side of the page. By the way, I'm using position: absolute (I read online that I have to use this in order to make use of z-index). Is there any other more elegant way to do this? I want it to be responsive but can't seem to find any other workaround than the wonky one I implemented.
Code:
#div2 {
float: inherit;
position: absolute;
top: inherit;
left: 60%;
width: 320px;
height: 1290px;
z-index: 5;
}
<div class="container">
<div class="div-container">
<div class="row">
<div id="div1">
<p>Div 1</p>
</div>
<div id="div2" align='center'>
<p>Div 2</p>
</div>
</div>
<div class="row">
<div id="div3">
<p>Div 3</p>
</div>
</div>
</div>
</div>
You need to make use of the nested rows inside a column. See here - Bootstrap Nesting. Ignore the CSS here as it is for snippet styling and height is used for ignoring the content.
.B {
min-height: 130px;
background: #393276;
margin-bottom: 20px;
}
.A {
min-height: 100px;
margin-bottom: 20px;
background: #393276;
}
.C {
min-height: 250px;
background: #393276;
}
div {
text-align: center;
color: #fff;
font-size: 32px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container mt-4">
<div class="row">
<!-- First Column -->
<div class="col-sm-6">
<!--Rows nested inside a column-->
<div class="row">
<div class="col-12">
<div class="A">A</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="B">B</div>
</div>
</div>
</div>
<!-- Second Column -->
<div class="col-sm-6">
<div class="C">C</div>
</div>
</div>
</div>
I have used flexbox to keep responsive design and some margin positioning to keep the formation together.
.container{
display: flex;
flex-wrap: wrap;
width: 150px;
}
.div1, .div3{
margin-right: 5px;
width: 50px;
height: 50px;
}
.div2{
margin-right: 5px;
width: 50px;
height: 110px;
}
<div class="container">
<div class="div1"> div1 </div>
<div class="div2"> div2 </div>
<br/>
<div class="div3" style="margin-top: -55px;"> div 3 </div>
</div>
I have a header that I would like to be sticky both during vertical and horizontal scroll. I would like it to be sticky due to the height of the header being dynamic(otherwise I could use fixed if I'm not mistaken).
I have played around with a fiddle with no success :(
https://jsfiddle.net/Viktor/39v0gzjh/22/
CSS:
html, body{
width:100%;
background-color:red;
opacity:0.9;
padding:0;
margin:0;
}
.header{
position:sticky;
top:0;
left:0;
background-color:gray;
height: 100px;
padding:0;
}
.container{
display: flex;
}
.child{
width: 120px;
min-width: 120px;
max-width: 120px;
border: 1px solid #D8D8D8;
background-color: white;
font-weight: bold;
word-wrap: break-word;
}
.bigdiv{
width:1000px;
height:1000px;
}
HTML:
<div class="header">
This is my sticky header
</div>
<div class="container">
<div class="child">
child1
</div>
<div class="child">
child2
</div>
<div class="child">
child3
</div>
<div class="child">
child4
</div>
<div class="child">
child5
</div>
<div class="child">
child6
</div>
<div class="child">
child7
</div>
<div class="child">
child8
</div>
<div class="child">
child9
</div>
<div class="child">
child
</div>
</div>
<div class="bigdiv">
Very long div
</div>
If you are using bootstrap, just add fixed-top class to your header:
<div class="header fixed-top">
This is my sticky header
</div>
Otherwise, with css, header position should be "position:fixed;" and its width "width: 100%;" and then place other page content below like this fiddle:
https://jsfiddle.net/s071hnxL/
A better approach would be set overflow-x: scroll; on your html.
This will solve the issue.
Note that sticky, by specification, will not work inside element with overflow.
This is a known issue
Hence, try using javascript in combination with position:fixed
$(window).scroll(function() {
if( $(this).scrollTop() > 0 ) {
$('.header').addClass('sticky');
} else {
$('.header').removeClass('sticky');
}
});
html,
body {
width: 100%;
background-color: red;
opacity: 0.9;
padding: 0;
margin: 0;
overflow-x: scroll;
}
.header {
width: 100%;
background-color: gray;
height: 100px;
padding: 0;
}
.sticky {
position:fixed;
top:0;
width: 100%;
left:0;
}
.pt-100{
padding-top: 100px;
}
.container {
display: flex;
}
.child {
width: 120px;
min-width: 120px;
max-width: 120px;
border: 1px solid #D8D8D8;
background-color: white;
font-weight: bold;
word-wrap: break-word;
}
.bigdiv {
width: 1000px;
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
This is my sticky header
</div>
<div class="container">
<div class="child">
child1
</div>
<div class="child">
child2
</div>
<div class="child">
child3
</div>
<div class="child">
child4
</div>
<div class="child">
child5
</div>
<div class="child">
child6
</div>
<div class="child">
child7
</div>
<div class="child">
child8
</div>
<div class="child">
child9
</div>
<div class="child">
child
</div>
</div>
<div class="bigdiv">
Very long div
</div>
position: sticky is working fine. The reason that you're unable to see it's effect is because of the position applied on div(not the visible text) and the width of the div, which is taking up 100% of its parent's div, which in this case is body. So when you're scrolling horizontally, you're still inside the div, which is taking up the complete width space available.
Now if you want to view the content inside div.header irrespective of the scroll, modify its width as width: 100vw and it should work fine.
You can verify by setting the width of body to 140% and .header to be 100vw
All the best. Cheers!
I have nested block table.
.cell_group,
.cell_group--root,
.cell_group--nested {
display: table;
border-collapse: collapse;
}
.cell_group__row {
display: table-row;
}
.cell_group__cell,
.cell_group__edge_cell {
display: table-cell;
height: 1px;
box-shadow: inset 0 0 0 1px #f00;
}
.cell_group__edge_cell {
padding: 5px;
}
.cell_group__wrapper {
width: 100%;
height: 100%;
}
.cell_group--nested {
height: 100%;
}
<div class="cell_group">
<div class="cell_group__row">
<div class="cell_group__edge_cell">test</div>
<div class="cell_group__cell">
<div class="cell_group--nested">
<div class="cell_group__row">
<div class="cell_group__edge_cell">test</div>
</div>
<div class="cell_group__row">
<div class="cell_group__edge_cell">test</div>
</div>
</div>
</div>
<div class="cell_group__cell">
<div class="cell_group--nested">
<div class="cell_group__row">
<div class="cell_group__edge_cell">test</div>
</div>
<div class="cell_group__row">
<div class="cell_group__edge_cell">test</div>
</div>
<div class="cell_group__row">
<div class="cell_group__edge_cell">test</div>
</div>
</div>
</div>
</div>
</div>
Everything works fine in all major browsers... but not in IE10. Central column doesn't fill the full height of the container and leaves space. How can I make central cells to equally distribute to full height of the column?
I am trying to create vertical align middle between two div using table cell method. I want to make single-slider div vertical align middle. But I am failed. Can anybody please help me? I have some confused about that.Here is my code:
.slider-area {
height: 100%;
width: 100%;
}
.silder-inner {
height: 100%;
display: table;
}
.single-silder {
height: auto;
display: table-cell;
vertical-align: middle;
}
<div class="slider-area">
<div class="silder-inner">
<div class="single-slider">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Holla You'r Welcome</h3>
<h2>Best <span>Digital Agency</span> &<br>Business Farm</h2>
Contract Now
</div>
</div>
</div>
</div>
</div>
</div>
first of all you give wrong class in your html & css. it's single-slider in html and .single-silder in css. and you also need to set height for body and html.
body, html {
height: 100%;
width: 100%;
}
.slider-area{
height:100%;
width : 100%;
}
.silder-inner{
height:100%;
display:table;
}
.single-slider{
height:auto;
display:table-cell;
vertical-align:middle;
}
.mt-0 {
margin-top:0;
}
<div class="slider-area">
<div class="silder-inner">
<div class="single-slider">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="mt-0">Holla You'r Welcome</h3>
<h2>Best <span>Digital Agency</span> &<br>Business Farm</h2>
Contract Now
</div>
</div>
</div>
</div>
</div>
</div>
Doing it the Flex Way:
body {
margin: 0;
}
.slider-area {
display: flex;
height: 100vh;
}
.silder-inner {
flex: 1;
display: flex;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="slider-area">
<div class="silder-inner">
<div class="single-slider">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Holla You'r Welcome</h3>
<h2>Best <span>Digital Agency</span> &<br>Business Farm</h2>
Contract Now
</div>
</div>
</div>
</div>
</div>
</div>
Is it possible to fill an entire page with 16 divs but still have it responsive so it can be viewed on different devices. At the moment I have only used percentages but I am open to other solutions if there are any.
-How it is suppose to look.
The webpage has to contain 16 divs in total four spread across the top first quater of the webpage four spread across the second quarter of the page four spread across the third quarter of the page and four spread across the forth quarter of the page.
So overall it is suppose to look like a big cube or look like the 2408 game http://gabrielecirulli.github.io/2048/
-My code so far
***HTML***
<!doctype html>
<head>
<link rel="stylesheet" href="master.css">
</head>
<!-- ========================================================================================================================= -->
<div id="s1" class="divq"> </div> <div id="s2" class="divq"> </div> <div id="s3" class="divq"> </div> <div id="s4" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s5" class="divq"> </div> <div id="s6" class="divq"> </div> <div id="s7" class="divq"> </div> <div id="s8" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s9" class="divq"> </div> <div id="s10" class="divq"> </div> <div id="s11" class="divq"> </div> <div id="s12" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s13" class="divq"> </div> <div id="s14" class="divq"> </div> <div id="s15" class="divq"> </div> <div id="s16" class="divq"> </div>
<!-- ========================================================================================================================= -->
***CSS***
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.divq {
height: 25%;
margin: 0px;
width: 25%;
}
#s1 {
background-color: rgb(100,100,100);
float: left;
}
#s2 {
background-color: rgb(120,100,100);
}
#s3 {
background-color: rgb(100,120,100);
}
#s4 {
background-color: rgb(100,100,120);
float: right;
}
#s5 {
background-color: rgb(140,100,100);
float: left;
}
#s6 {
background-color: rgb(100,140,100);
}
#s7 {
background-color: rgb(100,100,140);
}
#s8 {
background-color: rgb(160,100,100);
float: right;
}
#s9 {
background-color: rgb(100,160,100);
float: left;
}
#s10 {
background-color: rgb(100,100,160);
}
#s11 {
background-color: rgb(180,100,100);
}
#s12 {
background-color: rgb(100,180,100);
float: right;
}
#s13 {
background-color: rgb(100,100,180);
float: left;
}
#s14 {
background-color: rgb(200,100,100);
}
#s15 {
background-color: rgb(100,200,100);
}
#s16 {
background-color: rgb(100,100,200);
float: right;
}
Make them all float: left, and don't forget to add box-sizing: border-box to all elements (via .divq)
That way you can add margings and paddings without breakting your grid.
If you are fine with flexbox, you can span four rows inside a wrapper with display: flex and flex-direction: column, each including four columns.
Sample Fiddle:
http://fiddle.jshell.net/n50tnnka/2/
Maybe you could try using a Bootstrap grid? It's fairly easy to use!
Just give your div's the class col-md-3. That way, the div's will know they can take up 3/12th of the screen = 25% = 4 divs per row.
If you then contain all these divs in one parent div with fixed width and height, you should be fine.
<div id="cube">
<div class="col-md-3" id="s1"></div>
<div class="col-md-3" id="s2"></div>
<div class="col-md-3" id="s3"></div>
<div class="col-md-3" id="s4"></div>
<div class="col-md-3" id="s5"></div>
<div class="col-md-3" id="s6"></div>
<div class="col-md-3" id="s7"></div>
<div class="col-md-3" id="s8"></div>
<div class="col-md-3" id="s9"></div>
<div class="col-md-3" id="s10"></div>
<div class="col-md-3" id="s11"></div>
<div class="col-md-3" id="s12"></div>
<div class="col-md-3" id="s13"></div>
<div class="col-md-3" id="s14"></div>
<div class="col-md-3" id="s15"></div>
<div class="col-md-3" id="s16"></div>
</div>
By still using the id's you can give any square the color you like, but by using bootstrap you won't have to use float.
You can do this easily with Flexbox like this
DEMO
.content {
display: flex;
height: 100vh;
width: 100vw;
flex-wrap: wrap;
box-sizing: border-box;
}
.box {
flex: 25%;
border: 1px solid black;
padding: 5px;
box-sizing: border-box;
}
<div class="content">
<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>
For better browser support (than flex) you can use display table-cell for your elements
But you will have to nest each "row" (four divs) in a parent element:
HTML:
<div class="row">
<div id="s1" class="divq"> </div>
<div id="s2" class="divq"></div>
<div id="s3" class="divq"> </div>
<div id="s4" class="divq"> </div>
</div>
CSS:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
div {
box-sizing:border-box;
}
.row{
display: table;
table-layout: fixed;
border-spacing:0px;
width:100%;
height:25%;
}
.divq {
display:table-cell;
height: 25%;
width: 25%;
}
DEMO: https://jsfiddle.net/Nillervision/06z1L5tg/