This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Closed 5 years ago.
I'm trying to create a div (Menu) with a width of 20% of my screen and a height of 100% but the div does not display on the screen. I do not know why. Here is my code:
#Menu {
display: inline-block;
background-color: black;
min-width: 20%;
min-height: 100%
}
#Bar {
float: right;
background-color: blue;
width: 80%;
height: 100%;
margin: 0;
float: left;
}
<div id="Menu">Menu</div>
<div id="Bar">Bar</div>
Since your div elements are empty, they will collapse to 0 height. A height of 100% does not help in this case.
You will find that you can display your elements if you include a min-height property.
I have made some modifications to get it to work, together with some fine-tuning. I always indent my real code, but I have left the modifications un-indented so that you can see them more easily.
#Menu {
display:inline-block;
background-color : black;
min-width:20%;
min-height:100%;
margin: 0;
min-height:10px;
float: right;
}
#Bar {
float:right;
background-color : blue;
width:80%;
height:100%;
margin:0;
float:left;
min-height: 10px;
}
<div id="Menu">
</div>
<div id="Bar">
</div>
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
How do I remove the top margin in a web page?
(18 answers)
How do I remove the space between div and top of page?
(5 answers)
Closed 4 years ago.
My black box in this example should be all the way to the left and all the way up. I don't want to see any white space left or above of it.
#box {
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
<div id="box"></div>
But that isnt the case! Can anyone tell me how I can achive this?
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
You need to give margin:0 to body like this
body,html {
margin: 0;
padding:0;
}
<body>
<div id="box"></div>
</body>
<style>
#box {
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
</style>
P.S Also set padding to 0 for both html and body
You need to add 0 margin to body and html as well
body, html{
margin:0;
}
#box{
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
<body>
<div id="box"></div>
</body>
You also need to remove the default margin on the body element.
#box {
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
body {
margin:0;
}
<div id="box"></div>
This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 6 years ago.
I'm creating a div with 100% width of parent and now i want it to be 10% height of parent (no mater how long the content is).
I set height: 10% but it still didn't solve my problem.
Here is my css:
body {
margin: 0px;
padding: 0px;
height: 100%;
}
.header {
display: inline-block;
background-color: #008CDA;
width: 100%;
height: 10%;
margin: 0px auto;
padding: 0px;
}
All his parent must have height: 100%.
usually it looks like this:
html,
body {
height: 100%;
background-color:grey;
}
.wrap {
height: 100%;
background-color:yellow;
}
.your_div {
height: 10%;
background-color:red;
}
<div class="wrap">
<div class="your_div"></div>
</div>
Here's a quick JSfiddle showing a parent-child layed out as you describe:
https://jsfiddle.net/k0jur7yf/
{.child {
height:10%;
width:100%;
background-color: red;
}
Could you show us a snippet of your code if this doesn't solve your problem?
Check it, first make a div and its class parent.
enter image description here
Added the following class in your Css file or in head.
.parent {height:10%; width:100%;}
In div If you use width and height style in % then it will adjust according to content but when you use style in px then it will take according to size of the width and height.
example:
<div style="width:100%;height:10%;border: 3px solid red">FOr example</div>
<div style="width:100px;height:10px:border:3px solid red">
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 6 years ago.
I have a float: left siderbar <div> that has min-height set to 500px.
The content area <div> to the left of it also has min-height of 500px.
What I can't seem to figure out is this: if the height of the content <div> goes over 500px due to longer page content, how do I get the sidebar <div> to grow downward pixel-for-pixel, matching the height of the content <div>, so that it is still touching the footer <div> that is below both of those (it uses clear: both)?
I could use a table to do this, but I'd really rather find the CSS to do it more... "properly."
The current CSS for the content, sidebar, and footer <div>'s:
#ContentHolder
{
float:left;
padding-left: 10px;
width: 590px;
min-height: 500px;
}
#SideBar
{
float: left;
width: 200px;
min-height: 500px;
background-color: #4a4a4a;
border-top: 2px solid #404040;
border-top-left-radius: 7px;
background-image: url('Images/SideBar.gif');
background-repeat: repeat-x;
background-position: bottom;
}
#Footer
{
clear: both;
background: #404040;
font-size: 10px;
height: 30px;
text-align: center;
line-height: 30px;
color: #707070;
text-shadow: 0 1px 0 #202020;
}
I think you are searching for FlexBox
Here we go: CSS - Equal Height Columns?
I hope I helped ya,
good luck.
You just need some simple CSS, have two columns, set their width,float one side or the other, and then having a div tag to clear these columns will make sure anything that appears after that, gets rendered below.
.clr {
clear: both;
}
.column1 {
width: 500px;
}
.column2 {
float: right;
width: 300px;
}
<div class="column1">
no matter how big this, does nto matter
</div>
<div class="column2">
this does not matter
</div>
<div class="clr"></div>
<div class="footer">
This is my footer
</div>
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 7 years ago.
I have two div elements and nav > nav_1. When i add a margin-top:20px; to nav, nav goes down 20pxaccording to body which is correct.
But when i add this margin-top:20px;to nav_1,nav_1 goes down 20px with nav according to body.
why ? nav_1 element of nav and it should move according to nav.
In that question im looking for an explanation
.nav {
height: 500px;
width: 500px;
background-color: black;
margin-top:50px;
}
.nav .nav_1 {
height: 50px;
width: 50px;
background-color: blue;
margin-top:50px;
}
<div class="nav">
<div class="nav_1">
</div>
</div>
This is one case of "margin collapse" mechanism. In brief margin of parent and child elements are collapsed into single margin of size equals max of their corresponding margins. There are several ways to disable such a behaviour, e.g. adding border or padding to parent element. You can read more about that mechanism at mdn article.
You can use padding on nav and remove margin on .nav .nav_1
or
you can add display:inline-block in .nav .nav_1
.nav {
height: 500px;
width: 500px;
background-color: black;
}
.nav .nav_1 {
height: 50px;
width: 50px;
background-color: blue;
margin-top:20px;
display:inline-block;
}
<div class="nav">
<div class="nav_1">
</div>
</div>
Further to #Paul Kozlovitch answer, to fix this you can set the the parent display:inline-block (or float etc).
.nav {
height: 500px;
width: 500px;
background-color: black;
margin-top:50px;
display:inline-block;
}
.nav .nav_1 {
height: 50px;
width: 50px;
background-color: blue;
margin-top:50px;
}
<div class="nav">
<div class="nav_1">
</div>
</div>
I have 2 divs, and I need both of them to have a minimum size of about 300px.
I need the left div to stretch out to the available space, however if the window size is too small, then the right div needs to drop below. This is what I have currently, but Im not sure what to change.
<style>
.bbleft {
min-height: 237px;
overflow:hidden;
}
.bbright {
float: right;
width: 300px;
min-height: 237px;
margin-left: 10px;
}
</style>
This is what you need
http://jsfiddle.net/fxWg7/790/
HTML
<div class="container">
<div class="left">
content fixed width
</div>
<div class="right">
content flexible width
</div>
</div>
CSS
.container {
height: auto;
overflow: hidden;
}
.left {
width: 300px;
float: left;
background: #aafed6;
}
.right {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
min-width:300px;
width: auto;
max-width:500px; /* not neccessary */
overflow: hidden;
}
fiddle
A css3 approach..
Flexible left div.
Right div drops when page too small.
Left div fills up the rest of the space.
HTML
<div class="left"></div>
<div class="right"></div>
CSS
body{
width:100%;
}
body div{
min-width:300px;
float:left;
}
.left{
width: calc( 100% - 310px );
}
simple use this
.bbleft {
min-height: 237px;
overflow:hidden;
float:left;width:100%;
}