I want the box shadow of a child element only overflow within it's parent element but it goes out of its parent element. How can I fix this?
How it is actually:
How it is expected to be:
#main {
background: #ddd;
height: 200px;
width: 200px;
padding: 50px;
}
#child {
background: #eee;
height: 100px;
width: 100px;
padding: 50px;
}
#grand-child {
background: #fff;
height: 100px;
width: 100px;
box-shadow: 0 0 100px 40px red;
}
<div id="main">
<div id="child">
<div id="grand-child"></div>
</div>
</div>
You simply add overflow: hidden
#main {
background: #ddd;
height: 200px;
width: 200px;
padding: 50px;
overflow: hidden;
}
#child {
background: #eee;
height: 100px;
width: 100px;
padding: 50px;
overflow: hidden;
}
#grand-child {
background: #fff;
height: 100px;
width: 100px;
box-shadow: 0 0 100px 40px red;
}
<div id="main">
<div id="child">
<div id="grand-child"></div>
</div>
</div>
You have to add a CSS property to the #child that overflow: hidden.
Related
I have a div in HTML that has two child divs, one on the right and one on the left. Both child divs have contenteditable set, so when the user click in them they can type. However, when the text goes below the size of the div, the parent div overflows and scrolls, but the child divs don't.
Here is an example:
#container {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: scroll;
color: white;
background: gray;
}
#part1 {
width: 50%;
margin: 0;
background: blue;
height: 100%;
float: left;
overflow: visible;
}
#part2 {
width: 50%;
margin: 0;
background: green;
height: 100%;
float: right;
overflow: visible;
}
<div id="container">
<div id="part1" contenteditable="true"></div>
<div id="part2" contenteditable="true"></div>
</div>
In the above example, try typing more text than can fit vertically (by spamming the enter key while inside the box). Once the text goes over the side of the box, the parent overflows like it is supposed to, however, the children (which are being typed into) don't, even though they have 100% height.
Is there a way to make the children extend WITH the parent, so they both scroll together when one/both overflows?
It is very good for your task to use the rules of flexibility. Add display: flex and flex-flow: wrap for #container. And remove the height: 100% from the children, because flex-flow: wrap itself will stretch the elements to the full height.
Also, remove float: left and overflow: visible from children.
#container {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: scroll;
color: white;
background: gray;
display: flex;
flex-flow: wrap;
}
#part1 {
width: 50%;
margin: 0;
background: blue;
/*height: 100%;
float: left;
overflow: visible;*/
}
#part2 {
width: 50%;
margin: 0;
background: green;
/*height: 100%;
float: right;
overflow: visible;*/
}
<div id="container">
<div id="part1" contenteditable="true"></div>
<div id="part2" contenteditable="true"></div>
</div>
You could change height to min-height for the inner divs and use an additional inner div with display: flex so that both colored divs have the same growing height. overflow: visible is not necessary.
Working example:
#container {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: scroll;
color: white;
background: gray;
}
#inner {
display: flex;
min-height: 200px;
}
#part1 {
width: 50%;
margin: 0;
background: blue;
min-height: 100%;
float: left;
}
#part2 {
width: 50%;
margin: 0;
background: green;
min-height: 100%;
float: right;
}
<div id="container">
<div id="inner">
<div id="part1" contenteditable="true"></div>
<div id="part2" contenteditable="true"></div>
</div>
</div>
Since you define some css twice and overflow-x is not necessary you can add a class to the colored divs and set the overflow for the container only to overflow-y.
Working example:
#container {
border: 1px solid black;
width: 300px;
height: 200px;
color: white;
background: gray;
overflow-y: scroll;
}
#inner {
display: flex;
min-height: 200px;
}
.editable {
width: 50%;
margin: 0;
min-height: 100%;
}
#part1 {
background: blue;
float: left;
}
#part2 {
background: green;
float: right;
}
<div id="container">
<div id="inner">
<div class="editable" id="part1" contenteditable="true"></div>
<div class="editable" id="part2" contenteditable="true"></div>
</div>
</div>
I'm trying to do a container with rounded corners, basically it will have a rounded corner on the top-left of the header(red) and then it should have it on the bottom left of the view that we have....
so what it is hard for me is the following:
the bottom border should be rounded if it is the end of the page
the border should keep straight if it isn't the end of the page.
so what I have is the following, if you see this example, the bottom left corner is rounded because the content (yellow) is not bigger than 100% therefore we show the rounded corner and also we complete the view so the corner is stick to the bottom.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: black;
}
.header {
height: 25px;
margin-left: 20%;
width: 80%;
background: red;
border-top-left-radius: 10px;
}
.main {
display: block;
height: calc(100% - 25px);
margin-left: 20%;
width: 80%;
background: green;
overflow: scroll;
border-bottom-left-radius: 10px;
overflow-x: hidden;
}
.content {
height: 30px;
width: 100%;
background: yellow;
}
<body>
<div class="header">
header
</div>
<div class="main">
<div class="content"></div>
</div>
</body>
the problem is when the content is bigger than the main as you can see, it will always be rounded as the following example and the height of the content is larger than the main so it should continue the line and show the corner only if the user scrolls down
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: black;
}
.header {
height: 25px;
margin-left: 20%;
width: 80%;
background: red;
border-top-left-radius: 10px;
}
.main {
display: block;
height: calc(100% - 25px);
margin-left: 20%;
width: 80%;
background: green;
overflow: scroll;
border-bottom-left-radius: 10px;
overflow-x: hidden;
}
.content {
height: 900px;
width: 100%;
background: yellow;
}
<body>
<div class="header">
header
</div>
<div class="main">
<div class="content"></div>
</div>
</body>
I also did some test using the rounder corner on the content, but if the content is smaller it will show the rounded corner in the wrong place.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: black;
}
.header {
height: 25px;
margin-left: 20%;
width: 80%;
background: red;
border-top-left-radius: 10px;
}
.main {
display: block;
height: calc(100% - 25px);
margin-left: 20%;
width: 80%;
background: green;
overflow: scroll;
overflow-x: hidden;
border: 1px solid violet;
}
.content {
height: 90px;
width: 100%;
background: white;
border-bottom-left-radius: 10px;
border: 1px solid red;
}
<body>
<div class="header">
header
</div>
<div class="main">
<div class="content"></div>
</div>
</body>
I'm not the best at scss(clearly :P) so I would appreciate your help.
is there a way to achieve this with only css or should I just use javascript?
I have this simple html and css
body{
background-color: black;
padding:0;
margin: 0;
box-sizing: border-box;
}
#ctr{
height: 500px;
width: 200px;
margin: 0 auto;
background-color: red;
}
#ctr > .box{
background-color: white;
height: 200px;
width: 200px;
border: 1px solid black;
margin-top:10px;
}
<div id = "ctr">
<div class = "box">
<div class="something1"></div>
<div class="something2"></div>
</div>
</div>
I'm trying to add margin-top to the white box (box class) inside the red div(ctr id), but the whole red div is getting the margin and not just the white div.
here's a jsfiddle of the example.
https://jsfiddle.net/6tvrwxhg/
Add overflow:auto (or hidden) to the parent (#ctr)
body {
background-color: black;
padding:0;
margin: 0;
box-sizing: border-box;
}
#ctr {
height: 500px;
width: 200px;
margin: 0 auto;
background-color: red;
overflow: auto;
}
#ctr > .box{
background-color: white;
height: 200px;
width: 200px;
border: 1px solid black;
margin-top:10px;
}
<div id="ctr">
<div class="box">
<div class="something1"></div>
<div class="something2"></div>
</div>
</div>
more info in a good answer
https://www.w3.org/TR/CSS2/box.html#collapsing-margins
That is Parent/First child margin collapsing, and that happens if there is no border, padding, inline content or clearance to separate parent and child. So you can add border-top on parent
body {
background-color: black;
padding: 0;
margin: 0;
box-sizing: border-box;
}
#ctr {
height: 500px;
width: 200px;
margin: 0 auto;
background-color: red;
border-top: 1px solid transparent;
}
#ctr > .box {
background-color: white;
height: 200px;
width: 200px;
border: 1px solid black;
margin-top: 10px;
}
<div id="ctr">
<div class="box">
<div class="something1"></div>
<div class="something2"></div>
</div>
</div>
Or you can add padding to parent element or use overflow: hidden
body {
background-color: black;
padding: 0;
margin: 0;
box-sizing: border-box;
}
#ctr {
height: 500px;
width: 200px;
margin: 0 auto;
background-color: red;
overflow: hidden
}
#ctr > .box {
background-color: white;
height: 200px;
width: 200px;
padding-top: 1px;
margin-top: 10px;
}
<div id="ctr">
<div class="box">
<div class="something1"></div>
<div class="something2"></div>
</div>
</div>
You can read more about this at Mastering margin collapsing
Question 1:I learnt Holy Grail of Layouts today, after coding,the browsers show me strange format like this(not a complete black border):
[
my code is following:
#container {
border: 10px solid black;
/*this code cause the umcomplete black border*/
padding: 0 220px 0 200px;
}
.main1 {
float: left;
position: relative;
width: 100%;
background-color: grey;
min-height: 100px;
}
.left1 {
float: left;
position: relative;
width: 200px;
margin-left: -100%;
left: -200px;
background-color: red;
min-height: 100px;
}
.right1 {
float: left;
position: relative;
width: 220px;
margin-left: -220px;
right: -220px;
background-color: green;
min-height: 100px;
}
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
Question 2:In my opion,if I make some changes, same layout will show but position:relative is not included.The format is still strange(content in midddle area is covered by both side areas):
.main2 {
background-color: grey;
float: left;
width: 100%;
min-height: 100px;
}
/*this is the only new code*/
#main2Inner {
margin: 0 220px 0 600px;
}
.left2 {
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
min-height: 100px;
}
.right2 {
float: left;
width: 220px;
margin-left: -220px;
background-color: green;
min-height: 100px;
}
<div id="container2">
<div class="main2">
<div id="mianInner">this is paragraph 4 I dont know why some content cannot be displayed</div>
</div>
<div class="left2">this is paragraph 5</div>
<div class="right2">this is paragraph 6</div>
</div>
You are dealing with floating elements overflowing their container. You may use overflow:hidden (or position/float, display) to modify the block formating context (BFC).
#container {
border: 10px solid black;
overflow: hidden;
/*keyword : Block Formating Context */
padding: 0 220px 0 200px;
min-width: 500px;
;
}
.main1 {
float: left;
position: relative;
width: 100%;
background-color: grey;
min-height: 100px;
}
.left1 {
float: left;
position: relative;
width: 200px;
margin-left: -100%;
left: -200px;
background-color: red;
min-height: 100px;
}
.right1 {
float: left;
position: relative;
width: 220px;
margin-left: -220px;
right: -220px;
background-color: green;
min-height: 100px;
}
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
Flex or table display would be more reliable in my own opinion
#container {
border: 10px solid black;
display: flex;
min-height: 50px;
box-sizing: border-box;
}
.main1 {
background-color: grey;
flex: 1;
}
.left1 {
order: -1;
width: 200px;
background-color: red;
}
.right1 {
width: 220px;
background-color: green;
}
#container2 {
border: 10px solid black;
height: 50px;
/* will grow taller if needed */
display: table;
width: 100%;
box-sizing: border-box;
table-layout: fixed;
}
#container2 > div {
display: table-cell;
}
<h1>display:flex</h1>
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
<hr/>
<h1>display:table</h1>
<div id="container2">
<div class="left1">this is paragraph 1</div>
<div class="main1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
I have a div with class container. I have 3 more divs inside .container. What I want is to display internal divs float: left so that 2 divs tags are visible inside .container and the third one is invisible and is placed on the right side of first 2 div tags which are visible. I am trying the following code but it makes all tags visible all the time.
jsfiddle
<div class="container">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
css
.container {
position: relative;
width: 405px;
height: 500px;
background: red;
margin: 0 auto;
overflow: hidden;
}
.div {
width: 200px;
height: 200px;
background: blue;
float: left;
border: 1px solid red;
}
I want above to look like this
You can do as such in other way,
HTML
<div class="container">
<div class="innerContainer">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
</div>
CSS
.container {
position: relative;
width: 405px;
height: 500px;
background: red;
margin: 0 auto;
overflow: hidden;
}
.innerContainer {
position: relative;
width: 605px;
height: 500px;
overflow: hidden;
}
.div {
width: 200px;
height: 200px;
background: blue;
float: left;
border: 1px solid red;
}
Check over here http://jsfiddle.net/nftp6/8/
Use:
display: inline-block;
white-space: nowrap;
For that effect
Fiddle:
http://jsfiddle.net/Hive7/nftp6/5/
Use display:inline-block instead of float and set white-space:nowrap to the container:
.container {
position: relative;
width: 405px;
height: 500px;
background: red;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
}
.div {
width: 200px;
height: 200px;
background: blue;
display: inline-block;
border: 1px solid red;
}
Demo fiddle
Now you'll most likely face some white-space issues, read this answer for multiple ways to handle that