I often have this problem with a lot of fixed navbars i.e. when I have a fixed navbar, how do I give the element below it some margin, so that the fixed navbar is not covering that element?
I was just wondering if there is a more elegant way of doing this apart from the <br> tag and margin-top.
The sample code would be like:
HTML code :
<nav>
I AM NAVBAR
</nav>
<br><br>
<div>
</div>
CSS code :
* {
padding: 0;
margin: 0;
}
nav {
height: 50px;
width: 100%;
background: #444;
color: #fff;
text-align: center;
font-weight: bold;
font-family: verdana;
position: fixed;
top: 0;
left: 0;
}
div {
height: 500px;
width: 100%;
background: tomato;
}
Fiddle here.
Fixed position relatives to the screen's viewport. You can just set top margin or padding on the body tag, and make the value >= the navbar height.
body {
margin-top: 50px; /*or padding*/
}
http://jsfiddle.net/5k5mxcn1/1/
There's a theory in CSS that you only apply bottom margins.
http://csswizardry.com/2012/06/single-direction-margin-declarations/
So to keep things modular, you could create a wrapping class:
<nav class="nav__wrapper">
<div class="nav__content">
Navigation
</div>
</nav>
<p>Text content</p>
css:
.nav__wrapper {
height: 30px;
margin-bottom: 10px // breathing room
}
.nav__content {
background: #dadada;
height: 30px;
line-height: 30px;
position: fixed;
width: 100%;
}
fiddle: http://jsfiddle.net/wv53qLwz/
A fixed element is position relative to the viewport, meaning it stays at the same designate spot and does not leave a gap in the page where it would normally have been located.
You can apply a top margin to the element that is directly following the fixed element.
div {
margin-top: 50px;
}
However, I've found out that using the scroll-margin property does the trick. It's explained better here https://css-tricks.com/almanac/properties/s/scroll-margin/#aa-enter-scroll-margin
div {
scroll-margin-top: 50px;
}
Related
I am creating a full width footer with margin, but it seems like when I add the margin it overflows. How can i avoid this?
Fiddle
footer {
bottom: 0;
position: absolute;
margin 40px;
width: 100%;
font-size: 2em;
}
footer .left_div {
float: left;
}
footer .right_div {
float: right;
}
<footer>
<div class="left_div">This is a long test</div>
<div class="right_div">This is another text</div>
</footer>
That's because you're specifying a width of 100% so when you add the margins then it becomes 100% + 40px on each side making it 80px wider that the window.
There's a few ways to fix it, you can use calc for the width so subtract the extra margin on the sides:
footer {
bottom: 0;
position: absolute;
margin: 40px;
width: calc(100% - 80px); /* 40px on each side = 80px */
font-size: 2em;
}
Or even easier remove the width property and add left and right properties to stretch the element without directly messing with the size:
footer {
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 40px;
font-size: 2em;
}
You're missing : in your css declaration. And yes, this is fatal.
margin 40px;
be
margin: 40px;
Your footer is positioned at a specified position relative to its closest positioned ancestor or to the containing block. As MDN says about Absolute Position. And your there's no relative closest parents to it. Which in your case, in the fiddle, width: 100% will take the width of iframe which is 700px.
But, you can have the workaround like this,
footer {
font-size: 2em;
margin: 40px;
bottom:0;
left: 0;
position: absolute;
right: 0;
}
Here's the updated fiddle
from my experience the best way is remove width: 100% and use left: 0; right: 0;
footer {
position:absolute;
left:0;
right:0;
bottom:0;
margin: 40px;
font-size: 2em;
}
footer .left_div {
float: left;
}
footer .right_div {
float: right;
}
<footer>
<div class="left_div">This is a long test</div>
<div class="right_div">This is another text</div>
</footer>
Reset default margin in body and add box-sizing:border-box to footer,
because you are applying margin and using position:absolute you need to use calc()
plus, you have a typo on margin 40px, should be margin:40px
body {
margin: 0
}
footer {
bottom: 0;
position: absolute;
margin: 40px;
width: calc(100% - 80px);
font-size: 2em;
box-sizing: border-box;
background: red
}
footer .left_div {
float: left;
}
footer .right_div {
float: right;
}
<footer>
<div class="left_div">This is a long test</div>
<div class="right_div">This is another text</div>
</footer>
add
left:0; to the footer css :)
It will overflow as margin increases the space from outside the div or block. If you want to hide the overflow then use overflow: hidden.
If you want to show all the data with margin then you should reduce width and then apply margin.
It is not worth to apply margin on div/block instead use padding. Padding increases from inside.
I am having a lot of trouble figuring this one out, essentially I have 3 columns: navbar (dark gray), main content (dark red) and sidebar (dark green) where navbar can be expanded and shrinked and sidebar can slide out and slide in (so change width from 0 to something and back to 0). And I want to keep all of this responsive. Idea is to shrink main content accordingly when some or both navbar and sidebar are expanded. unfortunately only way I can think to do this is to change width of main content to something like width: calc(100% - navbar width - sidebar width) but this is really verbose when I need to check if sidbar is expanded or navbar, or both are not expanded etc...
Here is an image illustrating how main content shrinks:
I assume flexbox could be used here somehow, but was not able to figure it out.
let example marku be
<nav> </nav>
<main> </main>
<aside> </aside>
note: nav and aside need to be 100% height of the page and are fixed in place.
You can use flex-box for this. A simple approach would be as follows: http://codepen.io/anon/pen/pgVVJb
You can change the classes to see how it changes the layout. NOTE: I am using classes to change the width of the columns but you could use JavaScript or static CSS similarly.
Code dump:
<div class="container">
<div class="small">Nav</div>
<div>Content</div>
<div class="medium">Sidebar</div>
</div>
html, body, div {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.container div {
flex: 1;
border: 1px solid #ccc;
background: gray;
}
.small {
max-width: 50px;
}
.medium {
max-width: 150px;
}
One popular solution to this is putting all of these elements in a wrapper with position: relative or even putting setting body's to position: relative, and all the elements inside with position: absolute. Then you can set each element as follows:
.navbar {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 50px;
}
.main-content {
position: absolute;
top: 0px;
left: 50px;
bottom: 0px;
right: 150px;
}
.sidebar {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 150px;
}
Of course the container element need to have some height for this to work.
I have a very simple structure and layout.
There is a #header and a #footer with a #body-container between them. The #header is position: fixed.
The #body-container has a margin-top: 3.1em to make room for the #header, which has height: 3em, but that doesn't work the way I thought it would. Even though the #header is not a child of the container, it won't render above the container (i.e. in the margin).
Why doesn't the #header render in the top margin of the #body-container? How can I achieve the desired effect?
You can fiddle with it here, and the code is here for reference:
HTML:
<body>
<div id="header">
</div>
<div id="body-container">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div id="footer">
</div>
</body>
CSS:
div {
margin-bottom: 0.1em;
background-color: #99ccff;
}
#body-container {
background-color: white;
margin-top: 1.1em;
width: 20em;
height: 35em;
}
.left {
width: 2.5em;
height: 100%;
float: left;
}
.right {
margin-left: 2.6em;
height: 100%;
}
#header {
background-color: #99eeee;
position: fixed;
height: 3em;
width: 20em;
z-index: 1;
}
#footer {
height: 3em;
width: 20em;
}
That's an interesting effect. It seems that the #body-container pushes the edge of the body up and it affects the placement of the fixed header. This is happening because the header is set without coordinates. Add the following rule set to place the header at the very top of the page:
#header {
top: 0;
left: 0;
}
Another way to prevent the margin of the #body-container affect the placement of the header is to set the padding on the body element. The rule set below will eliminate the effect of the margin-top of the #body-container and keep the fixed #header aligned with the other content, if coordinates are NOT used for the #header.
body {
padding: 20px;
}
The effect is called "margin collapse," which is discussed in this thread as well. Margin collapse behavior is specified and expected.
There are a few ways to the desired effect I've learned about since asking. Working jsfiddles are linked:
Add negative margin-top to #header.
This feels cleanest to me.
Move the #body-container's margin-top to padding-top.
This is bound to mess with some of the possible CSS style/layout properties if things get complex, and it does leave a gap between the top of the page and the header.
Exactly specify the #header coordinates with top and left properties.
See #DRD's answer.
Add any nonzero padding to the body.
Again, see #DRD's answer.
I have this container which can scroll the content. I would like the header in this container to always stay in the top.
http://jsfiddle.net/z9ze5/
Container:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
overflow: scroll;
position: relative;
}
Header:
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: absolute;
margin: 0;
background: #DDD;
z-index: 999;
}
If you are willing to alter your mark-up, here is one way of doing it:
<div class="lists">
<header class="box_header">
<h1>HEADER 2</h1>
<div class="setting" id="btn2"></div>
</header>
<section class="content">
<p>Lorem Ipsum ....</p>
</section>
</div>
Wrap your scroll area in a <section> (or other block level element).
For your CSS:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
position: relative;
}
section.content {
width: 300px;
height: 220px;
margin: 0 auto;
background: #39C;
position: relative;
top: 30px;
overflow: scroll;
}
Please see fiddle: http://jsfiddle.net/audetwebdesign/nGGXx/
More Advanced Example
If you study the following example:
http://jsfiddle.net/audetwebdesign/fBNTP/
uou can see how your scrolling boxes could be applied in a semi-flexible layout.
I lined up two scrolling boxes side by side and made their width proportionate to the width of the page.
The height is trickier to adjust. I fixed the height of the parent container, see the following rule:
.contentWrapper {
border: 1px solid red;
margin-top: 1.00em;
padding: 30px 0;
overflow: auto;
height: 400px;
}
If you change the height from 400px to some other value, the scrolling boxes will adjust themselves.
Hopefully, these examples will give you and others some more insights into how to build these more advanced layout designs.
If you want a non-css fix, add this listener...
$('.lists').scroll(function() {
$('.box_header', this).css('top', $(this).scrollTop()+'px');
});
and then change .lists css to give relative positioning
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: relative;
margin: 0;
background: #DDD;
z-index: 999;
}
Any position absolute within a position relative is absolute to the relative container. In order to have a header that stays in position, you'd need to position it above, not within, the scrolling container.
look at adding position: fixed to your header div .box_header. You may have to add padding of the height of the box header div to section.content but as you have that set to 30px that should be fine. IE6 and lower has issues with fixed positioning but hopefully we can live with that now - less people are using that than are still listening to Moby.
I try to center a div element ( the footer div in this case ) in my webpage but it insists on staying on the left side.
I am not quite sure what is wrong... Any ideas?
Thank you in advance.
HTML :
<div id='main'>
</div>
<div id='footer'>Centered Text</div>
CSS :
* {
padding: 0;
margin: 0;
font-size: 12px;
}
body {
font-family: helvetica, serif;
font-size: 12px;
overflow-y:scroll;
}
#main {
border: 1px solid #bbbbbb;
margin: 3% 5%;
padding: 10px 10px;
}
#footer {
font-size: 75%;
margin: 0px auto;
position: absolute;
bottom: 0px;
}
http://jsfiddle.net/DjPjj/2/
http://jsfiddle.net/DjPjj/13/
Try this:
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
}
Because your footer is absolutely positioned, you must tell it what width to take relative to its parent container. You can then use text-align to center the text within it.
Here is another example: http://jsfiddle.net/DjPjj/17/
This one centers a box within the absolutely positioned element. The inner box can be centered using margin: 0 auto because it is not absolutely positioned.
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
}
#footerInner {
margin: 0 auto;
width: 300px;
background-color: #ddd;
text-align: center;
}
This is more flexible because the inner element gives you a new container to work with that is centered relative to the parent.
The reason it won't center is because of the positon: absolute;.
Keep in mind this means that the footer will always be at the bottom of the page, even if the content overflows past it. It will overlap. If you want to have it be attached to the bottom of the page, you must set the min-height of a container above it to 100% and then deal with a negative margin-top and remove the position: abosolute;
http://jsfiddle.net/4fuk7/1/
Notice how the centered text is overwritten.
If you are looking for something to always be at the bottom, this would work
http://jsfiddle.net/4fuk7/3/
Sorry, the last one would scroll to the top. This one doesn't, but you'd need to fiddle with it a bit to get it to properly align around the margin's you've set. http://jsfiddle.net/4fuk7/9/
http://www.tlunter.com/Layout 2/ is where I did something similar. You can reference that if you want.