This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
How do I uncollapse a margin? [duplicate]
(5 answers)
Closed 1 year ago.
I encountered a strange behavior of nested div-blocks, which I wonder how it can be explained logically and how to avoid.
My minimalized HTML to demonstrate the behavior is as follows:
body{
padding: 0px;
margin: 0px;
background-color:gray;
}
#block1 {
height: 70vh;
width: 100vw;
position: fixed;
top: 0px;
padding: 0px;
margin: 0px;
background-color:cyan;
display: inline-block;
}
#block2{
height:40%;
background-color:green;
/* the following lines actually have no effect
padding: 0px;
margin: 0px;
position: relative;
top:0;
*/
}
#block3{
background-color:yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demonstrate Strange CSS Behavior</title>
</head>
<body>
<div id="block1">
<div id="block2">
<div id="block3">Hello!</div>
</div>
</div>
<!-- This html will add a space between block1 and block2
<div id="block1">
<div id="block2">
<div id="block3"><span><p>Hello!</p></span></div>
</div>
</div>
-->
<!-- This simple space will remove it again
<div id="block1">
<div id="block2">
<div id="block3"><span><p>Hello!</p></span></div>
</div>
</div>
-->
</body>
</html>
Because there is no padding and margin the div blocks neatly overlap each other.
Demonstration with JSFiddle
When however a p-tag is wrapping the "Hello!" everything becomes strange. A space of about 10px height appears between block1 and block2.
See JSFiddle here
This behavior does not show with an inline tag such as span, but it reappears with any block child node. And even more strange, when a non-breakable space is added after block2, the space between block1 and block2 is gone.
See in this JSFiddle
How can a so distant child change the spacing between grand(grand...) parents?
Update: Having studied similar QA threads and the discussion about CSS Reset, I arrived at the conclusion that CSS margin property is buggy and better avoided.To circumvent such problems use CSS reset code and positioning.
I believe you're dealing with default browser styles. There have been several discussions around the issue of the default styling of the p tag, like here for example)
How can a so distant child change the spacing between grand(grand...) parents?
I can't answer that question, but I can suggest how to circumvent the issue: CSS Reset
Related
I am currently learning polymer and encountered the following problem:
I'd like to have a split layout where the left side is a list of items and the right side can display additional information about the selected item.
I tried to achieve this with the following (simplified) code:
<body fullbleed vertical layout>
<style type="text/css">
.card_container {
margin: 16px;
position: relative;
}
.details_container {
/* position: fixed;
*/ }
.white-bg {
background-color: white;
margin: 8px;
max-width: 650px;
}
.white-bg.details {
margin: 24px 24px;
}
</style>
<div layout horizontal center-justified>
<div id="card_container" class="card_container" layout vertical>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
</div>
<div class="details_container" layout vertical flex>
<div class="white-bg details" flex relative>
<p>Some sample text...</p>
</div>
</div>
</div>
</body>
The layout looks quite nice, until I assign position: fixed to the details_container div.
I created a JSBin that demonstrates the problem: http://jsbin.com/ziqayufojeco/2/edit?html,output
Just uncomment the position: fixed; attribute.
Any ideas how to fix that?
I don't actually know what the specifications say, but I'm not surprised that you cannot use flex in combination with position: fixed.
The flex attribute (which is shorthand for CSS flex properties) tells CSS how to position and size a element relative to it's sibling elements. OTOH, position: fixed tells CSS that you want the element to be very specifically positioned.
I can understand that you would like the calculated size to be the same regardless of position: fixed, but it doesn't work that way. I'd like to suggest an alternative, but I can't figure out what outcome you were after.
I dont know why postion: fixed is not working in polymer starter app element.
But to adding fixed element functinality you can use postion: sticky with display:flex
I'm just starting to learn html and css and I've been looking at various websites to practice.
This particular website (http://jsfiddle.net/Hexapod/CWB39/260/show/) had caught my attention but I'm having trouble figuring out how the elements here are working.
If you go to the website, there are "facts boxes" that were made using div elements. These div elements however, are grouped together by a another div element. This div element has an absolute position and an offset of 0px in all directions. Can anyone explain to me what the purpose of this is?
Here's what it looks like:
#container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
<div id="container">
<div id="factbox1" class="info">
<!-- some code -->
</div>
<div id="factbox2" class="info">
<!-- some code -->
</div>
</div>
Thanks in advance!
PS. If I'm doing something wrong with the formatting or anything, please inform me! This is my first time posting here.
This is in place to stretch the element to the full extremes of the closest parent with position set. In this case, to extend the full height and width of the browser viewport.
Its basically telling the element that its top should meet the top side of its parent, its bottom should stretch to the bottom of its parent and the same for its left and right sides.
An alternative would be to use the below CSS:
html, body, #container{
height:100%:
width:100%;
}
The difference being that by using position:absolute the option for layering content is provided.
You can use the inset shorthand these days (not supported by IE of course)
#container {
position: absolute;
background: #002D62;
inset: 0px;
color: #fff;
}
<div id="container">
<div id="factbox1" class="info">
Full with and height 😄
<!-- some code -->
</div>
<div id="factbox2" class="info">
<!-- some code -->
</div>
</div>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS properties being passed up to the parent element when the DIV is empty
I'm a newbie for CSS layout design.
What I'd like to do at the moment is that I want to make two Div boxes, one nested inside one another. Anyway, my problem is the top margin I set to the inner box didn't behave the way I wanted.
Pls take the portion of script below for example:
[demo.html]
<html>
<header>
<title>Mock-up page</title>
<link href="stylesheets/demo.css" rel="stylesheet" type="text/css">
</header>
<body>
<div id="box1">
<div id="box2">div 2</div>
</div>
</body>
</html>
[demo.css]
#box1{
width: 300px;
height: 300px;
background-color:#0000FF;
}
#box2{
margin-top: 30px;
background-color:#008000;
}
The effect it produced was it only pushed the outer box 30px down from body tag (left-sided in the picture), which wasn't what I had expected (right-sided in the picture).
What was the reason why this happened and how to correct the styling?
Change the margin-top to padding-top will do what you want.
This is a know issue in many browsers.
When the first child of an element has a margin-top (no content before it) the margin overflow the top of the parent element and pushes it like in your case.
Other solutions exists, but all of them are a bit hacky:
Apply a position: relative to the child and change the margin-top to a margin-bottom and apply top: 20px;;
Create an element before the inner box with some content ( can be used here) with height: 0; and overflow: hidden;;
Set a border-top: 1px solid transparent or the same color of the background of the element (in this case, pay attention that the border is added to the height of the object;
and so on...
You could add position: relative to #box1 and position: absolute to #box2.
See this example
CSS Positions Explained
CSS
#box1{
display:block;
width: 300px;
height: 300px;
background-color:#0000FF;
border:solid transparent 1px;
}
#box2{
margin-top: 30px;
background-color:#008000;
} ​
HTML
<div id="box1">
<div id="box2">div 2</div>
</div>​
If you keep the outer box empty (no text node) then it's doing this behavior and to be honest I didn't understand why, but I found it here why it does so and it's known as collapsed margin and I've added border:solid transparent 1px; to soleve the issue but alternatively you can use padding for outer DIV. Here is also an answer on SO.
Demo.
This article by Chris Coiyer does a good job of explaining box-sizing. Understanding that will help you.
This seems incredibly simple but I have no idea why I can't put a div tag inside of a container div tag as it will not show up in Firefox or Chrome properly, but it works in IE6...??? Code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
</div>
</body>
</html>
CSS: style.css
body {
background:white;
font-family: sans-serif;
}
#container {
margin:0 auto;
width:960px;
background:#e3e3e3;
border:1px solid black;
}
#nav {
padding:10px;
margin-top:10px;
float:left;
width: 400px;
height:100px;
background:white;
border:1 px solid black;
}
It's as if the container is not expanding with the DIV tag inside of it..what gives?
This is a common issue people face with CSS. Whenever you float something, it's parent collapses as you are seeing. You can work around it in the following ways:
set an explicit height on the container
put overflow:hidden or overflow:auto on the container
use the clearfix hack: http://nicolasgallagher.com/micro-clearfix-hack/
I find #2 to be the easiest and best in most cases. Use #3 when overflow:hidden/auto has an undesirable side effect.
It is because the #nav div is floated left. Floated elements are just that--floating, and have no height unless something anchors the box below it by clearing the floats.
.clear { clear: both }
and add a div below the floating div to clear it.
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
<div class="clear"></div>
</div>
See this SO question for a very detailed answer on clearfixes: What methods of ‘clearfix’ can I use?
Do overflow: hidden for #container.
This is one known limitation of floating.
Before: http://jsfiddle.net/N669N/
After: http://jsfiddle.net/N669N/1/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to horizontally center a div?
One simple way to make an object centered in HTML is using align='center', but it's not working for a div.
I tried:
style='text-align:center';
style='left:50%';
I even true a center tag
<center>
But I can't make my target div to be center.
<!DOCTYPE html>
<html>
<head>
<title>Center</title>
</head>
<body>
<div style="text-align: center;">
<div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div>
</div>
</body>
</html>
Tested and worked in IE, Firefox, Chrome, Safari and Opera. I did not test IE6. The outer text-align is needed for IE. Other browsers (and IE9?) will work when you give the DIV margin (left and right) value of auto. Margin "0 auto" is a shorthand for margin "0 auto 0 auto" (top right bottom left).
Note: the text is also centered inside the inner DIV, if you want it to remain on the left side just specify text-align: left; for the inner DIV.
Edit: IE 6, 7, 8 and 9 running on the Standards Mode will work with margins set to auto.
I think that the the align="center" aligns the content, so if you wanted to use that method, you would need to use it in a 'wraper' div - a div that just wraps the rest.
text-align is doing a similar sort of thing.
left:50% is ignored unless you set the div's position to be something like relative or absolute.
The generally accepted methods is to use the following properties
width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;
the margins being auto means they grow/shrink to match the browser window (or parent div)
UPDATE
Thanks to Meo for poiting this out, if you wanted to you could save time and use the short hand propery for the margin.
margin:0 auto;
this defines the top and bottom as 0 (as it is zero it does not matter about lack of units) and the left and right get defined as 'auto' You can then, if you wan't override say the top margin as you would with any other CSS rules.
it depends if your div is in position: absolute / fixed or relative / static
for position: absolute & fixed
<div style="position: absolute; /*or fixed*/;
width: 50%;
height: 300px;
left: 50%;
top:100px;
margin: 0 0 0 -25%">blblablbalba</div>
The trick here is to have a negative margin half the width of the object
for position: relative & static
<div style="position: relative; /*or static*/;
width: 50%;
height: 300px;
margin: 0 auto">blblablbalba</div>
for both techniques, it is imperative to set the width.
how about something along these lines
<style type="text/css">
#container {
margin: 0 auto;
text-align: center; /* for IE */
}
#yourdiv {
width: 400px;
border: 1px solid #000;
}
</style>
....
<div id="container">
<div id="yourdiv">
weee
</div>
</div>