Keep div scrollable with visible shadow - css

This is the situation:
body {
margin: 0;
border: 0;
padding: 0;
}
.one {
margin: 0;
border: 0;
padding: 20px;
width: 200px;
height: 200px;
background-color: red;
}
.two {
margin: 0;
border: 0;
padding: 0;
width: 200px;
height: 200px;
background-color: green;
overflow-y: auto;
}
.three {
margin: 0;
border: 0;
padding: 0;
background-color: blue;
width: 200px;
height: 100px;
box-shadow: 0 0 10px 10px black;
}
<div class="one">
<div class="two">
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
</div>
</div>
As you can see the property overflow-y: auto; cuts off the shadow of the elements with class three.
What I would like to have is something like this, but with containing block scrollable:
Is there a different way other then shrinking the three elements?


why not an inset shadow
body {
margin: 0;
border: 0;
padding: 0;
}
.one {
padding: 20px;
height: 200px;
width:200px;
background-color: red;
}
.two {
height: 200px;
background-color: green;
overflow-y: auto;
}
.three {
background-color: blue;
height: 100px;
box-shadow: 0 0 10px 10px inset black;
}
<div class="one">
<div class="two">
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
</div>
</div>

Related

Flex left element position to the top

How can I place the blue box next to red box at the top. The yellow box should be below the blue box.
I cannot change the HTML structure. And also I cannot use margin-top for the blue box because the height of the boxes will change dynamically.
Please help me! Thanks!
Here is my code:
.wrapper {
width: 80%;
margin: 0 auto;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
.item {
float: left;
padding: 0 8px;
box-sizing: border-box;
}
.item1 {
width: 60%;
height: 400px;
background-color: red;
}
.item2 {
width: 60%;
height: 100px;
background-color: green;
}
.item3 {
width: 30%;
height: 200px;
background-color: blue;
}
.item4 {
width: 30%;
height: 500px;
background-color: yellow;
}
<div class="wrapper">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>

there is a typo error in your CSS file.
in your second item selector, you wrote itme2, and here is the problem.
❌.itme2 {...}
✅.item2 {...}
the logic is fine! is just a typo
.wrapper {
width: 80%;
margin: 0 auto;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
.item {
float: left;
padding: 0 8px;
box-sizing: border-box;
}
.item1 {
width: 60%;
height: 400px;
background-color: red;
}
.item2 {
width: 60%;
height: 100px;
background-color: green;
}
.item3 {
width: 30%;
height: 200px;
background-color: blue;
}
.item4 {
width: 30%;
height: 500px;
background-color: yellow;
}
<div class="wrapper">
<div class="item item1"></div>
<div class="item itme2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>

Dropdown ignore parent overflow

I have a modal where I have dropdowns in the element.
The problem is since I have an overflow set, the dropdown, although it appears, does not appear on top of the modal. I understand since it's because I set an overflow:auto on the parent.
Is there any way via CSS that I can ignore the parent and show the dropdown above the "modal"?
You'll see in the example, the content in the red line is visible if you scroll. Which is the expected behaviour based on my code at the moment. What is the adjustment I will need to make to show that dropdown above the modal?
Tried fixing with z-index and I read somewhere on SO to set the grandparent to position relative.
Prefer a CSS only solution.
Thanks!
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: relative;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: absolute;
border: 1px solid red;
left: auto;
right: 0;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You need to make the dropdown element position: fixed, the dropdown container positon: absolute and the parent position:relativefor this to work. You can adjust the positining of the container element using top, right, left, bottom but you'll need to use negative margins on the fixed element.
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: absolute;
top: 0;
right:0;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: fixed;
border: 1px solid red;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

you need used z-index 999, and position relative in dropdown css.
Example:
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: relative;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: relative;
z-index: 9999;
border: 1px solid red;
left: auto;
right: 0;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How to make contents fit to divs using css

How to make the inside divs fit to the contents in the below html
I tried with display:inline-block but it moves the 2nd div to the bottom.
<div class="ms-table">
<div class="tableCol-75">
</div>
<div class="tableCol-25">
</div>
</div>

There you go:
.ms-table {
width: 80%;
}
.tableCol-70 {
float: left;
width: 70%;
border: 1px solid black;
margin-right: 10px;
}
.tableCol-25 {
float: left;
width: 25%;
border: 1px solid blue;
}
<div class="ms-table">
<div class="tableCol-70">
My name is abc and I live in ams.
</div>
<div class="tableCol-25">
I love junk food even though it is unhealthy
</div>
</div>

use display: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
display: table;
width: 100%;
height: 100px;
}
.table-cell{
display: table-cell;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}
<div class="ms-table">
<div class="table-cell tableCol-75">75%</div>
<div class="table-cell tableCol-25">25%</div>
</div>
use display: inline-block;
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
width: 100%;
min-height: 100px;
}
.table-cell{
display: inline-block;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}
<div class="ms-table">
<div class="table-cell tableCol-75">75%</div><!--
--><div class="table-cell tableCol-25">25%</div>
</div>

