Could you please explain me the CSS in this code, I mean how horizontal scrolling output came?
body {
margin: 0;
}
<div style="max-width: 200vw; height: 100vh; overflow-x: scroll">
<div class="parent" style="width: 200vw; height: 100vw">
<div class="child" style="float: left; width: 100vw; height: 100vh">Hi</div>
<div class="child" style="float: right; width: 100vw; height: 100vh">
Hi
</div>
</div>
</div>
As you can see in the below snippet, I have 2 div's.
A parent and a child.
Parent has width 200px, while child has 300px, so obviously the child will overflow. So in order to avoid overflowing, we have provided overflow-x: scroll
.parent {
max-width: 200px;
overflow-x: scroll;
padding: 10px;
border: 1px solid #ddd;
}
.child {
width: 300px;
padding: 10px;
background-color: blue;
}
<div class='parent'>
<div class='child'>
</div>
</div>
Related
Want to create a slider containing 3 image containers and need all of them in the same row. All image containers are same size, but the size of slider is around 2.5 images, so the third one should overflow instead of going to new row. Example:
How it should look
What i have for now
html
<div class="image-slide-wrapper">
<div class="images-section">
<div class="image-slide">
<div class="slide-img">
</div>
</div>
<div class="image-slide">
<div class="slide-img">
</div>
</div>
<div class="image-slide">
<div class="slide-img">
</div>
</div>
</div>
</div>
scss
.image-slide-wrapper {
float: left;
height: 55%;
width: 100%;
.images-section {
float: left;
height: 85%;
width: 100%;
border: 1px solid grey;
border-radius: 8px;
overflow: hidden;
padding: 0.125rem;
}
.image-slide {
float: left;
height: 100%;
width: 100px;
margin-right: 0.25rem;
.slide-img {
float: left;
height: 100%;
width: 100%;
border-radius: 0.35rem;
background-color: #e9e9e9;
in the text slider is images-section class and image container is image-slide class. Forgot to mention that I have to go with float to make consistent with the rest of the code.
<div style="overflow: hidden; width: 250px;">
<div style="width: max-content">
<img style="width: 100px;height: 100px;border: 1px solid black;" src="...">
<img style="width: 100px;height: 100px;border: 1px solid black;" src="...">
<img style="width: 100px;height: 100px;border: 1px solid black;" src="...">
</div>
</div>
You could remove float from the thumb elements and use display: flex and flex-flow: row nowrap on the container
.container {
height: 100px;
width: 250px;
border: 1px solid grey;
border-radius: 8px;
overflow: hidden;
padding: 0.125rem;
display: flex;
flex-flow: row nowrap;
}
.image-slide {
height: calc(100% - .25rem);
flex: 1 0 100px;
margin-right: 0.25rem;
border: 1px #ccc solid;
}
<div class="container">
<div class="image-slide"></div>
<div class="image-slide"></div>
<div class="image-slide"></div>
<div class="image-slide"></div>
</div>
This works. You can add display:flex; and flex-wrap:nowrap; to .image-slide-wrapper class.
.main {
float: left;
height: 85%;
width: 100%;
border: 1px solid grey;
border-radius: 8px;
overflow: hidden;
padding: 0.125rem;
display:flex;
flex-wrap:nowrap;
}
.slider {
float: left;
height: 100%;
width: 300px;
margin-right: 0.25rem;
display: block;
}
<div class="main">
<div class="slider">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBYCs940TLL3tx_nyn7fVeidXWZyfOKV5QrQ&usqp=CAU">
</div>
<div class="slider">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBYCs940TLL3tx_nyn7fVeidXWZyfOKV5QrQ&usqp=CAU">
</div>
<div class="slider">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBYCs940TLL3tx_nyn7fVeidXWZyfOKV5QrQ&usqp=CAU">
</div>
</div>
I can't seem to have a horizontally-scrolling div inside a flex column.
Codepen
.container { display: flex; margin: 20px; height: 300px; border: 1px solid blue; }
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main { padding: 20px; }
.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
<div class='side-nav'>
</div>
<div class='main'>
<h1>Test</h1>
<div class='scrollable'>
<div class='long-content'>
This is supposed to scroll horizontally unless your window is super wide
</div>
</div>
<p>Some paragraph below the scrollable box</p>
</div>
</div>
If I change the max-width of .scrollable to px it would work, but I need it to fill the column.
What am I missing?
In my opinion, this is a Module"bug" (Wierd).
Anyway, one very simple solution is to use flex-basis (Instead of width).
Step 1 for main add width: 0;
.container {
display: flex;
margin: 20px;
height: 300px;
border: 1px solid blue;
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main {
padding: 20px;
border: 5px dashed orange;
/* "new code" */
width: 0px;
}
.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
<aside class='side-nav'>
Aside
</aside>
<main class='main'>
<h1>Test</h1>
<div class='scrollable'>
<div class='long-content'>
This is supposed to scroll horizontally unless your window is super wide
</div>
</div>
<p>Some paragraph below the scrollable box</p>
</main>
</div>
Step 2 - main add flex-basis: 100%;
.container {
display: flex;
margin: 20px;
height: 300px;
border: 1px solid blue;
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main {
padding: 20px;
border: 5px dashed orange;
/* "new code" */
width: 0px;
flex-basis: 100%;
}
.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
<aside class='side-nav'>
Aside
</aside>
<main class='main'>
<h1>Test</h1>
<div class='scrollable'>
<div class='long-content'>
This is supposed to scroll horizontally unless your window is super wide
</div>
</div>
<p>Some paragraph below the scrollable box</p>
</main>
</div>
One more option is to use width: 0; & flex-grow:1
.container {
display: flex;
margin: 20px;
height: 300px;
border: 1px solid blue;
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main {
padding: 20px;
border: 5px dashed orange;
/* "new code" */
width: 0px;
flex-grow: 1;
}
.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
<aside class='side-nav'>
Aside
</aside>
<main class='main'>
<h1>Test</h1>
<div class='scrollable'>
<div class='long-content'>
This is supposed to scroll horizontally unless your window is super wide
</div>
</div>
<p>Some paragraph below the scrollable box</p>
</main>
</div>
I don't like any of those ideas - but this is life hh.
This is the code:
<div class="c1">
<div class="c2">
<div class="c3">
</div>
</div>
</div>
<style>
.c1{
overflow-y: scroll;
overflow-x: visible;
margin: 50px;
width: 500px;
height: 300px;
background-color: red;
}
.c2{
width: 200px;
height: 1000px;
background-color: yellow;
}
.c3{
margin-left: -50%;
width: 200px;
height: 100px;
background-color: red;
}
</style>
What I'm trying to achieve is have scroll functionality for the y-axis while having the green div exceed the other to the left, like it would if overflow-y is unset for the red div. Is this possible at all? Here is the code to test: https://liveweave.com/RCeADH
I have a problem, i want to set 3 floated divs and on the bottom I would like to have a footer. So I got these two solutions, but it does not work. Please check out the image:
Here the problem is that the content is not not cleared, so the footer does not change position:
<div class="container">
<div class="left"><div class="content"><div class="right">
<div style="clear:left;"></div>
</div>
<div class="footer"></div>
.container {
height: auto !important;
min-height: 100%;
}
.left {
float: left;
width: 20%;
max-width: 200px;
}
.center {
float: left;
width: 80%;
max-width: 500px;
}
.right {
width: auto;
}
.content {
height: auto !important;
height: 100%;
min-height: 100%;
}
.footer {
height: 202px;
margin: -202px auto 0;
position: relative;
}
If i clear the content, I get the result that the right div goes to the next line:
thanks!
I played around a little bit. I think your html structure wasn't right for the effect you were trying to create.
Here is a new example:
HTML
<div class="container">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
<div style="clear">
<div class="content">
</div>
<div class="footer">
</div>
</div>
CSS
.container {
height: auto !important;
min-height: 100%;
}
.left {
float: left;
width: 20%;
max-width: 200px;
min-height: 100px;
background: red;
}
.center {
float: left;
width: 80%;
max-width: 500px;
min-height: 100px;
background: blue;
}
.right {
width: auto;
min-height: 100px;
background: green;
}
.content {
height: auto !important;
height: 100%;
min-height: 100px;
width: 80%;
max-width: 500px;
margin: 0 auto;
background: yellow;
}
.footer {
height: 202px;
margin: 0 auto;
position: relative;
background: purple;
}
I rearanged everything in this fiddle:
http://jsfiddle.net/LJQCx/2/
I hope this is what you trying to achiev.
Here is the code hope it will help check the fiddle
<div class="page-wrap">
<div class="container">
<div class="left">
<p>I am Left</p>
</div>
<div class="center">
<p>I am Center</p>
</div>
<div class="right">
<p>I am Right</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<p>I am Footer</p>
</div>
* { margin: 0;}
html, body { height: 100%;}
.page-wrap {min-height: 100%;/* equal to footer height */margin-bottom: -142px; }
.page-wrap:after { content: ""; display: block;}
.footer, .page-wrap:after { /* .push must be the same height as footer */ height: 142px;}
.site-footer {}
.container{ width:100%;}
.left{ float:left; width:25%;}
.center{float:left; width:50%;}
.right{float:left; width:25%;}
I have a problem trying to position an image to the right of a centered div. This code works in Chrome and Safari but not IE8 or Firefox. The Chrome version is what I'm going for, not the IE version as shown in the picture. Thanks!
#page {
width: 90%;
max-width: 1400px;
min-width: 600px;
margin: 0 auto;
overflow: hidden;
background:
white;
}
<div style="width: 90%; max-width: 1400px; min-width: 600px; margin: 0 auto;">
<div style="float: right; position: relative; z-index: 200; bottom: 4px; left: 20px;">
<img src="images/clearance-tab-vert.png">
</div>
</div>
<div id="page">
blah
</div>
see this fiddle: http://jsfiddle.net/QLBjX/2/
#page {
width: 90%;
max-width: 1400px;
min-width: 600px;
margin: 0 auto;
overflow: hidden;
background:
white;
}
<div id="page">
blah
<div style="float:right; background:black; width:100px; height:100px";>
<img src="images/clearance-tab-vert.png" width="100" height="100">
</div>
</div>