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>
Related
I have 4 divs in this order : #header , #content, #navigation, #footer.
#header {
background: lightblue;
height: 10%;
border: 1px solid black;
}
#content {
background: green;
opacity: 0.5;
width: 74%;
float: left;
height: 80%;
border: 1px solid black;
}
#navigation {
background: brown;
height: 80%;
width: 24%;
text-align: center;
border: 1px solid black;
}
#footer {
background: hotpink;
height: 10%;
border: 1px solid black;
}
body,html {
height:100%;
margin:0;
}
<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>
I am learning css, and in this scenario my understanding is that a non floated block level div named "navigation" will move in to take the place of a left floated div "content".
The text 'NAVIGATION' inside of the div with id "navigation" is not hiding behind the #content div and is instead appearing inside of #footer div.
After going through this question Text in floated div I learnt that content in following div will float around this floated div.
Now since this #content div is only 75% wide, why is the NAVIGATION text not appearing right next to the #content div ? Why does it appear inside of the #footer div ?
display:inline-block is a better way to use float
inline-block is better than float, The reason that using the float method is not suited for layout of your page is because the float CSS property was originally intended only to have text wrap around an image and is, by design, not best suited for general page layout purposes
Yo can do this, first remove
float: left;
in #content and add
display: inline-block;
and add
display: inline-block;
#header {
background: lightblue;
height: 10%;
border: 1px solid black;
}
#content {
background: green;
opacity: 0.5;
width: 74%;
display: inline-block;
height: 80%;
border: 1px solid black;
}
#navigation {
background: brown;
height: 80%;
width: 24%;
display: inline-block;
text-align: center;
border: 1px solid black;
}
#footer {
background: hotpink;
height: 10%;
border: 1px solid black;
}
body,html {
height:100%;
margin:0;
}
<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>
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,
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>
When button's children overflows button itself, they normally do it to the right, but in FF they suddenly do it the the left. How can I prevent such a behaviour? Is it FF bug?
Sample HTML:
<button class="test"><span class="child"></span><span class="child"></span></button>
Sample CSS:
.test {
box-sizing: border-box;
width: 40px;
height: 40px;
border: none;
background: red;
white-space: nowrap;
padding: 10px;
text-align: left;
}
.child {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid green;
background: blue;
}
Example: http://cssdeck.com/labs/m6vnniol
I've been battling with this problem for a while and I'd like to ask advice if any of you can help.
I'm making a simple layout where I have a 120px high header and a content div under it. I'd like to stretch the content to the bottom of the page, but when I set the height to 100% it stretches over the page.
I have tried googling this plenty of times but none of the answers I've found help me or are too complex to understand.
My CSS is as follows:
* {
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
border: 5px solid red;
margin-bottom: -16px;
}
body {
background-color: lightblue;
height: 100%;
border: 5px solid blue;
margin: 0 0 -16px 0;
}
.wrapper {
display: block;
position: relative;
background-color: green;
width: 605px;
margin: auto;
height: 100%
}
.header {
display: inline-block;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
I've set borders to html and body just to see that I can stretch them properly, so please ignore those.
You can position the header absolute within the content div and set the top padding on the content div to the same height as the header.
JSFiddle
HTML
<div class="wrapper">
<div class="content">
<div class="header"></div>
</div>
</div>
CSS
.header {
position:absolute;
top:0;
left:0;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
padding-top:120px;
}
Set max-height: 100%; instead of height: 100%; which will not over-height the header height as it is defined height: 120px;