I have an easy and stupid problem. I'm trying to fit a div under another div with height:100% without producing overflow, just fitting in body's height.
Example not working: https://jsfiddle.net/L38cea2s/1/
HTML:
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
CSS:
html, body {
height:100%;
}
#top {
width:100%;
height:50px;
background-color:red;
}
#left {
width:70%;
height:100%;
background-color:green;
float:left;
display:block;
}
#right {
width:30%;
height:100%;
background-color:yellow;
float:right;
display:block;
position:absolute;
}
I don't know why on jsfiddle my divs are not ocuppying 100% of width's body. But as you can see on the example, there's overflow because there's another div above both divs. I don't want an overflow:hidden.
Thanks!
Edit:
I'm searching for something like this: (Any div is behind any div)
This jQuery might help
var body = $('body').height();
var top = $('#top').height();
var workoutheight = body - top;
$('#left').css('height',workoutheight);
$('#right').css('height',workoutheight);
https://jsfiddle.net/L38cea2s/7/
I did a CSS only solution
Get the updated markup from JSFiddle
CSS
body {
margin: 0;
}
.sidebar {
width: 20%;
float: left;
background: #B2B200;
height: 100vh;
}
.main-content {
width: 80%;
float: left;
height: 100%;
}
.top {
height: 20%;
width: 100%;
background: #26FF5C;
height: 20vh;
}
.left {
width: 70%;
float: left;
background: #4DFFFF;
height: 80vh;
}
.right {
width: 30%;
float: left;
background: #8500B2;
height: 80vh;
}
https://jsfiddle.net/aq8awrnz/
You can use calc in your CSS as well... Example:
#left {
height: 100vh;
width: 300px;
float:left;
}
#top {
height: 45px;
width: calc(100vw - 300px); // or calc(100% - 300px)
margin: 0 0 0 300px;
}
#right {
height: calc(100vh - 45px);
width: 30%;
float: right;
}
#middle {
height: calc(100vh - 45px);
margin: 0 30% 0 300px;
}
The best is to use layering while thinking how you'll stack everything on top of each other. I've updated your jsFiddle here.
https://jsfiddle.net/L38cea2s/8/
html, body {
height:100%;
margin: 0;
}
#top {
width:100%;
height:50px;
top: 0;
background-color:red;
position: absolute;
}
#left {
width:70%;
height:100%;
top: 0;
background-color:green;
position: absolute;
}
#right {
width:30%;
height:100%;
top: 0;
background-color:yellow;
position: absolute;
}
Related
I need all divs to be 100% document height. It works till some of them has a top margin. In this case remaining divs loses its full height.
How can I stretch all div's height to full document height, regardless of margin of any of them?
* {
.margin: 0;
}
html {
background: red;
height: 100%;
}
body {
max-width: 1366px;
background: blue;
height: 100%;
}
#divleft {
float: left;
background: lightblue;
width: 40%;
height: 100%;
}
#divmiddle {
float: left;
margin-top: 25px;
background: lightgreen;
width: 40%;
height: 100%;
}
#divright {
float: right;
background: green;
width: 20%;
height: 100%;
}
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
Here is the fiddle
You don't necessarily need height: 100% for your divs to be full height. You can achieve this layout, making the divs fully dynamic, with CSS flexbox.
All you need is display: flex on the container.
You can get rid of all float rules and don't need to use calc().
html {
background: red;
height: 100%;
}
body {
display: flex; /* NEW */
max-width: 1366px;
background: blue;
height: 100%;
}
#divleft {
background: lightblue;
width: 40%;
}
#divmiddle {
margin-top: 25px;
width: 40%;
background: lightgreen;
}
#divright {
width: 20%;
background: green;
}
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
revised fiddle
An initial setting of a flex container is align-items: stretch. This means that child elements of the container (aka "flex items"), will consume the free space in the cross-axis, which in this case is vertical / height.
You can use CSS calc() function, like:
#divmiddle{
margin-top: 25px;
height: calc(100% - 25px);
}
Have a look at the snippet below (let me know if this works for you):
html{
background:red;
height:100%;
}
body{
max-width:1366px;
background:blue;
height:100%;
margin: 0;
}
#divleft{
float:left;
background:lightblue;
width:40%;
height:100%;
}
#divmiddle{
float:left;
margin-top:25px;
background:lightgreen;
width:40%;
height:calc(100% - 25px);
}
#divright{
float:right;
background:green;
width:20%;
height:100%;
}
<body>
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
</body>
Hope this helps!
Just remove margin property from middle div..
#divmiddle{
float:left;
background:lightgreen;
width:40%;
height:100%;
}
You can simply deduct the margin percentage from the height. Instead of height: 100%, use something like width: 98%; height: 98%; margin: 1%; or width: 23%; height: 23%; margin: 1%;, etc.
I have the following code:
body {
padding: 0;
margin: 0;
}
.container {
width: 30%;
margin: 0 35%;
background: yellow;
position: relative;
height: 900px;
}
.p1_1 {
position: relative;
width: 50%;
height: 70%;
top: 10%;
left: 0;
background-color: green;
}
.p1_2 {
position: relative;
width: 100%;
height: 20%;
border: 1px solid blue;
top: 0;
}
<div class="container">
<div class="p1_1">
top box
</div>
<div class="p1_2">
hello box
</div>
</div>
My question is why is the top:10% of .p1_1 affecting the position of .p1_2? I would have thought this was a really simple relative placing of the div following the second - unless I'm missing something blindingly obvious?
Ok - so the following code is nearer what I was expecting but how there is 15% of space not 10% (i.e. set margin-top:15% works fine) so I'm confused how 70 + 10 + 20 can't equal 100??
html,body {
padding:0;
margin:0;
height:100%;
position:relative;
}
.container {
width:30%;
margin:0 35%;
background:yellow;
position:absolute;
height:100%;
top:0;
}
.p1_1 {
position:relative;
width:50%;
height:70%;
margin-top:10%;
background-color:green;
}
.p1_2 {
position:relative;
width:100%;
height:20%;
background-color:blue;
}
I've also found http://www.barelyfitz.com/screencast/html-training/css/positioning/ on tab 2 explains how
"Notice the space where div-1 normally would have been if we had not
moved it: now it is an empty space. The next element (div-after) did
not move when we moved div-1. That's because div-1 still occupies that
original space in the document, even though we have moved it."
Here is one way how to push 2 div's down by 10%, based on their parent's height, keeping them 70% and 20% of parent.
body {
padding: 0;
margin: 0;
}
.container {
width: 30%;
margin: 0 35%;
background: yellow;
position: relative;
height: 900px;
}
.p1_1 {
position: relative;
width: 50%;
height: 70%;
left: 0;
top: 10%;
background-color: green;
}
.p1_2 {
position: relative;
width: 100%;
height: 20%;
border: 1px solid blue;
top: 10%;
}
<div class="container">
<div class="p1_1">
top box
</div>
<div class="p1_2">
hello box
</div>
</div>
I am just a beginner in HTML/CSS
How to stop the floating div from overlapping.
jsfiddle-link
HTML
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
.left {
float: left;
height: 500px;
width: 300px;
background: #fff;
position: absolute;
}
.right {
float: right;
height: 500px;
width: 300px;
background: #000;
}
Use widths in percentages and remove the absolute positions:
Here is the updated CSS:
*{
margin:0;
padding:0;
}
body{
width:100%;
}
.wrapper {
width: 100%;
}
.left{
float:left;
height:500px;
width:50%;
background:#fff;
}
.right{
float:right;
height:500px;
width:50%;
background:#000;
}
I have also wrapped left and right divs in a wrapper div
Check it here: https://jsfiddle.net/2Lk13045/2/
You set your width fixed instead of 100%.
https://jsfiddle.net/2Lk13045/1/]
Changed your
body{width:100%; }
to
body{width:600px; }
I have simple layout and I'm trying to expand div's height to given % so I can put later scalled background img using backgound-size.
In example I wanna have div1 expand to 69%.
Why it doesn't work and how to fix it?
Link: https://jsfiddle.net/mc6ecstr/
CSS:
body
{
color: white;
margin: 0px;
padding: 0px;
height: 1080px;
}
#container
{
width: 100%;
height: 100%;
}
#header
{
background-color: blue;
width: 100%;
}
#div1 {
background-color: red;
float: left;
width: 15.67%;
margin-left: 1.5%;
height: 69%; /*doesnt work*/
}
#div2 {
background-color: green;
float: right;
width: 43.17%;
margin-right: 3.6%;
}
HTML:
<body>
<div id="header">Header</div>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
</body>
You need to give to the body and html and to his parent (#container) height: 100%;
CSS
body, html
{
color: white;
margin: 0px;
padding: 0px;
height: 100%; /* Add this */
}
#container
{
width: 100%;
height: 100%; /* Add this */
}
DEMO HERE
If you know the height of #header you can use calc(...) and absolute positioning to make the container fill the remaining space:
#container
{
width: 100%;
height: 100%;
position:absolute;
top:20px;
left:0px;
height:calc(100% - 20px);
}
In this example I've set the header to a fixed height of 20px, then offset container by the same amount.
Then set #div1's height accordingly to fill 69% of #container.
Fiddle: https://jsfiddle.net/GarryPas/mc6ecstr/2/
Working on a fullpage ("locked") design.
Here's what I'm working with:
http://jsfiddle.net/5yex5nfu/
<div id="wrapper">
<div id="navigation">
Nav
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
body {
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:50px;
margin-right:50px;
margin-left:50px;
background-color: lightblue;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
}
#main {
height: auto;
background: lightgreen;
}
I want the main div to fill out the rest of the "locked" div, with a %-value; whilst the footer and navigation hade assigned px-values.
Have seen a few solutions for my problem, but none of them seems to work. Have tried to set a %-value for every div, and it works, but as expected: The whole thing scales and messes up the layout.
For a pure css solution you can use calc to calculate the height of main
Example http://jsfiddle.net/5yex5nfu/2/
Just change #main height from auto to this
#main {
height: calc(100% - 140px);
}
Read more about calc and a-couple-of-use-cases-for-calc
You can use just css, with display:table propriety!
http://jsfiddle.net/Monteduro/5yex5nfu/5/
#wrapper {
position: absolute;
top: 0;
left: 0;
background-color: lightblue;
display: table;
height: 100%;
width: 100%;
box-sizing: border-box;
padding:50px;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
display:table-row;
}
#main {
height: auto;
background: lightgreen;
display:table-row;
}