Here is my jsFiddle
I just have 3 divs. The 2nd div is floated to the right, and 3rd div appears just below the 2nd.
In the 3rd div, I am setting margin-top property, and this property does not have any effect on the layout.
Question: Can someone explain me understanding this behavior of float?
HTML
<div class="header">
</div>
<div class="sidebar">
</div>
<div class="footer">
</div>
CSS
.header {
width: 100%;
height: 80px;
background-color: #abcdef;
}
.sidebar {
margin-top: 15px;
float: right;
width: 200px;
height: 200px;
background-color: #abcdef;
display: block;
}
.footer {
clear: both;
margin-top: 20px;
width: 100%;
height: 60px;
background-color: #000000;
}
This is not unexpected at all. The .sidebar is removed from regular flow layout by its float property, as such it doesn't take up any space anymore. The .footer has a clear rule, so it is forced underneath any floats, but that automatically puts it 215px (margin+height of the sidebar) behind the last element that is part of the flow layout. As such its margin requirement of 20px is completely satisfied, and it appears at its logical current position. You can verify this by setting the top margin to 220px instead, it will appear 5px (220-215) below the sidebar.
You can easily achieve the effect you desire by putting margin-bottom:20px on the sidebar since it will then be required to keep that distance to the footer, pushing it down.
The issue is related to the clear rule.
W3C - An element that has had clearance applied to it never
collapses its top margin with its parent block's bottom margin.
Baiscally, if you want to use clear, the general rule is to add an element between the two floated divs to ensure you can correctly space them.
The top margin of the footer div is being collapsed, http://www.w3.org/TR/CSS21/box.html#collapsing-margins
If you add margin-bottom to the sidebar instead of the top of the footer it will work.
This is caused by the fact that floated elements aren't really there with respect to margin calculations. Your .footer is below whatever unfloated elements are above it, (with a margin of 20px). This issue is caused because margins with respect to floats are calculated relative to other floats, (not all other elements).
So to get the desired effect add a margin-bottom element to .sidebar, have a meaningless float added to the .footer, or add a
<div style="clear:both"></div>
between the .footer and .sidebar
Related
I am trying to create a simple web page with a navigation bar and a title centered in the page. However, the margin of the title div somehow affected the positioning of the navigation bar.
I think this is caused by the margin collapsing of two adjacent block-level boxes? I have tried to fix this problem by adding a <br> after the navigation bar, it worked, but I think it is not elegant.
Is there a better method to achieve what I want?
Below is my simplified HTML code:
<header id='navbar-bg'>
<div id='navbar'>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
</header>
<div id='body'>
<h1 id='search-title'>This is a title</h1>
</div>
And the CSS style:
#navbar-bg {
position: fixed;
width: 100%;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
}
Since the position of #navbar-bg is fixed, I want the navigation bar as a whole to be fixed, and the margin-top of #body should not affect the navigation bar. Yet the margin-top moved both the #body and the navigation bar down, which is strange.
I want to fix this problem using an elegant solution, not adding a <br> after header.
You have to set a top: 0px to the #navbar-bg element. According to Mozilla:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
So, when you don't use top for the #navbar-bg element, it will fall back to it's initial values, which is relative to body. So the body margin is also present in that element.
For a navbar it's probably best to be on the left of the body, so you could do this in your CSS:
#navbar-bg {
position: fixed;
width: 20%;
float: left;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
float: right;
width: 80%;
}
So, here is the html code:
<div class="bottom_block">
<a class="logo" href="#">
<img src="img/logo_uniqa.jpg" height="90px" width="100px" alt="logo">
</a>
</div>
And here is css:
.bottom_block {
background-color: blue;
height: 50px;
width: 100%;
}
.logo {
display:block;
padding-bottom: 10px;
}
.logo img {
display: block;
margin:0 auto;
}
So, I used margin-top:-10px but it moves whole container, not only image.
It is due to the margin-collapsing rule. To fix it, you can simply use a transparent border on the element:
.logo img {
border: 1px solid transparent;
margin-top: -10px;
display: block;
}
What is margin collapsing?
I already linked to the documentation page of MDN for what margin collapsing is. Here's the quick look:
Now, why adding border aborts the margin-collapsing rule?
This is not the only way prevent margin-collapsing; there are other ways too such as adding padding to the element.
Why does this prevent collapsing of margin? Because it (the element) is separated from the box layout. I mean to say that the padding or border doesn't separate the element physically from one another, but margin separates each physically.
Okay, lets discuss how border, padding, or overflow techniques prevent a collapsing margin. To clear up things to you, I have made this picture of magnets. You may know the rule of opposite pole magnets if one is shifted the other would also shift instead of stitching with one-another.
Look at the pictures to know how margin collapse is prevented:
The rule of margin collapsing may not be exactly as the opposite pole of magnet rules. But to clear things up this is just enough I hope.
I have a div container which has a h1 element within it:
<div id="header">
<h1>Enlighten Designs</h1>
</div>
I have applied a margin-top,a margin-left and a margin-right to the header element.
However the margin-top is not being applied to the header element box wrt to the containing div.
Instead the top margin is being applied to the containing div.
The left and right margins of the header are being applied to the header element box wrt the containing div.
The style rules for the div and header are as follows:
#header {
background: blue;
height: 150px;
}
h1{
background: orange;
margin-top:30px;
margin-left: 10px;
margin-right: 10px;
}
What is the reason for this behavior?
Your 'problem' is that margins in CSS will collapse onto eachother.
Read this awesome article explaining the concept, management summary:
In simple terms, this definition indicates that when the vertical
margins of two elements are touching, only the margin of the element
with the largest margin value will be honored, while the margin of the
element with the smaller margin value will be collapsed to zero.
In your case, specifically read the section "Collapsing Margins Between Parent and Child Elements" a few pages down. In your case, the following CSS 2.1 rule applies:
The top margin of an in-flow block element collapses with its first
in-flow block-level child's top margin if the element has no top
border, no top padding, and the child has no clearance.
Well, the solution is to add overflow: hidden; property to your header element.
Here JsFiddle.
#header {
background: blue;
height: 150px;
position:absolute;
}
h1{
background: orange;
margin-top:30px;
margin-left: 10px;
margin-right: 10px;
position:relative;
}
I want to display 2 divs in a single line. I have a parent div and two child divs.I want to keep the width of first child div and parent div equal. So the header(label of first child div) displays always middle position of parent div and I want to display the second child div at the right side in the same line of parent div.(Condition is always label of first child div should display middle of parent div). Here is the jsfiddle.
If I were styling this header section for a website, and I wanted some flexibility in styling the various elements, here is out I would start.
For my HTML:
<div class="head">
<div class="innerfirst">
<h1>ABCDEF GHIJ</h1>
</div>
<div class="innersecond">
<label>RIGHT1</label>
<label>RIGHT2</label>
</div>
</div>
I would put the page title in a <h1> tag so that I can adjust font-size, padding, background color and so on. In fact, you could add a tag line below the title line and various background images. Having .innerfirst and h1 gives you quite a bit of flexibility.
The <label> tags don't make sense semantically in this context, but perhaps you will have have input fields later like a search box.
For the CSS:
.head {
background-color:#2191C0;
width: 100%;
height: 85px;
position: relative;
}
The above is fine, set position: relative so that you can use absolute positioning for one of the child elements. The fixed height is a good idea, makes it easier to adjust elements vertically.
.innerfirst {
}
.innerfirst h1 {
text-align: center;
color: #FCFCFC;
padding-top: 10px; /* You could also use a margin... */
}
By default, .innerfirst will have 100% width since it is an in-flow block element, same with the h1 element. You can center the text within h1, and adjust color, padding and margin as needed.
.innersecond {
border: 2px solid lightgray;
color: white;
position: absolute;
width: 25%; /* Set this or by default it will shrink-to-fit content */
height: 61px; /* Set this or by default it will shrink-to-fit content */
top: 5px;
right: 5px;
padding: 5px;
}
What you could do is create a box of text and absolutely position it to the right. It is a good idea
to set a height and width otherwise, as a result of the absolute positioning, the div will shrink to fit the content, which is sometimes useful. The top and right offsets will position the .innersecond to the top-right of the parent container because you set position: relative in .head.
.innersecond label {
display: block; /* optional if you want block behavior */
border: 1px dotted white;
}
Finally, if you want the label tags to behave like blocks, use display: block and style according to you design requirements.
For reference, demo fiddle: http://jsfiddle.net/audetwebdesign/qpb9P/
Here's an updated jsfiddle. Read up on the display property!
in the header section of my web page, the design is something like the logo and navigation div should overlap a repeat-x image(i.e bg-header).
this is the html i have used
<div id="header">
<div id="header-bar">
<p>kljslakdjlaskjdkljasdlkjasdlkjaskldjasjd</p>
</div>
</div>
and this is the css
#header {
min-width: 1040px;
height: 111px;
position: relative;
}
#header-bar {
margin-top:50px;
height:53px;
}
now when in the #header-bar if i give margin-top:50px then the header div shifts the position to 50px from top. i want to achieve something like
the header div is to define the height of the header content.
i want to wrap header-bar in the header div and the elements or the div wrapped inside the header div should should have the margin of 50px from within the header.
for example the header-bar should have a margin of 50px from the top of the header div.
when i use the above code it moves the position of header div too. i want the header div to be fixed on top only the sub div or content within the header div is what i want to position.
hope i am not confusing you.
where i am going wrong?
thank you
EDIT: it works if i use padding-top but excluding the background with repeat-x property.
i want to move the image with repeat-x property. in the header-bg div
Margin doesn't affect the position of elements relative to their parents.
To achieve the effect you want, you need to use padding on the #header, for example:
#header {
min-width: 1040px;
height: 61px;
position: relative;
padding-top: 50px;
}
#header-bar {
height:53px;
}
If you add "overflow:hidden" to the #header div, it'll work like a charm! Note that there is padding, but also margin. If you remove the padding, there will still be space left, that's the margin!
Jsfiddle example here
Use padding on the header div rather than margin.
#header {
min-width: 1040px;
height: 111px;
padding:50px 0px 0px 0px;
}
#header-bar {
height:53px;
}
You're running into something called margin-collapse. In essence, adjacent margins will collapse together, and only display the larger one - that is, the one with more absolute distance from 0. Since your #header margin (0px) is adjacent to your #header-bar margin (50px), the 50px margin is the one that is displayed, and it affects both of your elements.
If you were to add even 1px of padding to the top of #header, you would get the desired effect:
#header {
min-width: 1040px;
height: 111px;
position: relative;
padding-top: 1px;
}
I'm not sure I understood the question.
Does it seem like your answer : link ?