I've got 3 div's that I want to look like this:
Here's the HTML:
<section class="main-window">
<div id="topdiv"></div>
<div id="middiv"></div>
<div id="botdiv"></div>
</section>
And the CSS:
.main-window
{
vertical-align: middle;
border: 2px solid gray;
border-radius: 5px;
width: 90%;
height: 70%;
background-color: White;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#topdiv {
background-color: beige;
height: 40%;
border: 2px solid black;
}
#middiv {
background-color: lightblue;
height: 40%;
border: 2px solid black;
}
#botdiv {
background-color: lightgreen;
height: 20%;
border: 2px solid black;
}
Here's the fiddle.
Notice that I've added heights to the divs of 40%, 40% and 20% so that they fill the 100% of the parent div. However, after I added a border to each div, the total height is increased slightly beyond the parents boundaries.
My question is: can I set heights of 40% for the two top divs and make the bottom div stretch until the bottom of its parent div?
You should add this css to each child element:
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
Working Fiddle
and if you make adjustments in border, it seems to look nice.
Updated Fiddle
include jQuery and write below jQuery for third div
$(document).ready(function () {
$("#botdiv").height($(".main-window").height() - $("#topdiv").height() - $("#middiv").height());
});
Related
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 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.
On a site I'm building I want to have a 3 coloured border example here for the body.
What is the easiest way to create this?
I tried the following but it didn't work out how I expected it to:
<div id="red">
<div id="white">
<div id="blue">
<!--SITE GOES HERE-->
</div>
</div>
</div>
#red {
width: 100%;
height: 100%;
padding: 16px;
background: #CC092F;
}
#white {
width: 100%;
height: 100%;
padding: 16px;
background: white;
position: absolute;
z-index: 2;
}
#blue{
width: 100%;
height: 100%;
padding: 16px;
background: #0C144E;
position: absolute;
z-index: 3;
}
The problem with that is the padding pushes the divs offscreen, I realise I'm going about it the wrong way… (If i use percentages i.e. 98% it obviously scales, which I do not want) but I can't think of an alternative. Thanks in advance.
try this (SEE FIDDLE):
<div id="red" class="site-border">
<div id="white" class="site-border">
<div id="blue" class="site-border">
<div id="content"></div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#content {
height: 500px;
background: #e3e3e3;
padding: 16px;
}
.site-border {
width:100%;
}
#red {
border: 16px solid #CC092F;
}
#white {
border: 16px solid #fff;
}
#blue {
border: 16px solid #0C144E;
}
Instead of scaling, you should use the below properties in your CSS, this way, the borders and paddings will be counted inside the element instead of outside as normal box model does.
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Also, you shouldn't use position: absolute; cuz I don't see any reason of using that over here.
You could try this css:
div {
width: 100px;
height: 200px;
border: 3px solid navy;
outline: 3px solid #fff;
box-shadow: 0 0 0px 6px darkred;
}
Fiddle: http://jsfiddle.net/BXFUk/2/
I am trying to code a chat page but I got a problem with the sizing of the divs :/
I have a structure like this:
<div class="page">
<div class="chat-holder">
<div class="chat-text">
</div>
</div>
</div>
and the page class is (let's say the width and the height of the screen so it is
.page {
width: 100%;
height: 100%;
}
The chat-holder I want to have a width of 740px and the height should be any height but not more than the browser height and a background white and a 20px padding around the chat area (so far I tried this):
.chat-holder {
background: #fff;
width: 740px;
max-height: 100%;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
Now my chat area I want to have a 1px black border inside this chat-holder and if the chat is not bigger than the browser minus that 40px padding, I want it to have the size of the text that is in it. If it is bigger, I want it to have scroll inside it (so far I tried this)
.chat-text {
width: 100%;
max-height: 100%;
border: 1px solid #000;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
}
But this doesn't work, the chat-text div goes out of the chat-holder, as i see it is because the max-height doesn't work inside a max-height. I hope there is a work-around on this issue because I really don't want to use jQuery or something to fix it.
Thank you in advance
EDIT: jsFiddle http://jsfiddle.net/KjX7s/2/
You have to set the height as well as the max-height:
.page {
width: 100%;
height: 100%;
}
.chat-holder {
background: #fff;
width: 740px;
min-height: 20px;
max-height: 100%;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.chat-text {
width: 100%;
min-height: 20px;
max-height: 100%;
border: 1px solid #000;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
}
See the fiddle: http://jsfiddle.net/KjX7s/14/
Add
overflow: auto;
inside .chat-holder .
And put an height calculated with CSS Calc():
max-height: calc(100% - 41px);
http://jsfiddle.net/KjX7s/5/