Menu
Community /Pin to ProfileBookmark
@cootheadDec 13.2015 — #Hi there wwbee,
[indent]
and a warm welcome to these forums. ?
Unless contained by padding or border of the parent element
it's child element's top and bottom margins will overflow.
This example may help...
[/indent]
[i]coothead[/i]@cootheadDec 16.2015 — #Hi there wwbee,
[indent]
Then you have not fully understood my example. :eek:
The margin that has to be contained is the default margin of the[color=navy][i]"h1 element"[/i][/color] here...
...where[color=navy][i]"<div id="pageheader">"[/i][/color] is the [b]parent[/b] and [color=navy][i]"<h1>Pageheader</h1>"[/i][/color] is the [b]child[/b].
If you don't want to use a border to contain the margin, then[color=navy][i]"padding-top:1px"[/i][/color] will do the job. ?
Here is the the alternative code...
[/indent]
[i]coothead[/i]@cootheadDec 27.2015 — #Hi there wwbee,
[indent]
Before you moved on to pastures new you should have read this article...
[indent][url=https://css-tricks.com/what-you-should-know-about-collapsing-margins/]collapsing margins ?[/url] [/indent]
[/indent]
[i]coothead[/i]
How can a border ensure the normal flow do not break?
I have created a page that has a fixed header when scrolled. It works fine, but It is very strange why! It seems rather complicated to me, but I hope that one of you guys can rumble what is going on.
[B]Permanent screen header – how it works
My study can be seen on [url]http://ovovow.dk/fixedtop
The page has two headers, one for the page when it is not scrolled, and one for the scrolled page, I gave them ids as respectively pageheader and screenheader.
The default box model is changed to border-box in the CSS, and the headers and the main content is laid out using the position and z-index elements.
The page has 3 layers. The headers are in the two upper layers. The third layer in the bottom contains the main content and the footer.
[FONT=Courier New] 1_____
2__ Topline (z-index: 1) – not scrollable
3 __
The first layer is the upper layer in the z-index stack and the topmost content on the page. This layer contains the title and the topline. The middle layer contains the screenheader. This is always placed topmost on the screen (position: fixed), and on the z-index layer underneath the pageheader. The lower layer contains the main content followed by the footer.
To start with you can not see the fixed screenheader, it is hidden by the upper pageheader layer. Scrolling do not affect the screenheader, so it becomes visible when you scroll the pageheader out of the screen.
The page content will also be scrolled out of the screen, but under the screenheader in the z-index stack. This way you will always have a header on the page or screen.
[B]How come?
The strange and tricky part of the code lies in the border property on the pageheader. If you take that away the whole idea is broken.
The first line in the screenheader will be visible in the area where the h1 margin in the pageheader should cover it, and, in the bottom of the pageheader the p tag lose its margin-bottom. What is really tricky, the screenheader’s first line seems to be followed by its parent, the wrapper – something weird will come across the normal flow!!
And that is what my question is about, how come?
Sign in
to post a comment11 Comments(s) ↴
0
@cootheadDec 13.2015 — #Hi there wwbee,[indent]
and a warm welcome to these forums. ?
Unless contained by padding or border of the parent element
it's child element's top and bottom margins will overflow.
This example may help...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<style media="screen">
body {
background-color:#f0f0fe;
text-indent:10px;
}
h6 {
width:25%;
padding:5px 0;
border-radius:10px;
background-color:#333;
color:#fff;
}
.grandparent {
background-color:#999;
}
.parent {
width:75%;
background-color:#ccc;
}
.child {
width:75%;
padding:5px 0;
margin-top:20px; /*this will overflow unless contained */
margin-bottom:20px;
background-color:#fff;
}
.padding {
padding-top:1px;
padding-bottom:1px;
}
.border {
border:2px solid #000;
}
</style>
</head>
<body>
<h6>example 1</h6>
<div class="grandparent margin">
<div class="parent">
<div class="child">the child's margin is uncontainted</div>
</div>
</div>
<h6>example 2</h6>
<div class="grandparent padding">
<div class="parent">
<div class="child">the child's margin is containted by the grandparent's padding</div>
</div>
</div>
<h6>example 3</h6>
<div class="grandparent">
<div class="parent padding">
<div class="child">the child's margin is containted by the parent's padding</div>
</div>
</div>
<h6>example 4</h6>
<div class="grandparent border">
<div class="parent">
<div class="child">the child's margin is containted by the grandparent's border</div>
</div>
</div>
<h6>example 5</h6>
<div class="grandparent">
<div class="parent border">
<div class="child">the child's margin is containted by the parent's border</div>
</div>
</div>
</body>
</html>[/color][/indent]
[i]coothead[/i]
0
@cootheadDec 16.2015 — #Hi there wwbee,[indent]
[color=navy]As far as I can see this doesn't seem to address the issue in my case.[/color] [/quote]
Then you have not fully understood my example. :eek:
The margin that has to be contained is the default margin of the
[color=navy]
<div id="pageheader">
<h1>Pageheader</h1>[/color]...where
If you don't want to use a border to contain the margin, then
Here is the the alternative code...
[color=navy]
#pageheader {
padding-top:1px; /* this will contain the margin of the h1 element */
[color=red]/* border: 3px double SeaGreen; ··· NB: Absolutely necessary! ··· */[/color]
position: relative;
z-index: 2;
}
#screenheader {
[color=red]/*border: 3px double darkSeaGreen;*/[/color]
position: fixed;
z-index: 1;
}[/color][/indent]
[i]coothead[/i]
0
@cootheadDec 27.2015 — #Hi there wwbee,[indent]
[color=navy] [/quote]
As I couldn't find any explanation of why my page wrapper had to have a border or padding,
I made a new study on positioned elements.[/color]
Before you moved on to pastures new you should have read this article...
[indent]
[/indent]
[i]coothead[/i]