I try to create element with nested border like the following image. But there are some white-space between these 2 containers without no reason.
I can reproduce this issue on Chrome and Edge.
HTML
</div>
</div>
</div>
CSS
#container1 {
width: 200px;
height: 200px;
border: 5px solid blue;
}
#container2 {
width: 200px;
height: 100%;
border: 5px solid red;
box-sizing: border-box;
}
#bar {
background: orange;
height: 24px;
width: 100%;
}
https://jsfiddle.net/cjg9zf1o/9/
Thanks,
Related
Why is the element outside it's container? At the bottom the yellow element is out of view by about .5px and the container with orange border is too. The scrollbar is overlapping the container too. I thought border-box was meant to make sure inner elements don't go out of the containing element.
.inner-element {
height: 3000px;
width: 20px;
background: lightgoldenrodyellow;
border: solid 2px black;
box-sizing: border-box;
}
Container element
.container {
display: flex;
width: 400px;
height: 100%;
box-sizing: border-box;
border: 1px solid orange;
overflow-y: auto;
}
The left sidebar on this Stackblitz:
https://stackblitz.com/edit/2-column-scroll-v2?file=src%2Fapp%2Fmy-view%2Fmy-view.component.css
I have turned your code into a snippet. And the inner-element stays within the container as expected. I have added the lightblue background to the container to see it better. So the problem you have is not related to the code you have provided.
.inner-element {
height: 1000px;
width: 20px;
background: lightgoldenrodyellow;
border: solid 2px black;
box-sizing: border-box;
}
.container {
display: flex;
width: 400px;
box-sizing: border-box;
background: lightblue;
border: 2px solid orange;
overflow-y: auto;
}
<div class="container">
<div class="inner-element"> </div>
</div>
I have a div inside another div. The outer div has a given width, but max-width should be 100%. The inner div is resizable but somehow the outer div doesn't seem to care whether or not the inner div gets wider. A scrollbar is displayed instead of sizing with the inner box to a maximum of 100%.
This fiddle demonstrates the issue; how can I have a div with a given width in px, set the inner div to resizable and have the outer div listen to the inner div's current width and size up to a maximum of 100%?
JSFiddle with the example
HTML
<div id="outer">
<div id="inner">resize me...</div>
</div>
CSS
#outer {
overflow: auto;
width: 200px;
min-width: 200px;
max-width: 100%;
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
}
#inner {
overflow: auto;
background: #ccc;
border: 1px solid #999;
padding: 15px;
resize: both;}
Add the following CSS (or replace it):
#outer {
display: inline-block;
width: auto;
}
#inner {
width: 200px;
}
Live preview: JSFiddle
You should remove "width: 200px;" and add "float: left;" to "#outer"
Here is the code:
#outer {
overflow: auto;
min-width: 200px;
max-width: 100%;
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
float: left;
}
see if this helps.
body {
padding: 0;
margin: 0;
}
#outer {
/* min-width: 200px;*/
/* max-width: 100%; */
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
display: inline-block;
box-sizing: border-box;
}
#inner {
overflow: auto;
background: #ccc;
border: 1px solid #999;
padding: 15px;
max-width: 100%;
resize: both;
}
<div id="outer">
<div id="inner">resize me...</div>
</div>
I have the following code jsbin. Is it possible to have vertical scroll when messages overflow the wrapper? Thanks!
replace your css with this css demo
#wrapper {
position: relative;
height: 400px;
border: 1px solid #AAA;
margin-bottom: 20px;
}
#list {
position: absolute;
bottom: 0;
width: 100%;
max-height:100%;
overflow-y: auto;
}
.message {
background-color: orange;
padding: 10px;
border-bottom: 1px solid red;
}
I have a problem to stick a picture stick to the right side of the page.
Html code:
<img class="displayed" src="achtergrond.jpg" alt="achtergrond">
Css code:
.displayed {
width: 100%;
height: 400px;
margin-right:-8px;
margin-left:-8px;
margin-bottom: 100px;
}
I get the problem that the picture does not make contact with the right side of the page, but i set "margin-right: -8px"
Thanks for the help
Here's a FIDDLE
CSS
.container {
width: 400px;
height: 400px;
background-color: red;
border-top: 2px solid red;
}
.myimage {
border: 0px solid red;
width: 100%;
margin: 40px auto;
}
img {
width: 100%;
}
i put div with class="inner-box2" after div with class="inner-box".
HTML:
<div class="box">
<div class="inner-box"></div>
<div class="inner-box2"></div>
</div>
CSS:
.box {
position: relative;
width: 400px;
height: 400px;
border: solid 10px red;
}
.inner-box {
border: solid 10px blue;
position: absolute;
height:150px;
width:380px;
}
.inner-box2 {
border: solid 10px green;
}
Now, I need to show div(inner-box2) after div(inner-box) but in my Code div(inner-box2) show in under div(inner-box). how to fix this? See Online Demo
If you are putting an element below the absolute position, you can add a margin to bump down your next element the distance required to "skip" the absolute item's space and presence. That way in the code, the item is still below your absolute item, but still visually appears below it.
Absolutely-positioned items need to have top|bottom + left|right defined.
Is this what you are shooting for http://jsfiddle.net/4bqzz/22/? I've modded your css a bit, and then floated the boxes left. You can play around with the sizes, borders, etc... But I assume they were so thick just to demonstrate where they were. Like so:
.inner-box {
border: solid 5px blue;
float:left;
height:150px;
width:360px;
}
.inner-box2 {
border: solid 5px green;
float:left;
height:150px;
width:20px;
}
if you want to use absolutely positioned elements in this example, this would be how to do it: http://jsfiddle.net/4bqzz/106/
.box
{
position: relative;
width: 400px;
height: 400px;
border: solid 10px red;
}
.inner-box
{
border: solid 10px blue;
position: absolute;
height: 150px;
width: 380px;
}
.inner-box2
{
border: solid 10px green;
position: absolute;
top: 170px;
height: 210px;
width: 380px;
}