Multiple DIVs centeralized in a single row

below is my code, the thumb Divs are starting from left but how can I make them centralized?
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
}
.thumbs {
float: left;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs"><img src="1.jpg"></div>
<div class="thumbs"><img src="2.jpg"></div>
<div class="thumbs"><img src="3.jpg"></div>
</div>

There's not much point in floating the divs if you want to center them. Instead make them inline-block elements and use text-align:center on the parent:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs">
<a href="1.html">
<img src="1.jpg">
</a>
</div>
<div class="thumbs">
<a href="2.html">
<img src="2.jpg">
</a>
</div>
<div class="thumbs">
<a href="3.html">
<img src="3.jpg">
</a>
</div>
</div>

My favorite method is to add a text-align: center; to the parent element, then use display: inline-block; instead of float: left;
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs"><img src="1.jpg"></div>
<div class="thumbs"><img src="2.jpg"></div>
<div class="thumbs"><img src="3.jpg"></div>
</div>

You can use inline-block to thumbs instead of float left like:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
border:1px solid #000;
width: 100px;
height: 100px;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs">a</div>
<div class="thumbs">b</div>
<div class="thumbs">c</div>
</div>
If you want to conserve your floating behavior you should add an container to your thumbs, also using float dont forget to clearfix the container like:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbsWrap {
display: inline-block;
overflow: hidden;
}
.thumbs {
float: left;
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbsWrap">
<div class="thumbs">a</div>
<div class="thumbs">b</div>
<div class="thumbs">c</div>
</div>
</div>

How to create such layout in CSS?

Here's what I tried: http://jsfiddle.net/tJxCD/6/
I want to create a layout like this:
But I don't know how to make the third rectangle on bottom of the second.

http://jsfiddle.net/kHT8z/1/
.wrapper {
overflow: hidden;
width: 500px
}
.top {
border: 3px solid #000;
width: 300px;
height: 170px;
margin: 5px;
float: left;
}
.right {
border: 3px solid #000;
width: 150px;
height: 75px;
margin: 5px;
float: left;
}
.bottom_small {
border: 3px solid #000;
float: left;
margin: 5px;
height: 50px;
width: 90px;
}
.bottom_big {
border: 3px solid #000;
float: left;
margin: 5px;
height: 75px;
width: 150px;
}
<div class="wrapper">
<div class="top"></div>
<div class="right"></div>
<div class="right"></div>
</div>
<div class="bottom_big"></div>
<div class="bottom_small"></div>

Hard to tell exactly what your after but your divs can share several css properties and you can use classes to specify size only. This JSFiddle represents your diagram.
Of course this layout is dependent on the width of the containing element, in this case the body, so you need to be aware of that.
HTML layout:
<html><body>
<div class="large"></div>
<div class="medium"></div>
<div class="medium"></div>
<div class="medium"></div>
<div class="small"></div>
</body></html>
CSS:
div {
border: 1px solid gray;
margin: 5px 5px 0 0;
float: left;
}
div.large{
width: 300px;
height: 175px;
}
div.medium {
width: 150px;
height: 84px;
}
div.small{
width: 100px;
height: 44px;
}

Resources