This question already has answers here:
How to disable margin-collapsing?
(12 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 2 years ago.
I have the following HTML/CSS code:
<style>
.container {
min-height: 100px;
width: 100%;
background: Green;
}
.timeline-container {
height: 100px;
width: 55%;
background: rgb(0 150 255);
}
</style>
<div class="container"></div>
<div class="timeline-container">
</div>
...which produces the following image:
Image of green box and blue box touching.
As you can see, the boxes are touching, with no vertical space between them.
I want to add some text to the second box, and I do so with an h4element. See code below:
<style>
.container {
min-height: 100px;
width: 100%;
background: Green;
}
.timeline-container {
height: 100px;
width: 55%;
background: rgb(0 150 255);
}
</style>
<div class="container"></div>
<div class="timeline-container">
<h4>Test words </h4>
</div>
Which produces this image: green and blue boxes are no longer touching
Vertical space has appeared between the two boxes, and it seems to occur when I add the h4 element. I do not want this vertical gap between the boxes.
I want to understand:
Why this vertical space suddenly appears (I assume I'm lacking a piece of fundamental knowledge).
How to create 2 such boxes, with an h4 element in the second, and have no such space.
Thanks in advance for any help folks can provide.
Remove margin for h4 like
.timeline-container h4{
margin:0;
}
.container {
min-height: 100px;
width: 100%;
background: Green;
}
.timeline-container {
height: 100px;
width: 55%;
background: rgb(0 150 255);
}
.timeline-container h4{
margin:0;
}
<div class="container"></div>
<div class="timeline-container">
<h4>Test words </h4>
</div>
Related
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 2 years ago.
I wanted to make an inline div using inline-block, but it doesn't work and either turns it turns one of the two divs below and the other above
#div-on-the-left {
background-color: #464886;
width: 200px;
height: 600px;
padding: 10px;
border: 10px double #2c2d54;
margin: 5px;
}
#big-div-on-the-right {
background-color: #AAABB8;
width: 600px;
height: 600px;
display: inline-block;
margin: 5px;
}
<div id="div-on-the-left">
<!--Some html-->
</div>
<div id="big-div-on-the-right">
<!--Some html-->
</div>
I also tried giving #div-on-the-left inline-block too, that brought #big-div-on-the-right above, but left a gap where #div-on-the-left was supposed to be and brought #div-on-the-left to the bottom, why is this happening?
YOu would be way better off using a grid or flexboxes. In this case flexboxes would be "easier" and "shorter". You main issue is, that both div-boxes have a different height. The left div-box have a height of 600px + (2x20px) = 640px because of the double border. the right div-box have a height of only 600px causing different line height and therefor will cause a line-break. Next, the minimum-width has to be set large enough to allow both boxes to be displayed next to each other.
In the snippet below, I wrapped both boxes inside a wrapper with a minimum width high enough to let them be displayed next to each other. Then I changed them to display: flex;.
The height for the right box was set to 640px becaue of the border mentioned above.
.wrapper {
min-width: 850px;
display: flex;
}
#div-on-the-left {
background-color: #464886;
width: 200px;
height: 600px;
padding: 10px;
border: 10px double #2c2d54;
margin: 5px;
}
#big-div-on-the-right {
background-color: #AAABB8;
width: 600px;
height: 640px;
margin: 5px;
}
<div class="wrapper">
<div id="div-on-the-left">
<!--Some html-->
</div>
<div id="big-div-on-the-right">
<!--Some html-->
</div>
</div>
This question already has answers here:
Forcing child to obey parent's curved borders in CSS
(5 answers)
Border-radius on two overlapping elements; background shines through
(5 answers)
Closed 4 years ago.
#outer {
width: 200px;
height: 200px;
background-color: white;
border-radius: 20px;
}
#inner {
width: 200px;
height: 50px;
background-color: steelblue;
border-radius: 20px 20px 0 0;
}
body {
background-color: steelblue;
}
<div id="outer">
<div id="inner"></div>
</div>
You can see that the white background of the parent is leaking behind the child, even though they have the same border-radius. How can I prevent this?
Edit: Neither of the duplicate questions appropriately answer my question. The leak still happens in the first question. The second question's marked answer uses an image and Javascript, which should not be necessary to fix this.
You can change the CSS to obtain a similar layout without this issue:
#outer {
width: 200px;
height: 200px;
background:
linear-gradient(to bottom,steelblue 50px,white 0);
border-radius: 20px;
}
body {
background-color: steelblue;
}
<div id="outer">
</div>
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:
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:
3 columns, center column fixed, sides fill parents
(3 answers)
Closed 8 years ago.
So what I want to achieve here is to have the red box a fixed width say 400px that is horizontally centered on the page. Either side of the red box is a green box and a lilac box of variable width that fill out the rest of the window horizontally and stretch to fit the window size.
So on a larger monitor the green and lilac boxes would be stretched horizontally and the red box in the middle of the page would remain the same width.
The solution would need to work in IE 8 and above ideally although I'm interested in solution that only work in IE9 + too.
You can use calc to solve this:
HTML:
<div class="green"></div>
<div class="red"></div>
<div class="lilac"></div>
CSS:
html, body {
width: 100%
}
.green {
width: calc((100% - 400px)/2); //takes the total space, minus the red box space, divided by two.
height: 200px;
background: green;
float: left;
}
.red {
width: 400px;
height: 200px;
background: red;
float: left;
}
.lilac {
width: calc((100% - 400px)/2);
height: 200px;
background: lavender;
float: left;
}
Proof of concept: http://jsfiddle.net/yERs7/
You can use display: table and have full compatibility even with IE8, as you asked
Example on codepen: http://codepen.io/anon/pen/emCFy/
Markup:
<div>
<section style="background: #91ee93">
Green</section>
<section style="background: #ee8c8f" role="main">
Red</section>
<section style="background: #e48fec">
Pink</section>
</div>
Css
div {
display: table;
table-layout: fixed;
width: 100%;
}
section {
display: table-cell;
}
section[role] {
width: 400px;
}
I created this quick JSFiddle hack for you.
Basically we let those three divs float next to each other, give the middle one a fixed width and use this markup on the other two:
width:50%;
padding-left: 150px;
margin-left: -150px;
box-sizing: border-box;
and
width:50%;
padding-right: 150px;
margin-right: -150px;
box-sizing: border-box;
Where 150 equals half of the middle div's width.