This question already has answers here:
Margin on child element moves parent element
(18 answers)
Closed 6 years ago.
If static positioned elements are not affected by the top, bottom, left, and right properties, why does the box move along with the container when I change the margin-top value of the box element?
I have kept my code at: https://jsfiddle.net/b9rtwkq7/5/
HTML:
<div class="container">
<div class="box">
</div>
</div>
CSS:
.container
{
width:500px;
height: 500px;
background-color: grey;
margin-top: 00px;
}
.box
{
width:100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
The margins are collapsed in the jsfiddle you posted: https://www.w3.org/TR/CSS2/box.html#collapsing-margins
Add overflow: auto/hidden to .container or use the following css which I've added in a class called .no-collapse myself:
.no-collapse:before {
content: "";
display: table;
}
Related
This question already has answers here:
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
What is a clearfix?
(10 answers)
Closed 2 years ago.
I have always had this problem and I avoid floating div's because of this problem. The code seems to work but when you inspect the code in Google's developer tools it shows that the Main div is 0px tall. the problem I have with this is what if I want the Main div to have an image or a color. The solution I found to getting this to work is applying a float to every div so Main would also get a float but floating the Main div will break the centering of the main container. Does anyone know of a way to fix the two divs going outside of the main div?
.float-left {
float: left;
}
.float-right {
float: right;
}
main {
width: 100%;
height: auto;
background-color: darkgray;
}
.div1 {
height: 200px;
width: 50%;
background-color: darkgreen;
}
.div2 {
height: 200px;
width: 50%;
background-color: darkblue;
}
<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet" type="text/css">
<main>
<div class="div1 float-left"></div>
<div class="div2 float-right"></div>
</main>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
I have this code:
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
position: relative;
/* top: 50px; */
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
}
.child {
background-color: #ffae0c;
}
<div class="parent">
<div class="sibling bordered">Sibling</div>
<div class="sibling bordered"></div>
<div class="sibling bordered">Sibling</div>
</div>
The div elements with text in them keep going to the bottom of the parent div. What is the reason for this?
Because for inline elements the default vertical alignment is baseline. Set it to something like top or middle instead:
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
position: relative;
/* top: 50px; */
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
vertical-align:top;
}
.child {
background-color: #ffae0c;
}
<div class="parent">
<div class="sibling bordered">Sibling</div>
<div class="sibling bordered"></div>
<div class="sibling bordered">Sibling</div>
</div>
While I can't fully explain why the div elements with text drop to the bottom, I found that you can solve this by adding the property:
vertical-align: top;
to the .sibling class.
In order to understand why the divs go below, let's talk about the display property you have mentioned for the sibling.
.sibling {
display: inline-block;
}
From the name, we can understand that display:inline-block declaration shows properties of both block and inline level elements. In order words its an inline element who's width and height can be set or it's a block element which doesn't start off from a new line.
In your code, you have mentioned inline-block so they don't occupy a single block rather all div's are displayed on the same line somewhat similar to what happens when you apply float. Here, the div won't occupy the whole line so when we resize the browser, it tries to fits in all the div's which could be fit into that single line.
Hope this makes sense to you.
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 7 years ago.
Below is the given html code,
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
First case - Below is the css code applied, without setting margin,
.row {
background: red;
}
.column {
#margin: 10px;
background: green;
}
.blue {
background: blue;
}
and the output is:
Second case - Below is the css code, after setting margin,
.row {
background: red;
}
.column {
margin: 10px;
background: green;
}
.blue {
background: blue;
}
with the output,
Third case - Below is the css code, with overflow set as hidden
.row {
background: red;
overflow: hidden;
}
.column {
margin: 10px;
background: green;
}
.blue {
background: blue;
}
with the output,
1)
In above second case, Why does the container having 2 div elements does not expand on top margin?
2)
In above third case, Why does the container having 2 div elements expand on top margin?
By placing an overflow:hidden on the containing element you are changing it's Block Formatting Context. Only a few styles do this.
I usually use this method to self clear modules.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 7 years ago.
I am creating a website and I have a div which sets the main (called page) and max width of the main content. How would I in CSS set another div to be 50% of the page so it will always be centred. Thanks.
Main content Div:
#page{ /* Sets page width and colour*/
margin-left: 200px;
min-width: 400px;
max-width: 982px;
background-color: #FFFFFF;
padding-bottom: 5px;
}
EDIT:
<div class="Serverimg">
<div class="CenterDiv">
<img src="C:\Users\Corey\Documents\Web Project\images\serverroom.jpg" class="ServerRoom" alt="" style="width:400px;height:300px": />
</div>
</div>
WITH CSS:
#CenterDiv {
width: 50%;
margin: 0 auto;
}
To do this you put another div inside of it and add the following CSS:
#centerDiv {
width: 50%;
margin: 0 auto;
}
What you are doing is telling the centerDiv to always be 50% of the width of page and then assigning it equal margins on either side so it floats in the center.
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
The div#inner1 and div#inner2 are inside the div#outer, but still the height of div#outer shows as 0px with height:auto.
How do I get the height of the child elements for the outer div?
This is my code:
#outer {
width: 300px;
height: auto;
background: #ccc;
}
#inner1 {
float: left;
width: 100px;
height: 100px;
background: #f00;
}
#inner2 {
float: left;
width: 100px;
height: 100px;
background: #0f0;
}
<div id="outer">
<div id="inner1"></div>
<div id="inner2"></div>
</div>
Add overflow:auto to the div with id outer. This will solve your problem.
Demo
Float the outer div. that will cover your all height, whatever the inner divs holding heights. But if you will provide your inner div float property. then i will suggest you to use the hack clearfix..
/* Assuming this HTML structure:
<div class="clear">
<div class="floated"></div>
<div class="floated"></div>
<div class="floated"></div>
</div>
*/
.clear:before, .clear:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clear:after {
clear: both;
}
try this it will sure work