I have this situation in which I'm using
height: 100%
on a parent, and in the parent I have this header which is 34px and a container which is 100% again.
For some reason the container (ordered list) is bigger than the parent
Here is a jsfiddle
And here is the css
* {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
}
section {
padding: 10px 20px 20px 10px;
border: 2px solid black;
}
header {
height: 30px;
background-color: blue;
}
ol {
list-style-type: none;
border: 1px dashed #d2d4d8;
box-sizing: border-box;
background-color: yellow;
padding: 0;
}
li {
display: inline-block;
box-sizing: border-box;
background-color: green;
width: 30%;
border: 1px solid blue;
font-size: 0;
}
Any suggestions why the ordered list is outside the parent section element ?
It's setting the height of the ol to 100% of the parent height, not 100% of the parent minus the 30px for the header. I've gotten frustrated at this before, because in my head I want 100% to mean "Fill to the parent" but it means literally 100%. If you can do css3 stuff, you could change your css to this:
ol { height: calc(100% - 30px); }
You could also do some positioning stuff, but that always gets gross. Here is an untested idea of it:
section { position: relative; }
ol { position: absolute; top: 30px; bottom: 0; }
It doesn't help that your mixing percentages and fixed sizes with your padding. When you do that use box-sizing:border-box; so that the percentage based width and height will take into account the padding and margins and not just add them on the end.
Related
I'm having some trouble getting a table with width: 100% flush with it's parent div. For some reason a less than 1px gap is seen on either side of the table.
I've tried setting all margins and padding to 0 as well as setting the min and max width for the div but it still won't use all of the available contents. Would really appreciate any help someone can give on this. Here's the css for the table and it's parent div as well as some images of the issue:
.library,
.player,
.playlist {
box-sizing: border-box;
}
.playlist {
position: fixed;
border: 1px solid black;
width: 70%;
height: 90%;
left: 30%;
top: 10%;
}
.playlist table {
margin: 0;
padding: 0;
width: 100%;
border-collapse: collapse;
}
.playlist th,
td {
margin: 0;
padding: 0;
border: 2px solid black;
}
How could I make the effect of below picture with HTML, CSS using the the bootstrap framework?
I need two adjacent divs with trapezoid shape (or separated by a diagonal line). Both need to have a border.
You can do this by drawing a shape in CSS.
You can draw such a triangle in CSS by playing with different borders (top, right, bottom left) of an element that has zero width.
Example: https://css-tricks.com/snippets/css/css-triangle/
In the example below I use the pseudo element :after for this effect:
/* Apply styles to both DIVs */
.container > div {
width: 50%;
float:left;
font-weight: bold;
padding-left: 10px;
/* include padding in the height/width */
box-sizing: border-box;
margin: 0;
}
.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
clear: both;
}
.container div:first-child {
background: #66ff66;
/* The triangle will be position:absolute, so it requires a `position:relative` parent */
position: relative;
/* We are drawing a full rectangle later, so we hide the rest of it */
overflow: hidden;
}
.container div:last-child {
background: #ff6666;
}
.container div:first-child:after {
position: absolute;
display: block;
content: ' ';
padding: inherit;
box-sizing: border-box;
/* Change below units (you can use px not just em)
to make the line become at different angles */
border-top: 1.3em solid transparent;
border-bottom: 1.3em solid transparent;
border-right: 1.3em solid #ff6666;
right: 0;
top: 0;
}
<div class="container">
<div>div١</div>
<div>div٢</div>
</div>
Update
But as you indicated in the comment, you wanted a different answer that uses div2 for the triangle, so here you are:
/* Apply styles to both DIVs */
.container > div {
width: 50%;
float:left;
font-weight: bold;
/* include padding in the height/width */
box-sizing: border-box;
margin: 0;
}
.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
clear: both;
}
.container div:first-child {
background: #66ff66;
padding-left: 10px;
}
.container div:last-child {
background: #ff6666;
position: relative;
padding-left: 1.3em;
}
.container div:last-child:before {
position: absolute;
content: '';.
width: 0;
height: 0;
box-sizing: border-box;
/* Change below units (you can use px not just em)
to make the line become at different angles */
border-top: 1.3em solid #66ff66;
border-bottom: 1.3em solid transparent;
border-right: 1.3em solid transparent;
top: 0;
left: 0;
}
<div class="container">
<div>div١</div>
<div>div٢</div>
</div>
Update 2
The picture you showed in comments also included real borders. This requires changing the approach. The new approach still uses :before, but adds border to it, and rotates it 45 degrees.
The idea is based on an example from: https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/
To imagine it:
Here's the code:
/* Apply styles to both DIVs */
.container > div {
width: 50%;
float:left;
font-weight: bold;
/* include padding in the height/width */
box-sizing: border-box;
margin: 0;
}
.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
clear: both;
}
.container div:first-child {
background: #66ff66;
padding-left: 10px;
border: 1px solid;
border-right: none;
}
/*
The following assumes diemnsions 1.3em * 1.3em
Your real case can change the number
*/
.container div:last-child {
background: #ff6666;
position: relative;
border: 1px solid;
border-left: none;
padding-left: calc(1.5 * 1.3em);
overflow: hidden;
}
.container div:last-child:before {
position: absolute;
content: '';
width: calc(2 * 1.3em);
height: calc(2 * 1.3em);
box-sizing: border-box;
background: #66ff66;
border: 1px solid ;
transform:rotate(45deg);
margin-top: -1.3em;
margin-left: -1.3em;
left: 0;
top: 0;
}
<div class="container">
<div>div١</div>
<div>div٢</div>
</div>
just use border-right like following code snippet and see result :
.parent{
width: 100%;
display: flex;
background-color: #01579b;
}
.div1 {
width: 30%;
border-bottom: 100px solid #000;
border-right: 50px solid transparent;
}
.div2 {
width: 70%;
height: 100px;
}
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
</div>
I have a page where I have a div at the bottom of the page which when clicked shows another div, just above the bottom div.
I'd like to avoid the footer divs overlapping the content div higher up the page when the window is resized.
The heights of the divs involved shouldn't change.
Is a CSS-only solution possible?
I've created a jsfiddle here
CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
}
#content {
height: 300px;
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div id="container">
<div id="content">content
</div>
<div id="footer">
<div id="footer-content">footer-content</div>
<div id="footer-footer">Click me to expand</div>
</div>
</div>
JS
$("#footer-footer").on("click", function (evt) {
$("#footer").toggleClass("expanded");
});
Simply add position: relative to the #container. This way the absolute positioning of the footer refers to the container.
http://jsfiddle.net/5bkznxud/5/
You'll probably notice that in the example above there's always a scrollbar on the right. This is because of the borders and padding on #container. Here's an example with outline (border with no calculated width) and without any padding:
http://jsfiddle.net/5bkznxud/6/
TIP: Always use outline instead of border for blocking a layout OR use box-sizing: border-box. This causes a box' dimensions to also calculate for the border. Otherwise a box with width of 100% and border will span slightly wider than you want.
It can be solved by using calc().
In this case you can create a jQuery function that get the height of footer-content and footer-footer -> .height(). Without jQuery, I don't think it's possible.
Here is an example:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
min-height: 420px;
}
#content {
height:calc(100% - 135px);
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
http://jsfiddle.net/dokmngv0/
Browser support for the calc() feature: http://caniuse.com/#feat=calc
I want to add a space of 10px on both sides of the #in div, like this:
I have this code - live demo:
html
<div id="out">
<div id="in"></div>
</div>
css
#out {
width: 700px;
height: 40px;
background: lightblue;
position: relative;
}
#in {
position: absolute;
width: 100%;
height: 20px;
top: 10px;
background: white;
margin: 0 10px;
}
No calc(), No box-sizing. Since the element is positioned absolutely you could set its left/right offset properties to 10px instead of specifying an explicit width and margins on its sides:
Example Here
#in {
position: absolute;
height: 20px;
top: 10px;
left: 10px;
right: 10px;
background: white;
}
You have to use css calc rule in order to count 100% width - the margin size:
#in {
width: calc(100% - 20px);
}
Hope this helps
Solution 1: Just some padding
You can greatly simplify the CSS:
Just specify the size for the outer div. box-sizing: border-box is added to prevent the padding from influencing the width of the div.
#out {
width: 700px;
padding: 10px;
box-sizing: border-box;
background: lightblue;
}
No positioning needed for the other div. Just give it a height, and it will automatically strech the other div:
#in {
height: 20px;
background: white;
}
http://codepen.io/anon/pen/yICdF
Solution 2: Use a border
If your goal is to get a blue border, you don't need two divs at all. What about this one:
#out {
width: 700px;
}
#in {
height: 20px;
border: 10px solid lightblue;
}
Of course you don't need two divs in this case. Just remove #out altogether and move the width property to #in.
http://codepen.io/anon/pen/icHjD
I'm trying to create the markup for a simple panel. The structure is below. The <div> with "transcluded" in it should fill its parent container <div>.
<div class="container">
<div class="container-title">title</div>
<div class="container-body">
transcluded
</div>
</div>
As you can see (in http://jsfiddle.net/kAk9Z/), the "transcluded" body extends beyond its container instead of filling only.
How can I get the container to stay its size while having the "transcluded" <div> fill in the remaining space?
Why don't you set you're height on the inner body div. That way it will determine the height of your container div, and you get the result you want. You could even go for a min-height and have it grow when the content requiers it. Something like this:
.container {
width: 640px;
background-color: #dededd;
padding: 4px;
}
.container-body {
background-color: white;
height: 100%;
border: 1px solid black;
padding: 8px;
min-height: 460px;
}
And the fiddle: http://jsfiddle.net/kAk9Z/4/
This is not a box-sizing issue, when you declare height 100% it is referred to the height of the parent element, which already contains a div so the sum of the heights of the .container's children is > 100.
A solution can be switch the container body to position: absolute, here's the fiddle: http://jsfiddle.net/kAk9Z/2/
.container {
width: 640px;
height: 480px;
background-color: #dededd;
padding: 4px;
position: relative;
}
.container-body {
background-color: white;
border: 1px solid black;
padding: 8px;
position: absolute;
top: 30px;
bottom: 4px;
right: 4px;
left: 4px;
}