I want to fix and horizontally scrolling with bg class.
And make top:0; with panels class.
I want to these scrolling.
enter image description here
And I want to make like it.
How can I solve this problem?
I use skrollr.js
HTML
<div id="wrapper">
<div class="panels" style="background-color:deeppink">Panel 1</div>
<div class="container">
<div class="bg" style="background-color:red"
data-0="transform:translate3d(0%,0%,0); opacity:1"
data-5000="transform:translate3d(-100%,0%,0); opacity:0">
</div>
</div>
<div class="panels" style="background-color:orange">Panel 2</div>
</div>
CSS
div {
display: inline-block;
}
.panels {
top: 0px;
height: 100px;
width: 10px;
}
.container {
background-color: black;
width: 300px;
height: 200px;
overflow: hidden;
}
.bg {
width: 100%;
height: 300px;
}
Related
As you could see the total height is 1000px, inside their 3 boxes which give 600px height in total. What I'm trying to do is to make the last box be in the middle between box2 and end of container. Good solution would be margin: "auto 0" to box3, but it doesn't work.
How can I get that result?
.container {
width: 1000px;
height: 1000px;
background: black;
}
.box1 {
width: 100%;
height: 200px;
background: red;
}
.box2 {
width: 100%;
height: 200px;
background: blue;
}
.box3 {
width: 100%;
height: 200px;
background: green;
}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="center">
<div class="box3"></div>
</div>
</div>
It would be easiest to do something like this, just give the center class the following styles:
.center{
display:flex;
justify-content:center;
align-items:center;
height: 600px;
}
Use CSS Flexbox:
.center-content {
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
}
example
I have a wrapper width fixed width - 300px;
I have a child, content, width width 600px - causing the container to have scrolling.
I have another child, header, that I want to stretch the entire width of the wrapper. I say width 100% - but I only get 300px. I want it to get 600px (the full scrollable width of the wrapper)
I can probably solve this with Flex, but I want to know if there is another way.
Here's a screenshot of my problem:
How do I do that?
.wrapper{
width:300px;
height:300px;
overflow:auto;
background-color:gray;
}
.header{
background-color:red;
width:100%;
height:30px;
}
.content{
height:100px;
width:600px;
background-color:yellow;
}
<div class="wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
It seems the solution is to add an inner wrapper, inside the wrapper, that contains the header and content, and set that inner-wrapper to display:inline-block
.wrapper {
width: 300px;
height: 300px;
overflow: auto;
background-color: gray;
}
.inner-wrapper {
display: inline-block;
}
.header {
background-color: red;
width: 100%;
height: 30px;
}
.content {
height: 100px;
width: 600px;
background-color: yellow;
}
<div class="wrapper">
<div class="inner-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
</div>
You can display the .wrapper as grid with grid-auto-rows: min-content to "glue" their items together:
.wrapper {
display: grid;
grid-auto-rows: min-content; /* or: "align-content: start" */
width: 300px;
height: 300px;
overflow: auto;
background-color: gray;
}
.header {
background-color: red;
width: 100%;
height: 30px;
}
.content {
height: 100px;
width: 600px;
background-color: yellow;
}
<div class="wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
The problem is that you set .header { width: 100% } and it is getting its parent width, which is 300px.
You can set a class with the desired width and set it to the elements you would like to have wider width then the parent.
.wrapper{
width:300px;
height:300px;
overflow:auto;
background-color:gray;
}
.header{
background-color:red;
min-width: 100%;
height:30px;
}
.content{
height:100px;
background-color:yellow;
}
.wide-content {
width:600px;
}
<div class="wrapper">
<div class="header wide-content">
</div>
<div class="content wide-content">
</div>
</div>
You can try using a wrapper for the content and set scroll to that wrapper to prevent the header from scrolling.
Also note the height of the content-wrapper: 100% height - height of header
.wrapper {
width: 300px;
height: 200px;
position: relative;
background-color: gray;
}
.header {
background-color: red;
width: 100%;
height: 30px;
color: white;
}
.content-wrapper {
width: 100%;
overflow: auto;
height: calc(100% - 30px);
}
.content {
height: 100px;
width: 600px;
background-color: yellow;
}
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content-wrapper">
<div class="content">
Content Content Content Content Content Content Content Content Content Content Content Content Content Content
</div>
</div>
</div>
enter image description here
Remove box space from vertical and horizontal scroll bar
What you want is not possible because scroll is a native ui. However it is obviously possible if you make your own scrollbar using JS.
This is the closest that I can get with CSS
.case-1 .wrapper{
width: 100px;
height: 100px;
overflow: auto;
}
.case-1 .wrapper .something{
width: 200px;
height: 200px;
background-color: hotpink;
}
.case-2 .wrapper{
width: 100px;
height: 100px;
overflow-y: auto;
}
.case-2 .wrapper-inner{
overflow-x: auto;
}
.case-2 .wrapper .wrapper-inner .something{
width: 200px;
height: 200px;
background-color: hotpink;
}
body{
display: flex;
margin: 0;
font-family: sans-serif;
}
.case{
margin: 20px;
}
<div class="case-1 case">
<h4>Normal</h4>
<div class="wrapper">
<div class="something"></div>
</div>
</div>
<div class="case-2 case">
<h4>Desired</h4>
<div class="wrapper">
<div class="wrapper-inner">
<div class="something"></div>
</div>
</div>
</div>
You can try the property overflow.
The overflow-x property controls whether the content of the block element is displayed horizontally and overflow-y vertically.
I have a responsive website with max-width set to 1000px, but I need to fit background picture that will overlap one of the divs and also place full page-width bottom borders to other divs.
The code i have is like this:
.container {
width: 100%;
max-width: 1000px;
}
.logotest {
background-color: #03b9e5;
height: 50px;
}
.navtest {
background-color: #e4ed00;
height: 25px;
}
.socialtest {
background-color: #ab801a;
height: 25px;
}
.main {
height: 750px;
background: url(background.jpg) no-repeat top center;
margin: auto;
}
.line {
border-bottom: 1px solid black;
}
.container:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
<body>
<div class="container" id="first">
<div class="logotest">
</div>
<div class="socialtest">
</div>
<div class="navtest">
</div>
</div>
<div class="line"></div>
<div class="main line" id="second">
</div><div class="container">
<div id="third">
</div>
</div>
</body>
I get the first div with correct width and bottom border going across the full page width, second div has got the background picture showing, but the max-width of 1000px does no longer apply. The bottom border is shown correctly (dividing second and third div) and the third div has got the correct max-width applied again.
What am I doing wrong/not doing to get the max-width for the second div?
YOUR SOLUTION
If the browser support of background-size property is good enough for you, you can use background-size: cover;. Check here or here to see browser support.
Here is the code snippet to show how it works. Be sure to position your background-image to center center if you want it to always be centered.
.container {
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.line {
border-bottom: 1px solid black;
}
.logotest {
background-color: #03b9e5;
height: 50px;
}
.navtest {
background-color: #e4ed00;
height: 25px;
}
.socialtest {
background-color: #ab801a;
height: 25px;
}
.main {
height: 250px;
background: url(http://lorempixel.com/250/250) no-repeat center center;
background-size: cover; /* This does the magic */
}
.container:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
<body>
<div class="container" id="first">
<div class="logotest">
</div>
<div class="socialtest">
</div>
<div class="navtest">
</div>
</div>
<div class="line"></div>
<div class="main" id="second">
<div class="container">Put your content in here.</div>
</div>
<div class="line"></div>
<div class="container">
<div id="third">
</div>
</div>
<div class="line"></div>
</body>
LAST (BUT NOT LEAST)
You might want to check this great article about the state of responsive images in web design, that will help you if you are going into responsive web design: Responsive images done right.
I didn't find an answer for this specific case of mine, so I decided to ask a new question. I want to have 2 DIVs on the left side of the page (with a fixed width) and a single DIV on the right side, occupying the rest of the page width. Also the single DIV on the right should have its independent height (when its height is increased it shouldn't affect the height or position of the DIVs on the left). Something like this is what I want:
This is the HTML code:
<body>
<div class="div1">Div1</div>
<div class="div3">Div3</div>
<div class="div2">Div2</div>
</body>
This is the CSS I have right now:
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
}
div.div3 {
height: 425px;
overflow: hidden;
}
div.div2 {
clear: left;
float: left;
height: 15px;
margin-top: 10px;
}
The only problem is that Div2 top position is affected by the height of Div3 and I get something like this:
Try this:
<html>
<head>
<style>
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
background-color: blue;
}
div.div2 {
clear: left;
float: left;
height: 15px;
width: 200px;
margin-top: 10px;
background-color: red;
}
div.div3 {
height: 425px;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">Div1</div>
<div class="div2">Div2</div>
<div class="div3">Div3</div>
</body>
</html>
Once I re-ordered the Divs and added a width for Div 2 it works fine
https://jsfiddle.net/6g7qx26b/
This also works if you replace the css height properties with min-height properties, allowing for greater flexibility. Widths may also be specified in percentages
now you can use the right content with overflow:hidden and not conflicting with the left divs.
Check this:
http://jsfiddle.net/6UyTr/1/
div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; }
Check it on http://jsfiddle.net/cz2fP/
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
Grouping the left div element by another div element.
div.div1 {
height: 400px;
margin-right: 10px;
width: 200px;
background: red;
float: left;
}
div.div3 {
height: 15px;
margin-top: 10px;
margin-right: 10px;
background: green;
clear: both;
width: 200px;
}
div.div2 {
height: 425px;
overflow: hidden;
background: blue;
float: left;
width: 200px;
}
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
And see this link http://jsfiddle.net/bipin_kumar/cz2fP/3/
<style>
div.left{
float: left;
}
.main{
width : 100%;
}
.clear{
clear : both;
}
div.div1, div.div2 {
margin-right: 10px;
width: 200px;
background: red;
}
div.div1 {
height: 400px;
}
</style>
<body>
<div class="main">
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
<div class="clear"></div>
</div>
</body>
http://jsfiddle.net/rkpatel/qd6Af/1/
I needed something similar, just mirrored (1 div left, 2 divs right) and I couldn't work it out. A few Google searches later, I found a website which easily allows you to create a grid, assign number of rows/columns to differently named divs and it even gives you the HTML/CSS code to just copy and paste it. I didn't know about this and wasted a good hour on trying various other ways, so if you didn't know about this website yet, here it is.
Sorry for replying to such an old thread, I just want to help people.
Try this
<body>
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
</body>
DEMO
<div class="main">
<div class="div1">
<div class="div2"></div>
<div class=="div3"></div>
</div>
<div class="div4"></div>
</div>
and in css use min-height property
.div1 {
float:left;
}
.div4 {
float:right;
}
.main {
min-height:200px;
}