Thanks to everyone, I am Italian, sorry for my English, I would like a clarification:
Why do not all browsers see margin-right, while developer tools have margin-right? (Firefox does not show margin-bottom, in addition to margin-right).
CSS
html
{
background-color:gold;
width: 100%;
height: 100%;
padding: 6px;
border: solid black 10px;
margin-top: 10px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 20px;
}
In the box model I have the margin-right, in the browser it is not considered.
Chrome browser and developer tools box-model:
Your box is over-constrained
CSS 2.2 says:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
If all of the above have a computed value other than 'auto', the
values are said to be "over-constrained" and one of the used values
will have to be different from its computed value. If the 'direction'
property of the containing block has the value 'ltr', the specified
value of 'margin-right' is ignored and the value is calculated so as
to make the equality true. If the value of 'direction' is 'rtl', this
happens to 'margin-left' instead.
From that, you can see that browsers automatically adjust the right margin, overriding the setting you give it.
You should take off the width from your css. since you are using margin, you are already telling the browser to only show a space of what you have allowed. It does not affect the height cos the height is pretty much infinite.
So you should have something like this
html
{
background-color:gold;
height: 100%;
padding: 6px;
border: solid black 10px;
margin-top: 10px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 20px;
}
Browsers do not always handle all css properties on the html element consistently because it has no parent. If I'm understanding what you want correctly, I'd recommend this if you want to avoid a wrapper div, but it might be a bit unstable:
* {
box-sizing: border-box
}
html {
background-color:gold;
width: 100%;
height: 100%;
padding: 10px 50px 10px 20px;
margin: 0;
}
body {
width: 100%;
height: 100%;
padding: 6px;
border: solid black 10px;
margin: 0;
}
See this working example
Alternately you can use a wrapper div and avoid doing anything to the HTML tag other than normalizing it (this is what I would recommend):
<html>
<body>
<div class="main">
<!-- All your content -->
</div>
</body>
</html>
* {
box-sizing: border-box
}
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body{
background-color:gold;
padding: 10px 50px 10px 20px;
}
div.main {
width: 100%;
height: 100%;
padding: 6px;
border: solid black 10px;
margin: 0;
}
As shown here
Related
Width 100% is not working! My footer is going outside the #wrap and I don't want to set exact pixels to it.
Any solution?
live example.
#wrap {
border: 1px solid #ccc;
clear: both;
display: table;
vertical-align: middle;
position: relative;
width: 400px;
margin: 0 auto 10px;
padding: 10px;
}
footer {
clear: both;
background: #f3f3f3;
border: 1px solid #ccc;
border-radius: 5px;
float: left;
margin: 0;
padding: 10px;
width: 100%;
overflow: auto;
min-height: 100%;
height: auto !important;
}
<div id=wrap>
<footer>© 2013 PUAction · Terms · Disclaimer · Privacy · Login</footer>
</div>
This is the default box-model behavior :
Width = width + padding-left + padding-right + border-left + border-right
Therefore, your width is 100% + 2*10px which is larger than the footer's width...
You can :
Remove width: 100% which will result on an implicit use of width: auto (which is just fine because block elements automatically fill the width of their parent)
Use the box-sizing: border-box properties
For deeper explanations, just take a look at this resource and this one!
Regards.
You're using display:table on the container. That means the direct child (in this case "footer") should be display:table-cell.
When you say width: 100%; that doesn't include the padding, so you have width:100% + padding: 10px that gives you 100% + 20px width.
A simple solution is to add box-sizing: border-box;
footer { box-sizing: border-box; }
Demo
Perfect !
Thanks guys !
box-sizing: border-box;
-moz-box-sizing:border-box; /* Firefox */
http://jsfiddle.net/2P6KR/9/
I want to create an element in css and keep it at a constant right spacing from the main content.
for example:-
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
width: 924px;
height: 580px;
}
now I am creating an image that needs to be at a constant distance from the main content, and on its right hand side.
ie. say 100px from main content at all times, no matter the size of window:-
.NewElement {
width: 78px;
height: 70px;
position: fixed;
bottom: 550px;
right: .main.width() + 100px; <--- how do I represent this??
display: none;
text-indent: -9999px;
background: url('../xxx.png') no-repeat;
background-color: #000;
}
right: .main.width() + 100px; <--- how do I represent this correctly??
Place 'NewElement' within the 'main' DIV (assuming these are DIVs) and set the margin-left:100px, so it will always be relative to that main DIV.
<div class="main">
<div class="NewElement"></div>
</div>
Here's a fiddle.
You would have to use javascript or jquery to do this:
var width = $('.main').css('width');
$('.NewElement').css('width',width+100);
I have 3 divs. First div is at the top with position relative, and the second div is at the bottom and its position is absolute. There is also a third div which i want it to be on the middle. I want the third div to be in the middle so that no matter i change the height of my browser, i want it to be alligned with 20px padding, depending on the first and second.
middle-box{
padding: 20px;
}
.top-box{
width: 265px;
position: relative;
margin: 0px auto;
}
.bottom-box{
width: 25%;
padding: 12px 0 12px;
position: absolute;
bottom: 0px;
min-width: 300px;
}
Variations on this same question have been asked dozens of times on SO. The fact that you want 20px margin is irrelevant. It's the overall structure that can be tricky.
I think this meets your requirements. The one compromise you may have to make is setting fixed heights on your header and footer.
http://jsfiddle.net/Fd6f9/1
.top-box {
height: 60px;
position: relative;
}
.middle-box {
position: absolute;
top: 70px;
bottom: 80px;
left: 20px;
right: 20px;
margin: 20px 0;
}
.bottom-box {
height: 56px;
padding: 12px 0 12px;
position: absolute;
bottom: 0px;
}
If you choose to have your bottom-box "stuck" to the bottom of the browser window, you'll have a variable space between your middle-box and the bottom-box, depending on how much content is in the middle-box and the size your viewer's browser window. If you want consistent spacing between the divs, you need to remove the absolute positioning.
Also, I'd strongly recommend changing your css from classes to ids (. to #). You forgot the class/id marker on middle-box, so that might also be causing a problem.
Keep in mind that padding will affect the inside of your div, while margin will affect the outside.
Does this code give you what you're looking for? (I added background-colors just for a visual so I could see what was happening to the divs.)
<style type="text/css">
#top-box {
width: 265px;
position: relative;
margin: 0px auto;
background-color: #DDD;
}
#middle-box{
margin: 20px 0;
padding: 20px;
background-color: #AAA;
}
#bottom-box{
width: 25%;
padding: 12px 0 12px;
bottom: 0px;
min-width: 300px;
background-color: #888;
}
</style>
</head>
<body>
<div id="top-box">something in the top goes here</div>
<div id="middle-box">something in the middle here.</div>
<div id="bottom-box">something at the bottom.</div>
</body>
It's hard to know what else to tell you without knowing what you're planning on doing with these divs. Hope this helps!
Here's a puzzle. Basic page, one element:
http://jsfiddle.net/PZj6t/
HTML:
<div id="container"></div>
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#container {
position: relative;
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
}
That one looks how I want, with the #container neatly flush to the top. But when I add a nested element:
http://jsfiddle.net/PZj6t/1/
HTML:
<div id="container">
<nav id="topnav"></nav>
</div>
CSS (new):
#topnav {
width: 100%;
height: 40px;
margin: 30px 0;
background-color: red;
}
The container jumps down. It seems that the margin-top from #topnav is somehow being passed to the container, and now the page has a scrollbar I don't want. (I'm testing in Chrome.) How do I prevent this?
(As a further mystery, if I add border: 1px solid white; to the #container's CSS, the jump disappears. Which would be fine, except that also adds two pixels worth of undesirable scroll to the page.)
This is due to a feature of CSS called margin collapsing. If there is no padding or border on a parent element, the parent and its child's margins "collapse" to the greater value of the two and is essentially applied to the parent.
For your situation, I would suggest simply adding an additional inner wrap within the container, and throwing some padding on it to simulate the margin effect you're looking for: http://jsfiddle.net/PZj6t/3/
Anything within the #inner div or below should behave as you expect, as margins only collapse when they are at the edge of their parent (and no padding or borders are present).
display:inline-block;
On Your nav element appears will fix this. Its to do with margin-collapsing see here for more detail.
Jblasco is correct, this is a neater solution though: http://jsfiddle.net/PZj6t/4/
#container {
position: relative;
margin: -1px auto 0;
width: 400px;
height: 100%;
padding-top:1px;
background-color: #666;
}
#topnav {
width: 100%;
height: 40px;
margin: 29px 0 30px;
background-color: red;
}
#container {
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
border:1px solid;
}
http://jsfiddle.net/PZj6t/12/
Update:
http://jsfiddle.net/PZj6t/1/
apply display:inline-block; on both container and topnav
I am trying to vertically center one div (containing a search bar) inside another (a top banner). I was under the impression that to do so you did the following:
#banner {
height: 35px;
width: 100%;
}
#searchbar {
height: 15px;
position: relative;
top: 50%;
margin-top: -7.5px; /* half of the height */
}
This works fine until you add the margin-top at which point it is applied to the #banner as well.
Is there an alternative way to do this, or am I just doing it wrong?
Here's a jsFiddle of my actual code.
I use line-height with the value being the same as height of parent div.
As seen here: http://jsfiddle.net/vkJ78/24/
CSS:
#banner {
background-color: #770E17;
height: 35px;
width: 100%;
border-bottom: 1px solid #333;
}
#src {
width: 300px;
height: 15px;
border: 1px solid #333;
padding: 3px;
}
#srcdiv {
width: 308px;
margin: 0px auto;
position: relative;
line-height: 35px;
}
EDIT: Per recommendation from NGLN, this will also fix horizontal centering, #srcdiv and #src having equal widths.
You have to add overflow: hidden to #banner. To clear the float, I guess.
Then, modify the negative margin to margin-top: -11px in #srcdiv (you have to sum the div height, the border, and the padding for the total height)
http://jsfiddle.net/vkJ78/1/
Give margin:0px and padding:0px and remove margin-top
body {
margin:0px;
padding:0px;
}