I have an element in a div that I'm having some problems giving a margin-top.
Instead of moving the element in the div, I can only get it to move the entire div.
It's the purple circle that I want to give a margin-top.
http://jsfiddle.net/9J8R5/
#step1 {
width:100px;
height:100px;
border-radius:50px;
background-color:#5020B8;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
top:1em;
font-size:60px;
color:#ffffff;
font-family:Cusmyrb;
line-height:105px;
text-align:center;
padding:0;
}
The margin-top doesn't appear on the child element the way you expect because of margin collapse.
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
Source: https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing
If you really want the margin-top to exist on the child element, either of these additions will do it for you:
#competeinfo {
border: 1px solid transparent;
}
http://jsfiddle.net/9J8R5/5/
Or
#competeinfo {
overflow: hidden;
}
http://jsfiddle.net/9J8R5/6/
Otherwise, padding on the parent element is probably the best choice.
For how the CSS box model works, check the W3C
To fix your problem you have two options:
use margin, as you mentioned, but add some content before the circle. E.g. jsFiddle
use padding-top on #completeinfo, instead of margin-top. E.g. jsFiddle
Related
I have a div inside a div. The outer div's job is to position the box, while the inner div's job is to position the text. These divs are within a larger div, but I don't think that's the problem. When I try to put padding on the outer div, or in other words move the box, the padding is applied to the inner div and the box is thus getting bigger in that direction. The top-left hand corner is always stuck to the other div it is inside. How do I make it so that the padding is applied to the outside of the box instead of the inside?
Here is the formatting:
<div style="width:100px;
height:50px;
padding-left:10px;
padding-top:10px;
border: 3px solid #D8BFD8;
align:center;">
<div style="font-size:x-large;
padding-left:40px;
padding-top:0px;
font-family:'Arial';
color:black;">
Profile
</div>
</div>
Not too sure, but by moving the outer box are you sure you haven't mistaken padding with margin? Padding is applied to the inside of the div.
I just changed
padding-left:10px;
padding-top:10px;
to
margin-left:10px;
margin-top:10px;
and increased it to make it more obvious. Also moved the inline css to make it clearer.
http://jsfiddle.net/H334r/3/
1 - For readability, it's generally good practice to not mash a bunch of languages together, even though web dev requires it every now and then.
So separate the css into and throw it in the or use a css stylesheet.
2 - You'll want to have the outer div relative to the page. So in css, position: relative. And the inner div, you want to use an absolute position. So position: absolute.
I took the liberty to clean up code and threw it here in jsFiddle. http://jsfiddle.net/w7Ltp/1/
But if you want the throw it into a html page.
<style>
#outerbox{
width:100px;
height:50px;
padding-left:10px;
padding-top:10px;
border: 3px solid #D8BFD8;
align:center;
position: relative;
}
#innertext{
position: absolute;
font-size:x-large;
padding-left:10px;
padding-top:0px;
font-family:'Arial';
color:black;
}
</style>
<div id="outerbox">
<div id="innertext">
Profile
</div>
</div>
Padding is applied inside an element.
from W3Schools, The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
So if you are applying the padding to your outside div (div with 100px width), the elements inside it are the ones that get affected.
You might want to look at using margin instead. Or it would be better if you set the padding to the parent of the outer div; With that, all elements inside the parent of the outer div will be uniformly spaced.
I see that you have "align: center" for your outer div. Try using "margin: auto".
Have a look at, http://thomaspalumbo.com
I have this CSS for my website's container:
.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}
Then I have a container on top of that to center that info.
The .graybox container spreads the width of the page like I want but now my footer div is hidden, according to firebug is it actually behind? And up on the page?
Is there a fix for this?
While I'm here can anyone explain the white space on the right side of the page. It comes into effect once the page is resized smaller.
You can use the CSS z-index property to make sure your footer is in front of the content. Z-index only works when the element is positioned though. So make sure you add position:relative to your footer
#footer{
position:relative;
z-index:999;
}
Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp
EDIT
Just checked out the code of your website, and I don't understand why your graybox is positioned absolutely, this will only make things more complex. The same goes for your menu, why position it absolute, why not just add it in the right order in the HTML in the first place?
EDIT
If you want to center your content but with a background that has a 100% width then you can simply add a container div like so:
HTML
<div class="container">
<div>lorem ipsum....</div>
</div>
CSS
.container{
background:red;
}
.container div{
width:400px;
margin:0 auto;
background:yellow;
}
See JSFiddle here: http://jsfiddle.net/HxBnF/
Currently you cannot do this because you have a container which you set at 980px, don't ever do that unless you are sure you don't want anything to wrap over it, like in this case the background of a div in that container.
in the div style, just assign a z-index value greater than any other z-index such as
.divClass{
position: absolute;
z-index: 1 //if other elements are still visible chose a higher value such as 20 or even higher.
}
Please check this fiddle http://jsfiddle.net/JH4Ew/1/. I want align <p class="email"> to the bottom. I thought if I put
margin-top:100%;
it means 100% from height of the parent element. On the fiddle seems more then 100% of height. How to do this in right way?
PS I have updated the fiddle to right content, previous wasn't updated
Add the following CSS to align the paragraph to the bottom of the div:
#opening4 {
position:relative;
border: 1px solid #999;
}
.email{
position:absolute;
bottom:0;
}
jsFiddle example
By positioning the div relatively it allows you to set the position on the email paragraph absolutely, and by setting the bottom to zero, it will remain at the bottom of the parent.
Remove position: relative from the parent if you want it to be at the bottom of the window:
http://jsfiddle.net/2VyCj/1/
Margin is distance from sibling elements, not the distance from the inside of the parent.
This question already has answers here:
css - 100% + padding?
(2 answers)
Closed 8 years ago.
Basically I have a div with this CSS:
.mydiv{
position:absolute;
top:0;
left:0;
width:100%;
padding:7px;
}
The browser shows the horizontal due to padding (width 100% + 7px)
Take a look here: http://jsfiddle.net/3FrLq/
How can I have that div not showing the horizontal bar? (Without having to add another div inside?)
Get rid of the width:auto and replace it with right:0.
jsFiddle example
Since your element is positioned absolutely, you can in effect pull the left and right sides to the edges of the element's container without invoking the scrollbar.
Correct HTML semantics pretty much requires that you have another element inside. In this case, your text should be wrapped in <p> tags.
Doing that automatically gives you something to hook into to set margin or padding on the inner element.
That said, if you really can't/won't have an inner element, remove your width and set right: 0. The nifty thing about absolutely positioned elements is that if you set opposing positions to 0, you can "stretch" the element (it works with top/bottom, too).
Alternatively, if your element isn't positioned absolutely, you can change your width: 100% to max-width: 100% (or add the max-width line, to deal with a bug in an old version of IE, if you have to go back that far), which will hard-cap the total width. This one's in action here - http://jsfiddle.net/3FrLq/5/ .
You can use the box-sizing: border-box CSS property which will exclude the padding and borders from the actual width and height of the element:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border -box;
Here's the fiddle:
http://jsfiddle.net/3FrLq/3/
More info / browser support for box-sizing:
https://developer.mozilla.org/en-US/docs/CSS/box-sizing
You can set the div to display inline-block:
.mydiv{
display: inline-block;
position:absolute;
top:0;
left:0;
width:100%;
padding:7px;
}
This will display it inline (not stretching horizontally), while allowing you to still apply padding and margins to the top and bottom (unlike display: inline
Get rid of width specifying & just specify 0px; for all 4 sides
if IE8+ compatibility enough for you, you can use box-sizing.
if you want it to be working only with full width, set both left & right to 0, but do not set a width.
Here is a jsFiddle I set up.
The parent and child element's height will be uncertain(means it will change after) and the child element's position must be absolute.
How can I offset the child element vertically by five pixels from the center of the parent?
HTML:
<div class="parent">
<div class="child"></div>
</div>
CSS:
.parent{
position:relative;
margin: 10% auto;
background:lightgray;
height:50px;/*parent's height will change after*/
width:200px;
}
.parent .child{
position:absolute; /* needs to be absolutely position */
top:0;
bottom:0;
margin:auto;
width:100%;
height:20px;/*child's height will change after*/
background:darkgray;
}
offset 5px where??
Like this ----> Updated Fiddle
or
Like this ----> Updated Fiddle
If I understand you correctly, then you want to offset the child by five pixels vertically. I'm not sure whether this means the element should move up or down from the middle of the parent, but here is an example of it moving up and here is one for moving it down.
Here's the code I added to the child's CSS to move it up:
top:50%;
margin-top:-15px;
Also remove the current top and bottom declarations for the child.
We set it 50% from the top of the parent and then subtract half of its height from its top offset which centers it. We add (or subtract) 5 pixels to/from that offset to offset it further.
For variable height, use this CSS (this moves it up five pixels):
top:-5px;
bottom:0;
margin:auto;
Example.
Use border-top
See my Fiddle here
with top:0;bottom:0; and margin:auto; child element can align middle when parent and child element's height "uncertain";
border-top:10px; can make child element offset.
and maybe you'll solve your issue
Considering the element is centered, you can just add
transform(translateY: 5px)
to offset the div vertically, or
transform(translateX: 5px)
to offset it horizontally.