I've been enjoying and having success mocking up webpages with CSS. But then I decided to play with a "fixed menu" and my understanding is now not so clear.
So my brief knowledge make a blank HTML doc and then create a "container" div and place all your further elements within the "parent" container. No problem with this and all has been well with floating elements and such.
But when placing a "fixed" element within my parent div I'm lost as to why the fixed element observes the parent's left margin and ignores it's right margin.
html, body{margin: 0; padding: 0;}
#container
{
margin:0px auto;
width:90%;
height:500px;
background:#A8A8A8;
}
.fixed-menu
{
position: fixed;
height: 50px;
width:100%;
background-color: #00a087;
}
<body>
<div id="container">
<div class="fixed-menu"></div>
</div>
</body>
So with the above the "fixed" block does align with the left margin of the parent container but runs completely to the right edge of the browser page. I have figured out that I can make the fixed block 90% and resolve the issue but I don't understand why. Why would the block not be 90% of the parent "container" block.
I look forward to you knowledge.
Thanks
Update your css like below to achieve your desired result. Inherit your width from the parent instead of using 100%.
.fixed-menu
{
position: fixed;
height: 50px;
width:inherit;
left:auto;
right:auto;
background-color: #00a087;
}
DEMO
as stated by #freestock.tk, a fixed element is "fixed" to the screen viewport.
the width (and height of set in %) is computed relative to the screen viewport.
it looks like it's aligned to left margin of the parent container because you did not positioned it with left or right css properties, it's not constrained by the parent container, it is just at the same horizontal position in this peculiar case.
if you set
left:0;
it will align to the left margin of the viewport and ignore the parent container, this should help you better understand his fixed positioning.
html, body{margin: 0; padding: 0;}
#container
{
margin:0px auto;
width:90%;
height:500px;
background:#A8A8A8;
}
.fixed-menu
{
position: fixed;
left:0;
height: 50px;
width:100%;
background-color: #00a087;
}
<body>
<div id="container">
<div class="fixed-menu"></div>
</div>
</body>
You where almost there, just add to .fixed-menu few css rules more :
.fixed-menu {
left:0;
right:0;
margin:0 auto;
width: 95% // now you can change width and fixed element will be centered always
}
Related
I'm using the "100% page height" pattern from this SO answer:
CSS Div stretch 100% page height
In other words I have a basic DOM structure of:
<hmtml> // has min-height: 100% and position: absolute
<body> // has height: 100%
<div id="myApp"> // has // has position:absolute/top: 0/bottom:0
<div id="inner"> // has no styles (or height: 100%; same difference)
Everything works great with html/body/#myApp: they all have 100% page height. My problem is the div#inner: it doesn't grow to the height of its parent (even if I give it height: 100%).
I believe this is happening because #myApp is positioned absolutely, and thus has no height for #inner to inherit. Is there any way to fix this without adding position: absolute; top: 0; bottom:0 to every nested element? It seems like if I can somehow get #inner to take its height from #main I can get all of its children to inherit that height ... but because of the absolute positioning I can't figure out how to do that.
Any help would be appreciated.
html, body{ height:100%; margin:0; }
#myApp{
position:absolute;
top:0; bottom:0; left:0; right:0;
background:red;
}
#inner{
height:100%;
background:gold;
}
<div id="myApp">
<div id="inner">
Inner should be gold and it is!
</div>
</div>
I know it's a super-basic question, but I'm not able to find a solution. I have 2 div and I would like to display them as blocks (one below the other) without having 100% width. Here's my code.
HTML
<div id="container">
<div class="test">one</div>
<div class="test">two</div>
</div>
CSS
.test {
display:inline-block;
clear: both;
border:1px solid;
}
#container {
clear:both;
text-align:center;
}
Unfortunately this answer doesn't fit to me, since I need to center blocks horizontally (so float cannot be applied in my case). Here's the fiddle. Thanks in advance.
to center them on top of each other without taking 100% width and still use margin:auto; use : display:table;
.test {
display:table;
margin:auto;
border:solid;/* to see it */
}
You can specify the width of the divs, change display to block, and use margin: 0 auto to center them.
JSFiddle
You can also center the div by adding 50% left offset, and then negative margin in amount to half width of the div. I do not know how much is this applicable to your case, but here is an example:
.test {
position: relative;
border:1px solid;
width: 300px;
left: 50%;
margin-left: -150px;
}
You can see it in action here: http://jsfiddle.net/b8LuQ/7/
display:inline-block; is not allow the second line. Therefore I removed it and define width for both div test one two you can resize it and margin:auto is align center the both div in container here is an example
This is a snippet of the code
<div id="container">
<article>
<p>contents</p>
<img ... />
<footer>meta data</footer>
</article
</div>
#container{
width:960px;
}
article{
width:640px;
}
footer, img{
width:960px; /*well I may want it 640px but float right all the way back to the edge of #container*/
}
The footer and image do not take that width; I tried the position:absolute and it works, but they go to the top, even when I add position: relative to the container.
Normally I would close the article tag, add the image, and then start with the article. This is not an ideal solution.
First thing is that they need to be block or inline-block to accept a width. Floats could cause weird wrapping. You could try overflow: visible to see if it helps.
You are on the right track with positioning. You want to set the container to relative and then the inner element set to absolute, pinned to the top right corner:
#container{ width:960px; position: relative; }
img, footer{ width:960px; position: absolute; right: 0px; top: 0px;}
An absolute positioned element is relative to its first positioned ancestor, so the inner element is positioned based on #container.
I have divs like this:
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
now I use this style for my container and footer:
html, body {
height:100%;
}
div.container {
min-height: 100%;
position: relative;
}
div.footer {
width:100%;
height: 40px;
positioin: absolute;
bottom: 0px;
}
So, the footer stays at the bottom relative to the page, it is good, but I found out two problems:
if the body div's content is too long, it will overlap the footer!
I want the background color of the footer to span over the whole browser view port, but currently it is just as wide as its the container div.
Any idea of how to fix this?
My best tip is to use A CSS Sticky Footer, works like a charm.
place the footer div out of the container and give marin-top:-(height:px)px;.
<div class="footer"></div>
html, body {
height:100%;
}
div.container {
min-height: 100%;
}
div.footer {
width:100%;
height: 40px;
margin-top:-40px;
}
You might want to try bottom: -40px;.
The bottom property positions your element so that the bottom of your element is offset by the bottom of the containing element by this amount. So if you had bottom: 0; as in your example, the bottom of your element is aligned with the bottom of its containing element, hence it will overlap it.
I want the background color of the footer to span over the whole browser view port, but currently it is just as wide as its the container div.
This is because the width: 100%; is defined relative to the containing block of the element, which is the div.container (which is set to position: relative). You would have to take it out of this container, or not define the container as position: relative; to fix this.
Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>
my CSS is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.
Thanks,
Matt
Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.
To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you could also set the top and bottom of #navBar:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!
Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.
Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.