This page I have is super simple, this should be a breeze but I'm stumped.
I have two DIVs, one inside the other. In the first DIV, I have the margins set so that it lays at the top of the page, centered. The second DIV should lay inside the first, centered, but with a 50px margin at top. However, the 50px margin is being applied to the parent DIV and not the child. If I add a border to the parent DIV, it behaves like I expect it to, but not without.
Can anyone offer me any insight to this? Thanks in advance.
<div id="pageWrapper">
<div id="mainWrapper">
<p>foo</p>
</div>
</div>
*{
margin:0px;
padding:0px;
}
body{
background-color:#034375;
}
#pageWrapper{
width:960px;
margin:0px auto 0px auto;
background:url('i/blue-gradient.jpg') top left no-repeat;
}
#mainWrapper{
width:500px;
margin:50px auto 0 auto;
border:1px solid #000000;
background-color:#eeeeee;
}
This issue has to do with the CSS spec on rendering adjacent margins. Essentially, because there's nothing "in between" the margins of the containing div and the margins on the inner div, the larger value is used for both.
You'll see this mainly in Firefox, and although the behavior seems to follow the letter of the law, I'm not sure this particular case behaves as intended by the spec writers.
Fortunately, it's easy to fix -- put something "between" the margins. You've already noticed that putting a border on the parent div works. You can make this border transparent, and reduce the inner margin by 1px, and it will appear functionally the same as your above case. Another option is to apply one pixel of padding-top to the parent div. A third option is to use padding-top: 50px on the parent div instead of applying a top margin to the child div.
More information on collapsing margins.
You don't say which browser you're seeing this in. For me it works as expected in Firefox. However, I suspect you're seeing the issue in Internet Explorer. This is probably because the inner div doesn't have hasLayout applied - this is usually the cause of IE styling bugs. Try adding zoom:1 to the mainWrapper CSS declaration and see if that works.
You probably want to set the padding of mainWrapper instead of margin.
padding:50px 0 0 0;
Check out this description of the box model to see how margins and padding differ.
Related
I have horizontally stacked divs using the following code below:
.basic {
width:100px;
position:relative;
display:inline-block;
border: 1px solid red;
text-align:center;
margin:0;
padding:0;
}
#container {
white-space: nowrap;
border: 1px solid black;
width:300px;
overflow:auto;
}
The 'container' has white-space:nowrap for stacking it's children horizontally. However, the horizontal children have spaces to their right. Here's a fiddle showing the demo. Inspecting box layout there doesn't seem to be any margin/padding. But just some mysterious 'dark matter' pushing it out :P
The queer thing is that the same code is used at different places in my application but this anomaly shows up in one place as shown in the image below:
Don't worry about the garbled text on the top. I haven't rotated the div 90 degrees CCW as yet :)
However, pay attention to the bottom part of the image. The textbox divs are stuck to each other whereas the ones on the top aren't. They use the same CSS as above, but differ in structure. The top Div has two floats which are cleared by the div with the arrow towards the bottom. So no 'uncleared' floats there. Rather than posting the entire HTML/CSS I recreated the problem in the fiddle.
What I fail to understand is that even after having 0 margin/padding and display:inline-block for the child divs why is there still some space? I'm sure this has been asked quite a few times here but why would this happen once and not in another place? Besides, how best to 'fix it'??
display: inline-block places a margin to the right if there exists a whitespace between the current and the next element. This space is calculated as a product of 4px and the current font-size in ems. Notice the difference between the first and second rows in this fiddle: http://jsfiddle.net/MkasM/
In your case, this can be controlled simply by setting margin-right: -4px since you haven't changed the font-size.
More here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Also, it is good practice to give your elements 'box-sizing: border-box' if you haven't already. It will contain the 'padding' and border-widths within the blocks so it wont interfere with the layout.
To read: http://paulirish.com/2012/box-sizing-border-box-ftw/
I'm having a problem with the page elements moving when I add a border in a HTML 5 document.
I expected the containing header element (grey) to appear at the top of the screen, but it seems to take the margin from the inner div (red). However if I add a border to the header it appears where I expect and the red inner div only moves slightly!
(1st image: without border; 2nd image: with border)
I have tried setting relative or absolute positioning, using a div instead of the header element, setting margins & padding to 0, using a HTML4 doctype etc. The HTML validates. This is the HTML stripped of everything and still doesn't work. Its happening in latest Chrome & FF.
HELP!! What have I missed?? Or any workarounds (other than keeping the border)?
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
<header><div id="mydiv"></div></header>
<div id="content"><p>hello</p></div>
</body>
</html>
CSS:
header {background-color:#CCCCCC; width:960px; height:430px;}
#mydiv {width:960px; height:320px; margin:80px 0px 0px 0px; background-color:#CC0000; }
The issue comes from something called "margin collapsing". It's simple: 2 adjoining margins collapse to the highest of the two (I say two, but it could be more).
In your case, '#mydivs' margin-top - 80px - is touching the 'header's margin-top - 0px. They're adjoining - there's no element between them, nor padding, nor border.
The margins collapse, therefore, to the highest of the two (80px), and it is then applied on the highest of the elements in the parent-child hierarchy - that's the header in this case.
One solution to this problem is to put something between the margins; either of some padding, or a border on the header works fine.
header {
border-top: 0.1em solid rgba(0,0,0,0);
}
A second solution (my preferred one), is to make the parent element create a new block formatting context. That way, its margins simply won't collapse with that of its child.
How do you create a block formatting context?
There are four possible ways.
by floating it.
"position absoluting it".
adding one of these displays: “table-cell”, “table-caption”, or “inline-block".
adding an overflow other than visible.
To prevent the margins from collapsing you could do any of these 4. I usually go for number 4) - set overflow to auto, as it's only side affect... well it's improbably likely to become a problem.
header {
overflow: auto;
}
That's basically it for parent-child margin collapsing. There's also margin collapsing between siblings and the rule is pretty much the same: 2 adjoining margins collapse to the highest of the two. It's the solutions that are not.
Here's a great explanation of margin-collapsing - http://www.howtocreate.co.uk/tutorials/css/margincollapsing
This is known as collapsing margins. They can be overcome by adding padding to the parent element (in this case, the <header>).
Code (with padding, without padding):
Notice the padding:0.001em;. This makes the margins no longer collapse, but doesn't add any space to the <header>.
header {padding:0.001em; background-color:#CCCCCC; width:960px; height:430px;}
#mydiv {width:960px; height:320px; margin:80px 0px 0px 0px; background-color:#CC0000; }
The link to collapsing margins in bfrohs answer helped me find a solution that will work for me, and it may help anyone else who gets this problem.
Absolutely positioned divs don't collaspe so making the header element relative and the inner div absolute gives the correct positioning without adding space with padding or margins.
Working example:
http://jsfiddle.net/8QPGJ/
(Without the positioning: http://jsfiddle.net/8QPGJ/1/)
i have a parent div, which can change its size, depending on the available space. Within that div, i have floating divs. Now, i would like to have spacing between these divs, but no space to the parent div (see drawing).
Is there a way to do this with CSS?
Thank you
I found a solution, which at least helps in my situation, it probably is not suitable for other situations:
I give all my green child divs a complete margin:
margin: 10px;
And for the surrounding yellow parent div i set a negative margin:
margin: -10px;
I also had to remove any explicit width or height setting for the yellow parent div, otherwise it did not work.
This way, in absolute terms, the child divs are correctly aligned, although the parent yellow div obviously is set off, which in my case is OK, because it will not be visible.
You can do the following:
Assuming your container div has a class "yellow".
.yellow div {
// Apply margin to every child in this container
margin: 10px;
}
.yellow div:first-child, .yellow div:nth-child(3n+1) {
// Remove the margin on the left side on the very first and then every fourth element (for example)
margin-left: 0;
}
.yellow div:last-child {
// Remove the right side margin on the last element
margin-right: 0;
}
The number 3n+1 equals every fourth element outputted and will clearly only work if you know how many will be displayed in a row, but it should illustrate the example. More details regarding nth-child here.
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
Note2: The :nth-child() selector is supported in all major browsers, except IE8 and earlier.
Add margin to your div style
margin:0 10px 10px 0;
http://www.w3schools.com/css/css_margin.asp
I'm late to the party but... I've had a similar situation come up and I discovered padding-right (and bottom, top, left too, of course). From the way I understand its definition, it puts a padding area inside the inner div so there's no need to add a negative margin on the parent as you did with a margin.
padding-right: 10px;
This did the trick for me!
Is it not just a case of applying an appropriate class to each div?
For example:
.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }
This depends on if you know in advance which div to apply which class to.
A litte late answer.
If you want to use a grid like this, you should have a look at Bootstrap, It's relatively easy to install, and it gives you exactly what you are looking for, all wrapped in nice and simple html/css + it works easily for making websites responsive.
I have a website with the following setup:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
I use the clearfooter and a footer outside the container to keep the footer at the bottom of the page when there isn't enough content.
My problem is that I would like to apply a box shadow on the container div in the following way:
#container {width:960px; min-height:100%; margin:0px auto -32px auto;
position:relative; padding:0px; background-color:#e6e6e6;
-moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8),
3px 0px 5px rgba(0,0,0,.8);}
#header {height:106px; position:relative;}
#content {margin:0px; padding:10px 30px 10px 30px; position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer {height:32px; padding:0px; position:relative; width:960px;
margin:0px auto 0px auto;}
As you can see its a drop shadow on on each side of the container div. However, in doing this, when the content doesn't take up the full height, there are still scroll bars caused by the shadow pushing past the bottom of the footer due to the blur.
Is there some way of preventing the shadow from going past the edge of the container div and causing a scrollbar?
Thanks for your help!
Webkit changed its behavior recently as pointed out here:
http://archivist.incutio.com/viewlist/css-discuss/109662
Indeed as of today it is still an issue in Gecko and maybe other browsers.
I managed to fix this nasty problem on Gecko using negative margins which also work on all other browsers.
Let's assume you have a screen-wide element (E) with box-shadow applied with zero offsets and blur radius R. Let's assume you are dealing with horizontal scrollbar problem because shadow causes element E to relayout with added width.
wrap E with helper wrapper element (W)
set overflow:hidden on W
set padding: R 0 R 0 on W
set margin: -R 0 -R 0 on W
The idea is to use overflow hidden to clip out problematic shadows on the left and right. And then use padding+negative margin trick to not clip top and bottom shadows and to keep the box on the same spot in HTML flow.
You can adapt this technique to clip out any arbitrary sides of your problematic shadow box.
On the parent element of #container, adding overflow: visible may fix the problem.
Though as general advice for the footer at the bottom, you may want to instead forget about setting the min-height on #container and instead set footer with position: absolute and bottom: 0 and give #container a margin-bottom so it doesn't ever get hidden behind the footer. If you're going for having the footer at the bottom of the window just use position: fixed instead.
Hope it helps.
Imho, and according to my tests seems that css shadow on an element is increasing both total width and height of the page ( if the surrounding element has width or height set to 100%) as you said and I haven't found a css workaround for this problem yet.
So I've a question for you, how are you keeping your footer at the bottom of the page?
and what's the width the footer has?
I've tried with absolute positioning ( as I'm used to do when I want a footer at the bottom of the page) but the problem It's the same with the width, of course you can set the width to a percentage like 90% but the problem remains...
here's a snippet that illustrate this simple concept
So this isn't a real answer, I've not found a solution for this yet
pastebin
Hope this's useful
Try adding padding-bottom:8px (shadow height + blur size) to the #container element.
Better solution for me at least, since it involves no wrapping element, is to place a clipping rectangle on the element with the shadow.
In the example above something like
clip: rect(-LARGE_VALUE -LARGE_VALUE auto LARGE_VALUE) would clip the drop shadow on the bottom only.
Well either the solution to this problem is very obscure or there is not a solution with the current technology. Its really too bad there is no way of accomplishing this as it is a common theme in web design.
I resorted to using a png shadow as it seems to be the only sane solution.
Not sure if this is the best solution as you have to add a container div, but if you wrap the element in a container div and set the overflow to hidden, it seems to work. You'll have to set padding where ever you want the shadow to be visible though.
I know it's not the best solution to this, but it works fine and I can't seem to figure out any other solution.
I have a div that is 100% height (ie full height on screen) and there was a box-shadow:
box-shadow: 0 0 10px rgba(0,0,0,0.4);
This was causing the scroll bars to appear, even though content was not longer than the screen.
All I did was to set a negative vertical offset:
box-shadow: 0 -10px 10px rgba(0,0,0,0.4); and that solved it.
Please add position: relative; in your shadow div, remove from header, content, footer. It's work in my side.
Two divs are next to eachother, both floating left within a wrapper. In IE and firefox they appear correctly, but in Chrome, the 2nd floating div clears down below Div A. When I remove "float:left" in the css, it goes to the correct position in Chrome, but clears down in IE and firefox (as it should). I dont know why it is appearing this way in Chrome. Any ideas?
The HTML and CSS would be useful to answer this.
If you have just two divs and you want them to float next to one another, then set a width on each of them and float one left and float the other right. Remember to leave some space in between the two.
in my case i use display:inline-table for the parent element of the floated elements.. Even if it is not a table.
I used the display:inline-table in order to fix the bug that google chrome had encountered..
I've same issue in Chrome and I solve it by giving display:inline-table to parent div
The solution is simple - just add the div which contains all these divs an attribute: display: table; - it should solve the problem.
I had multiple css float left divs with text links inside and the container was over lapping on the right of each. The fix was to remove space in the link display text. eg. ...> TEXT </a> to ...>TEXT</a>
You must give 1 div the height
For example
Div 1
.oneColFixCtrHdr #mainContent {
background: #FFFFFF;
width: 375px;
height: 0px; /* deze hoogte op 0 instellen, die bepaal je met de onderstaande div. */
position: relative;
display: block;
float: left;
padding-left: 10px;
margin-bottom: 20px;
padding-bottom: 0px;
padding-top: 20px;
}
Div 2
.oneColFixCtrHdr #maincontent2 {
background: #FFFFFF;
width: 390px;
height: auto;
position: relative;
display: inline-block;
float: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
padding-bottom: 0px;
padding-top: 20px;
padding-left: 20px;
border-left-style: groove;
In Chrome - Seems this issue has something to do with display attribute of parent element. I had same issue and did lot of search. Finally i got it fixed by removing display CSS attribute of parent TD tag. I also obsorved one wiered thing. When i had display:block; for parent a TD table element, in Chrome, colspan was not working (in IE it was working fine). I scratched my lots of hairs finding this problem.
I faced the same problem with Div and its Children Span both had float right, to solve i just added display inline to the Div parent and now it works fine in Chrome and Safari both.
I wrapped everything in <div style="display:inline;"> ... code .. </div> and solved the problem.
Without a code example this really is just guessing
I am not sure how Chrome works but I do know IE ads its own styles. Did you use a css reset? most cross browser issues can be fixed by this.
Sounds like the combined width of the 2 floating divs exceeds the width of the wrapper. Try setting the wrapper width to 100% or no width... or reducing the width of the two floating divs.
do you have any display: inline, block etc style properties set on any of those divs?
What about setting display:inline-block and the width for both divs?
EDIT: Setting a max-width of %50 for each one would work in all browsers except IE6, assuming there's no padding/margin set.
I've faced with the same problem. Chrome incorrectly displays divs with float. The block is displayed under the first. Not aside how I expected.
Solition is simple! Surround both blocks with div that no any other sisterly blocks inside.
I had a problem where I had a container div with a bunch of inner divs that had the float:left property set. My last inner div (most right) also wrapped down.
I fixed my problem by making sure that the combined inner divs with margins does not exceed the width of the container div.
Chrome's developer tool similar to firebug was great in helping me fix the problem.
For my container div I did not explicitly set a width but chrome's developer tool could show me the inherited width. I then looked at all the widths of the inner divs combined and then adjusted some of the inner div's width.
also similar issue with floating child div's. In my case .. I was floating a surrounding div to right, that contained h3 element (with text-align property) - followed by 2 child block elements.
Intent center h3 text, in relation to child block elements below it.
-
Problem? I did not have a set width for block child elements.. Why? I wanted the width to hold distinct padding on left / right relative to text amount in that container. eg. padding:10px 30px;
Solution I resorted to setting a width to surrounding and child divs, also center aligning text on child divs to give similar results of first case attempt.
I experienced the same problem. I had two divs with float: left inside a table td -- I had to set the table td style to include style="text-align: left;" for them to correctly align.
I'm no HTML hero so in my case the problem was really silly.
It was just a syntax error so be sure you check all your syntax before you start pulling your hair out like I did.
And SAFARI was completely ignoring it and displaying the divs correctly floated so I got really confused.
BASICALLY it was an unclosed div tag that was creating the problem :
<div class="seperator" </div> instead of <div class="seperator"> </div>