I have a div .modal that has a fixed position with padding: 90px;. There is a div .child inside it with height: 1500px;.
The problem is that the padding right and bottom gone on modal, I have tried to set box-sizing: border-box; but it cannot solve the problem.
If you inspect it, there are negative value applied on position, I don't know why.
.modal {
background-color: gray;
height: 100vh;
padding: 90px;
position: fixed;
width: 100vw;
}
.child {
background-color: orange;
height: 1500px;
width: 100%;
}
<div class="modal">
<div class="child"></div>
</div>
Padding should be present no matter the value of the height of the content.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.modal {
background-color: gray;
height: 100%;
padding: 90px;
position: fixed;
width: 100vw;
overflow: auto;
}
.child {
background-color: orange;
height: 1500px;
width: 100%;
}
<div class="modal">
<div class="child"></div>
</div>
Try this
this will work for you, so basically the padding top and bottom didn't show because the child div was taking the whole height of the page but if you set the height to be for example 800px then it will work.
.modal {
background-color: gray;
height: 100vh;
position: fixed;
width: 100vw;
display:flex;
justify-content: center;
align-items:center;
}
.child {
background-color: orange;
height: 800px;
width: 100%;
margin: 90px;
}
<div class="modal">
<div class="child"></div>
</div>
Related
I have been trying to have two boxes in CSS, one in the upper right hand corner of the other. I have been trying to nest divs and use relative positioning but I cannot figure out how to do it. Can someone help me? (Not using z index)
If I understand correctly that you want one box to be inside the other, you can achieve this using position: relative and moving the inner box using top, right, left and bottom.
I recommend diving in to the MDN page for CSS position for more information.
.box1, .box2 {
display: inline-block;
}
.box1 {
width: 200px;
height: 200px;
background: green;
}
.box2 {
position: relative;
width: 100px;
height: 100px;
top: -100px;
left: -100px;
background: orange;
}
<div class='box1'></div>
<div class='box2'></div>
You can use something like this. Using flexBox to align them and giving a negative margin to second box.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
background-color: bisque;
display: grid;
place-content: center;
}
.container{
display: flex;
flex-direction: row;
}
.first{
height: 5rem;
width: 5rem;
background-color: tomato;
}
.second{
margin-top:-50%;
height: 5rem;
width: 5rem;
background-color: tomato;
}
<div class="container">
<div class="first"></div>
<div class="second"></div>
</div>
Based on Marcos answer i think i understand you wrong.
Here is a simple way get the result that you want. You can use position:relative to parent and position: absolute to child item. Then you can move child element inside. top:0; will take you to top corner and right:0; will take you to right corner.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
background-color: bisque;
display: grid;
place-content: center;
}
.parent{
width: 10rem;
height: 10rem;
background-color: tomato;
position: relative;
}
.child {
width: 5rem;
height: 5rem;
background-color: aqua;
position: absolute;
top:0;
right: 0;
}
<div class="parent">
<div class="child"></div>
</div>
Spontaneously, I can think of two possibilities. 1) Work with 'position' or 2) work with 'margin'.
here an example with margin in combination flexbox;
.w {
background-color: lightgray;
display: flex;
justify-content: center;
padding: 20px;
}
.a, .b {
width: 150px;
height: 150px;
}
.a {
background-color: lightblue;
}
.b {
background-color: lightgreen;
margin-top: 20px;
margin-left: -20px;
}
<div class="w">
<div class="a">A</div>
<div class="b">B</div>
</div>
I have been searching for how to create the aspect ratio of divs using the CSS stylesheet; I could successfully create a demo. The aspect ratio works fine but I can not find a way to set the height of my container if its width and height ratio is bigger (#1 scenario).
I managed to successfully create the #2 scenario. But when I try to create #1 scenario, the container's height expands, here is my code:
HTML, body {
margin:0;
padding:0;
height:100%;
}
#container{
background: khaki;
padding: 10px;
display: table;
width: 150px;
height: 300px;
transition: all .5s ease-in-out;
}
#container:hover {
width: 500px; /* Only increasing the width */
height: 300px;
}
#c-ver-al {
background: lightblue;
padding: 10px;
text-align: -webkit-center;
display: table-cell;
vertical-align: middle;
height 100%;
width: 100%;
}
#c-hor-al {
background: pink;
padding: 10px;
text-align: -webkit-center;
display: inline-block;
object-fit: cover;
height 100%;
width: 100%;
}
#frame {
padding: 10px;
background: lightgray;
height: 100%;
width: 100%;
}
#window {
width: 66%;
padding-bottom: 75%;
background: blue;
}
#chat {
width: 33%;
padding-bottom: 75%;
background: red;
}
.content {
display: inline-block;
margin: -2px;
}
<html>
<body>
if you hover over it, only the container's width will be increased, not the height
<div id="container">
<div id="c-ver-al">
<div id="c-hor-al">
<div id="frame">
<div id="chat" class="content"></div>
<div id="window" class="content"></div>
</div>
</div>
</div>
</div>
The height of the container should not change, but it is
</body>
</html>
Note: I've only added padding to the divs so it would be easier to visualize where they currently are. Also, ignore my poorly made demo, I am a beginner in HTML and in CSS and I might have missed something very obvious.
Edit: I have made a hover action on css so you can see the aspect ratio working
The problem is with your two inner elements' padding-bottom. Because of the box model, when you apply a percentage-based padding to an element, it calculates based off of the parents (bubbling) width, ignoring the **height.
To resolve this, simply set a fixed padding-bottom:
HTML,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
background: khaki;
padding: 10px;
width: 350px; /* Increased for demo */
height: 150px; /* To fit within snippet */
display: table;
}
#c-ver-al {
background: lightblue;
padding: 10px;
text-align: -webkit-center;
display: table-cell;
vertical-align: middle;
height 100%;
width: 100%;
}
#c-hor-al {
background: pink;
padding: 10px;
text-align: -webkit-center;
display: inline-block;
object-fit: cover;
height 100%;
width: 100%;
}
#frame {
padding: 10px;
background: lightgray;
height: 100%;
width: 100%;
}
#window {
width: 66%;
padding-bottom: 75px;
background: blue;
}
#chat {
width: 33%;
padding-bottom: 75px;
background: red;
}
.content {
display: inline-block;
margin: -2px;
}
<html>
<body>
<div id="container">
<div id="c-ver-al">
<div id="c-hor-al">
<div id="frame">
<div id="chat" class="content"></div>
<div id="window" class="content"></div>
</div>
</div>
</div>
</div>
</body>
</html>
If you want to have the child actually exceed the parent container, then you'll want to use negative margin.
I have a page which displays an HTML canvas element inside a container. Since the image displayed in the canvas can be far bigger than the space I have, I forced the size of the container and used its overflow property to scroll the contente of the canvas. While both the container and the scrollbar are displayed correctly, the canvas simply ignores it.
My HTML:
<div class="sidebar">
Some content
</div>
<div class="the_wrapper">
<div class="canvas_wrapper">
<canvas id="imageCanvas"></canvas>
</div>
<div class="another_element">
Some other content
</div>
</div>
And this is the CSS:
.sidebar{
height: 100vh;
width: 20vw;
float: left;
}
.the_wrapper{
height: 100vh;
width: 80vw;
float: right;
}
.canvas_wrapper{
height: 60vh;
overflow: scroll;
}
.another_element{
height: 40vh;
}
This is what I want
But all I get is this
.the_wrapper do not need a float set to right.
.the_wrapper{
height: 100vh;
width: 80vw;
float: right; // Don't do that
}
Just do this
.the_wrapper {
position: absolute;
right: 0;
height: 100vh;
width: 80vw;
}
I also reset some properties to get the result of your first example.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
overflow: hidden;
}
Here the snippet result :
* {
box-sizing: border-box;
padding: 0;
margin: 0;
overflow: hidden;
}
.sidebar {
height: 100vh;
width: 20vw;
float: left;
border: 3px solid #000;
}
.the_wrapper {
position: absolute;
right: 0;
height: 100vh;
width: 80vw;
}
.canvas_wrapper {
height: 60vh;
border: 3px solid green;
}
.another_element {
height: 40vh;
border: 3px solid red;
}
<div class="sidebar">Some content</div>
<div class="the_wrapper">
<div class="canvas_wrapper">Canvas
<canvas id="imageCanvas"></canvas>
</div>
<div class="another_element">Some other content</div>
</div>
You can also try it in https://jsfiddle.net/lofeed/6n983g7x/4/
The wrapper is set to float to the right, meaning that all available space will be included within it.
I have a layout wherein the container has a fixed height and width of 640px x 480px. Inside this container are 3 divs, top, mid and bot. I want this 3 divs to fit inside the container provided that they will not overflow the container. The top and bot div doesn't have fixed height while the mid should fit the space between and push top and bot.
What I've already tried was like this:
HTML
<div class="main">
<div class="top">
</div>
<div class="mid">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Chestnut-breasted_Malkoha2.jpg/593px-Chestnut-breasted_Malkoha2.jpg" />
</div>
<div class="bot">
</div>
</div>
CSS
.main {
padding: 10px;
width: 640px;
height: 480px;
display: inline-block;
background: #000;
position: relative;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
}
FIDDLE HERE
Now my problem is the mid push the bot outside the container. How can i make them fit inside the container without using overflow: hidden? Thanks in advance.
NOTE : the image should fit inside the mid container.
UPDATE top and bot div can contain paragraphs so it's not fixed height.
Check this sample:
http://jsfiddle.net/J6QTg/8/
.main {
padding: 50px 0px;
width: 640px;
height: 480px;
display: block;
background: #000;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
position: absolute;
top : 0;
left : 0;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
position: absolute;
bottom : 0;
left : 0;
}
Update:
It is also possible to use tables, to have more flexible boxes.
http://jsfiddle.net/jslayer/U3EaZ/
HTML:
<div class="box">
<div class="h"> Hello<br/>Cruel<br/>World </div>
<div class="m">
<img src="http://goo.gl/a1smCR" alt="" />
</div>
<div class="b"> Omg </div>
</div>
CSS:
.box {
display: table;
width: 640px;
height: 480px;
background: red;
}
.h, .m, .b {
display: table-row;
}
.h {
background: yellow;
height: 0;
}
.m {
background: green;
}
.m img {
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.b {
background: blue;
height: 0;
}
I would use JavaScript/JQuery: FIDDLE
I've used JQuery for simplicity, but it can probably be done with just JavaScript...
var totalheight = eval($('.main').height() - $('.top').outerHeight(true) - $('.bot').outerHeight(true))
$('.mid').outerHeight(totalheight);
Try to set the height of mid based on the container.
.mid {
width: 100%;
height: 383px;
display: block;
background: #333;
}
FIDDLE
If the container has a fixed height and width, then you can set the height to 79.25% like this:
.mid {
max-width: 100%;
height: 79.25%;
display: block;
background: #333;
}
demo
I am trying to design a page with a header, a main div that stretches to 100% of the vertical landscape (minus header and footer) and a footer. Like this pic:
I can get the header and main div to work. Like this:
<div id="wrapper">
<div class="header_div">HEADER</div>
<div class="main_div">MAIN</div>
<div class="footer_div">FOOTER</div>
</div>
With this CSS:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.header_div{
height: 40px;
width: 100%;
background-color: #000000;
}
.main_div{
margin-bottom:40px;
margin-top:40px;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color: red;
}
.footer_div{
position: relative;
height: 40px;
width: 100%;
background-color: blue;
}
So the main div starts 40px off the top to account for the header and then stops 40px from the bottom to account for the footer. This works well but I cannot get the footer div to show below the main div. The way it is now with position: relative it's putting the footer on top of the main div. If I use position:absolute it puts it underneath the main div.
I am sure I am just doing this wrong because CSS is not my thing.
Any help on this would be great.
Thanks
Using CSS3 Flexbox:
/*QuickReset*/*{margin:0;box-sizing:border-box;}
body { /* body - or any parent wrapper */
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
Use the css calc() function.
With this method, you don't have to define the position of the elements
Here is a demo
html:
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
css:
html, body {
height: 100%
}
body {
color: #FFF;
padding: 0;
margin: 0;
}
header {
background-color: #000;
height: 100px;
}
main {
background-color: #AAA;
height: calc(100% - 150px);
}
footer {
background-color: #000;
height: 50px;
}
Here's a simple method. Try this jsfiddle: http://jsfiddle.net/PejHr/
HTML:
<div id="top"></div>
<div id="main">
<div id="inner"></div>
</div>
<div id="bottom"></div>
CSS:
#main {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
padding: 50px 0px
}
#inner {
width: 100%;
height: 100%;
background: #f0f;
}
#top, #bottom {
width: 100%;
height: 50px;
background: #333;
position: absolute;
top: 0px;
left: 0px;
}
#bottom {
bottom: 0px;
}