I've got a wrapper div that's vertically and horizontally centered, and then two more divs inside it that are intended to share the space of the wrapper in a 50/50 split. When I add an image ('fireplace') to the topmost div ('wall'), even though the image should have no trouble fitting in the allocated space, the wall div is expanding its height vertically and ends up taking more than the intended amount of space in the wrapper. Here's the CSS code for the divs and the image in question:
.wrapper {
display: grid;
place-items: center;
height: 85vh;
width: 85vw;
}
#container {
background-color: antiquewhite;
z-index: 0;
height: 100%;
width: 100%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
#wall {
background-color: darkred;
z-index: 1;
width: 100%;
height: 100%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.fireplace {
height: 20vh;
width: auto;
}
Setting the height of the container and the wall to be 42.5vh (half of the wrapper size) seems to fix this behavior.
Related
I have the following example: https://jsfiddle.net/fbwv8jhp/
with the following styles:
.menus {
height: 200px;
width: auto;
margin: auto;
}
.menu{
width: 200px;
height: 30px;
float: left;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 10px;
}
Here, menu elements are aligned to left. But the additional desired behavior is to make sure that regardless the screen width (i.e. the quantity of menu divs shown in each row), they are displayed at the center. This means that in each row the distance between left menu and left screen border and right menu and right screen border should be the same, and all menus centered.
Couldn't make it, so maybe someone knows how this can be achieved.
On the image below, distances 1 and 2 should be equal.
Try using css flex-box:
.menus {
height: 200px;
width: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.menu{
width: 200px;
height: 30px;
float: left;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 10px;
}
I'm trying to reduce the space of the gray box while keeping the images centered, but I dont know what property to use. I'm using flex box if that helps.
.layout {
display: flex;
flex-wrap: wrap;
}
.child {
min-height: 100px;
width: 200px;
background: rgba(185, 180, 169, 0.226);
flex: calc(100% / 3);
text-align: center;
line-height: 100px;
border: 5px solid white;
}
Remove the border for your child element
Set few codes in css
img {
border: 0;
outline: 0;
}
.child{
border: 0;
}
I want the color of my box to be very opaque in the middle and then to fade out as it gets closer to the border.
You can use box-shadow for this purpose.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
div {
width: 25vw;
height: 25vw;
background: royalblue;
box-shadow: 0 0 10px navy;
}
<div></div>
Update:
After seeing a picture of what you were looking for, I tried to better match that. Still with box-shadow.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
div {
width: 25vw;
height: 25vw;
background: #999999;
box-shadow: inset 0 0 10vw 2.5vw white;
}
<div></div>
One really cool thing about flexbox is that, if there is room, the flex items' margins are included in the width of the flex container, even if I tell it to take up the whole space. For example, if I have an 100px-wide flex container, and give it a single child that takes up its whole width, then give that child 10px margins on both sides, the child actually becomes 80px wide, as the container allows the child to be completely encapsulated, including the margins. This ignores concerns about overflow, which can be worked around quite easily (min-width: 0; usually handles this).
flex-container {
width: 100px;
height: 100px;
display: flex;
background-color: dodgerblue;
}
flex-item {
display: block;
background-color: darkgray;
margin-left: 10px;
margin-right: 10px;
width: 100%;
height: 20px;
margin-top: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>
However, this trick does not seem to extend to the cross-axis (height normally, width with flex-direction: column). If I now give my flex item 10px margins on the top and bottom, instead of the left & right, and give it the whole height instead of the whole width like before, it starts to extend past the bottom edge of the container. Why is that?
flex-container {
width: 100px;
height: 100px;
display: flex;
background-color: dodgerblue;
}
flex-item {
display: block;
background-color: darkgray;
margin-top: 10px;
margin-bottom: 10px;
height: 100%;
width: 20px;
margin-left: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>
I have seen this behavior on Google Chrome as well as Firefox. It is probably also he case on Internet Explorer/Edge, but I have not had the ability to test.
Why does the flex item stay inside margins on the main axis, but not on the cross axis?
The reason is that in the direction flex is set, and since flex-grow's default is 0, it is not allowed to grow, but it is allowed to shrink, (flex-shrink default is 1), so it does.
Here is the same test using column direction, where you will get the reverse behavior.
Your first sample, but with column direction
flex-container {
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
background-color: red;
}
flex-item {
display: block;
background-color: green;
margin-left: 10px;
margin-right: 10px;
width: 100%;
height: 20px;
margin-top: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>
Your second sample, but with column direction
flex-container {
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
background-color: red;
}
flex-item {
display: block;
background-color: green;
margin-top: 10px;
margin-bottom: 10px;
height: 100%;
width: 20px;
margin-left: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>
Updated based on a comment.
If you want a similar behavior, where the flex item shrinks and doesn't overflow its parent, simply remove the given width/height
Sample for row direction
flex-container {
width: 100px;
height: 100px;
display: flex;
background-color: green;
}
flex-item {
display: block;
background-color: orange;
margin-top: 10px;
margin-bottom: 10px;
width: 20px;
margin-left: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>
Sample for column direction
flex-container {
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
background-color: green;
}
flex-item {
display: block;
background-color: orange;
margin-left: 10px;
margin-right: 10px;
height: 20px;
margin-top: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>
An initial setting of a flex container is flex-shrink: 1.
This means that flex items will shrink when necessary to avoid overflowing the container.
The flex-shrink property (along with flex-grow, flex-basis and flex) works only on the main axis. That's why you see a difference in your width vs. height examples.
When you add top and bottom margins to a flex item in a row-direction container, the flex-shrink: 1 feature does not apply (because you're now in the cross axis), so the item will not shrink to accommodate the added margins.
If you disable flex-shrink, your flex item with horizontal margins will overflow the container:
flex-container {
width: 100px;
height: 100px;
display: flex;
background-color: red;
}
flex-item {
flex-shrink: 0; /* new */
margin-left: 10px;
margin-right: 10px;
width: 100%;
height: 20px;
margin-top: 20px;
background-color: green;
}
<flex-container>
<flex-item></flex-item>
</flex-container>
It will respect the margins when you define the flexbox as a column and remove the width: 100% for the child.
flex-container {
width: 100px;
height: 100px;
display: flex;
background-color: red;
}
flex-item {
display: block;
background-color: green;
margin-left: 10px;
margin-right: 10px;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
}
<flex-container>
<flex-item>
</flex-item>
</flex-container>
This is a two part question, I believe, with a third and fourth, bonus twist.
What am I doing wrong to get the height of the purple set to 100% to be a little bit too high?
How can I set the width of the purple so that it goes 100% of the remaining space?
Is the only way to get rid of the spacing between the yellow and the purple to alter the HTML code by putting everything on the same line?
How can I remove the margin that the green border holds between self and the outer component?
jsfiddle.net/jL8e5/1/
div.faqticleList {
background: #ffdd00; /* yellow */
display: inline-block;
padding: 3px;
width: 200px;
height: 150px;
}
div.faqticlePreview {
background: #bb88ff; /* purple */
display: inline-block;
padding: 3px;
width: auto;
height: 100%;
}
I'm not sure if I completely understand your goals. I assumed:
Fixed width left
Variable width right
http://jsfiddle.net/wXme4/
CSS
body{
margin: 0;
padding: 0;
width: 100%;
}
div.faqticleList {
background: #ffdd00;
width: 200px;
height: 100%;
float: left;
}
div.faqticlePreview {
background: #bb88ff;
width: 100%;
height: 100%;
margin-left: -203px;
padding-left: 203px;
}
div.container {
border: solid 1px #007700;
margin: 0px;
height: 100px;
//overflow: hidden;
//overflow: auto;
}
div.faqticleList div, div.faqticlePreview div {
padding: 3px;
}
Script
document.getElementById("faqticleList").innerHTML = "<div>faqticleList</div>";
document.getElementById("faqticlePreview").innerHTML = "<div>faqticlePreview</div>";
Updated Demo
Float the left column, and make the right column a regular block element with overflow: hidden. That might be the simplest way to do it.
CSS
div.faqticleList {
/* display: inline-block; */
float: left;
...
}
div.faqticlePreview {
/* display: inline-block; */
/* width: auto; */
overflow: hidden;
...
}
This will do what you want, but I would recommend you set your height to fixed, or it wont work,
div.faqticleList {
background: #ffdd00;
display: inline-block;
width: 30%;
height: 150px;
}
div.faqticlePreview {
background: #bb88ff;
display: inline-block;
width: 69%;
height: 100%;
clear: both;
}
div.container {
border: solid 1px #007700;
margin: 0px;
height: 100%;
//overflow: hidden;
//overflow: auto;
display: block;
clear: both;
}
You can use jquery to dynamically find the width.
JS:
document.getElementById("faqticleList").innerHTML = "faqticleList";
document.getElementById("faqticlePreview").innerHTML = "faqticlePreview";
var difWidth = $('.container').width() - 212;
$('#faqticlePreview').css( "width", difWidth )
Then, in your CSS, remove the width from faqticlePreview and float the other div left:
div.faqticleList {
background: #ffdd00;
display: inline-block;
padding: 3px;
width: 200px;
height: 150px;
float: left;
}
div.faqticlePreview {
background: #bb88ff;
display: inline-block;
padding: 3px;
height: 100%;
}
Updated jsfiddle:
http://jsfiddle.net/a2Run/
Note: The width you are subtracting needs to be 212. 200px width from the first div, plus 3px of padding on each side of both divs 200+(3x4)=212