The HTML for my page:
#header {
background-color: #0cf;
border: 1px solid black;
height: 20%;
width: 100%;
}
#menu {
background-color: #ff0;
color: black;
font-size: 1.5em;
height: 29%;
width: 70%;
margin-top: 9%;
}
<div id="header">
<div id="menu">
this is menu
</div>
</div>
The problem is that the "#menu" has its margin relative to "body" element I want its margin to be relative to "#header".
You can probably see that i am creating a fluid grid here, and margin of my "#menu" div should be relative to the "#header" otherwise it will not work(see the screen shots).
Here are the screenshots.
First one at resolution of 1024*768.
Second is at resolution of 1280*1024
In second screenshot the "#menu" is a little high from the bottom of "#header".
My question is how can i apply a margin which changes as the height of "#header" changes?
I have already read about the "margin collapsing" thing but i don't think this is what's happening here,as my parent div has a border.
the 9% that you used in #menu { margin-top: 9%; } means 9% of ducument size which is all maximum browser window .
use position:relative for both #header and #menu . then give top:9% to #menu .
The percentage height property in CSS can only be applied to elemets whose parent's have a position other than static.
Just add position: relative to #header and you should good to go!
I usually solve this problem by using:
position:absolute;
top: xxx px; /* (or bottom, left, right) */
Related
I created a doc page using Flare and forced breadcrumbs to stay fixed below the top nav. The page works as it is, but I want the div to stretch across the page.
Please see current design below:
Click to see example screenshot
I can stretch the div to 100% if I remove the min-width in the child div, but it stretches only to the right, while keeping the breadcrumbs where I want. Example below:
Click to see example screenshot
Or I can make it stretch 100% by adding left:0; on the parent div, but then the breadcrumbs move out of place. I can use margin-right or right to position the div to desirable areas, but div does not sync with the rest of the content when resizing browser.
Try this:
*{
padding:10px;
}
.parent {
margin:auto;
width:300px;
background-color:red;
}
.breadcrums {
background-color:blue;
}
.full-width {
background-color: green;
position:relative;
width:100vw;
left:50%;
transform:translateX(-50%);
}
<div class="parent">
<div class="breadcrums">breadcrums</div>
<div class="full-width">full-width element</div>
</div>
The important part here being position, width, left and transform on .full-width.
Applied the css " left " property if that div has "absolute" position.
Thank you for your replies. Here are the html and css:
Html:
<div class="crumbs_wrapper">
<div class="MCBreadcrumbsBox" >
<span class="MCBreadcrumbsPrefix">You are here:</span>
B1
<span class="MCBreadcrumbsDivider"> B2 </span>
B3...
</div>
</div>
CSS:
div.crumbs_wrapper
{
position: fixed;
float: none;
width: 100%;
z-index: 1;
}
div.MCBreadcrumbsBox{
padding-bottom: 5px !important;
padding-top: 18px !important;
padding-left: 10px !important;
float: left;
position: relative;
margin-top: -12px;
background-color: #FFF;
z-index: 999;
width: 100%;
max-width: 104.5em;
box-shadow: 1.5px 1.5px 15px #888888;
}
Th tool I use is Flare, which does not have the fixed breadcrumbs feature. Breadcrumbs are automatically generated; I only changed the CSS values and added an extra div with the .crumbs_wrapper class. Other classes are automatically generated by the software.
If I remove the max-width the div only stretches to the right, and if I add left: 0; to the parent div, the breadcrumbs move to the left. I can bring the breadcrumbs to the position where I want using margin, but it does not stay fixed when the browser is resized. Also, the paddings and margin-top are used to keep the breadcrumbs below the top nav and aligned with the rest of the content.
I want to display my div tag in center of the screen.I draw my screen as black color ,current display position of div tag in red color(which I unexpected) and my preferd location of div tag in green color.
.welcome{
margin-left:20%
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
position: absolute;
}
<div class="welcome">
</div>
I want to display in middle.
Use transform:translateX
With the use of absolute positioning, the most flexible approach would be to offset the right hand edge of the div by 50% of the parent width, then by 50% of its own width using the transform property, translateX
The advantage is you dont need to rely on specifying absolute width/offset values in, e.g. px, so the div will remain centered if its dimensions change.
Additionally- for positioning; top/right/bottom/left should be used where possible in place of any margin or padding values, this approach also follows this.
.welcome {
font-size: 10px;
border: 1px solid #6AA121;
width: 60%;
height: 100px;
background-color: #C3FDB8;
position: absolute;
left: 50%; /* <--- move div right by 50% of parent width */
transform: translateX(-50%); /* <--- move div left by 50% of its own width */
}
<div class="welcome">
</div>
translateX is well supported, see here for a full rundown, the main point to note is that transforms require the -ms- prefix in IE9.and you will need -webkit- for iOS/Safari.
NOTICE
After going over your code again, it's become apparent that you are missing the ; after your margin left, and so the browser is ignoring it (hence why your code isn't working). However, you might find it a better alternative to use the left, right, top and bottom properties instead:
My Approach
since you are using position: absolute;, and you've given your div a width of 60%, you can use:
left:20%;
Since your width is 60%; leaving 40% of screen available.
40/2 (left and right gap) = 20% either side
Leaving:
.welcome {
font-size: 10px;
border: 1px solid #6AA121;
width: 60%;
height: 100px;
background-color: #C3FDB8;
position: absolute;
left:20%;
}
<div class="welcome">
</div>
.welcome{
margin-left:20%
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
position: relative; /* change absolute to relative */
margin : auto; /* & set margin to auto*/
}
<div class="welcome">
</div>
Try like this : DEMO
If absolute position is not needed, then use like this:
CSS:
.welcome {
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
position: relative;
margin:0 auto;
}
If you need Position:absolute, then use like this: DEMO
.welcome {
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
position: absolute;
left:20%;
}
You need to specify a width and then set the margins to auto. E.g.:
.welcome {width:60%; margin: 0 auto;}
Setting both the left and right margin to auto (as the above does) will center your div. If you do this without setting a width, the div will still be centered, but will fill the screen (or the previous div, at least) so you won't be able to tell.
Using position:absolute isn't a great idea here unless you need it for something else which isn't apparent in the question.
margin-left doesn't work properly with position: absolute (at least not in the way you are using it).
What you should write is this:
width: 60%;
left: 20%; // notice how this isn't margin-left
position: absolute;
This will centre the div.
If your div has a fixed width (e.g. 500px), try this:
width: 500px;
left: 50%;
margin-left: -250px;
position: absolute;
This works, and is the "correct" way of using margin-left with position: absolute.
I think that you can try an easier way. Try to remove absolute positioning and set margin left and margin right on auto. Like in the example below.
.welcome {
margin-left: auto;
margin-right: auto;
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
}
I have an div element with variable height which I need to be positioned by it's bottom relative to the containers top.
This must be done without changing the html.
e.g.
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
h1's bottom should be 100px below #container's top.
Thanks a lot
EDIT:
So by Request what I did (or didn't) tried:
Searching with Google for css bottom top position relative but that's not the best search terms in the world...
Normally I would put a container around h1 and give it a height of 100px but then I would need to change the html and that I can't
using bottom: somevalue but that positions the element's bottom relative to the container's bottom.
slain some vampires
You could make use of transform: translateY(-100%), to make the bottom of the element relative when you apply margin-top: 100px to h1.
#container {
width: 200px;
height: 200px;
background: tan;
overflow: hidden;
}
#container h1 {
transform: translateY(-100%);
margin-top: 100px;
background: papayawhip
}
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
Depending on browser support requirements:
#container {
position: relative;
}
#container h1 {
position: absolute;
bottom: calc(100% - 100px);
}
Example
Only way through it is to add a height to the h1 unless you want to go with calc which isn't supported yet by some browsers. Then set your top margin to be top: 100px - h1's height. Hope this works
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
#container {
width: 300px;
height: 300px;
background: #222;
overflow: hidden;
}
#container h1 {
background: #444;
position:relative;
height:80px;
top:20px;
}
http://jsfiddle.net/ms889w57/
#container
{
position: absolute;
height: 100px;
bottom:0px;
}
This code is not affecting html at all. I added css for id-container.
An absolute position element is positioned relative to the first parent element that has a position other than static. You can change it to fixed it you wants to.
Height of the container, help you to calculate spacing from bottom.
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 am trying to make a footer that spans the width of a page minus 10px on the left and right. I am trying to do this by giving the body a padding on all sides of 10px. In the code below the header works just fine, but the footer is ignoring the body padding on the right side. Why is it doing that and how can I fix it?
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0 10px;
}
#header {
height: 150px;
width: 100%;
margin: 0 auto;
background: #333;
}
#footer {
position: fixed;
bottom: 5px;
width: 100%;
background: #f63;
text-align: center;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="footer">I am the footer!</div>
</body>
</html>
your footer not ignoring body padding, look through console at that element sizes and you will see that width of your footer is 100% of window width + 10px from left padding + 10px from right padding.
you can use calc function in css: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
#footer {
width: calc(100% - 20px);
}
JSFiddle
Footer width and padding are calculated separately. You can use use box-sizing: border-box to prevent this from happening
Use this for all elements to behave this way
* {
box-sizing: border-box;
}
There is a good video by Travis Neilson on his YouTube channel DevTips, where he explains the box-modal concept.
#footer {
position: fixed;
bottom: 5px;
left: 10px;
right: 10px;
background: #f63;
text-align: center;
}
demo: http://jsbin.com/benosofo/3/
A fixed element is not fixed in relation to the body, it's fixed in relation to the window. If it would be fixed in relation to the body then it would be just as absolute positioning, and it would scroll with the body.
You can make a fixed container for the footer, so that you can use a padding on that.
HTML:
<div id="footercontainer"><div id="footer">I am the footer!</div></div>
CSS:
#footercontainer {
position: fixed;
bottom: 5px;
width: 100%;
padding: 0 10px;
}
#footer {
background: #f63;
text-align: center;
}
None of the solutions in the net worked for me. so I solved it another way. I was trying to create a modal for adding address and was testing it on the mobile mode. I wanted a fixed layer with rgba(0,0,0,0.75) to cover all the window and in the center, a white form appear for the user. the form header was hiding in the top (and unscrollable) and in the bottom, was sticking to the bottom of window which was not looking good (in some cases, some element won't work when they don't have enough space from the window borders).
so I solved the problem by putting a div after the form div in the bottom (to stick to the window bottom instead of my form) and made it transparent. so it worked! (I have to mention that I am writing react code)
this is my div:
<div className="modal-padding"/>
and this is my styling for this div:
.modal-padding {
width: 100%;
border: 10vh solid transparent;
}
I used one, before the form div and one after that.
Be careful. I tested giving a width: 100vw and height: 10vh to the div but when it has no content, it doesn't work, seems it doesn't exist at all. so I gave a border.
I hope this solve your problem too, or give you an idea for solving the issue.
Good luck.
You could make a wrapper for your footer and apply the 10px padding to that instead.
#footer-wrap {
position:fixed;
bottom:0px;
left:0px;
padding:10px;
}
and then when you place your footer inside it will be correctly padded. This way is the most backwards compatible solution as it doesn't rely on css3 calc.
JSFIDDLE
http://jsfiddle.net/pk8uU/