The Margin Issue
I am working with extra large block elements (2000-4000px for both width and height) and most of these elements overflow the window/viewport. That is fine and is the intended effect of my application. However, when I apply margin to the element on all sides, say 40px, it is applied only to the top, left, and bottom sides. The far right edge is flush with the edge of the window after scrolling over. I am looking to have an even margin on all sides of the block element.
The Code
See below or view this jsFiddle of a reduced test case.
<!-- HTML -->
<div></div>
/* CSS */
* {
margin: 0;
padding: 0;
}
div {
background: #000;
height: 3000px;
margin: 40px;
width: 3000px;
}
What I Have Tried
I have tried the above method, which I initially assumed would work, but it didn't. I have also tried applying a padding of 40px to the body element, and removing the margin from the div altogether, but got the same result. The same was true for a containing element with padding applied.
Any help would be greatly appreciated. Thanks!
How about making your div an inline-block element.
Add display:inline-block to your div and that should solve the issue.
See the updated fiddle- DEMO
Related
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
I am trying to set up a form that displays a vertical separator between two elements that appear side by side. These are the problem parameters:
The height of either element is unknown and will change by virtue of the contents being modified with JavaScript in response to user interaction.
The separator should cover the whole of the elements' shared vertical border, irrespective of which element happens to be taller at any given time.
Given the above it seems that this setup will do the trick:
<div>This is some text on top.</div>
<ol>
<li id="a">Lalalala</li>
<li id="b">Lololol</li>
</ol>
<div>And some text on the bottom.</div>
CSS
ol { overflow: hidden }
li { float: left; width: 5em; padding: 4px }
div { clear: both }
#a { background: gold; min-height: 100px }
#b { background: yellow; border-left: 1px black dotted }
#b { padding-bottom: 400px; margin-bottom: -400px } /* "infinitely" tall */
The idea is that the second element becomes "infinitely tall" by applying bottom padding and gets a left border; elements following the group are brought back into their original position by counteracting the padding with negative bottom margin; and the "unused" portion of the vertical border is hidden by giving the parent overflow: hidden.
This setup indeed works correctly (JsFiddle) on Firefox, Chrome and IE >=8 (my compatibility requirements):
However, when I try to apply the same technique in my real HTML Firefox breaks down and seems to not honor the overflow: hidden set on the parent element. As a result the infinitely tall vertical border bleeds through all elements following the two panels on the page.
Here is a JSFiddle of (simplified) real copy/pasted content together with my actual CSS rules that shows the problem. Note that only Firefox mishandles this; other browsers continue to display it properly.
Correct render:
Firefox render:
I am properly stumped: why would Firefox display the proof of concept correctly and botch the real deal? And how can I fix it?
I was able to fix your JSFiddle by changing the fieldset element to a div or by surrounding the fieldset with a div that had overflow set to hidden. Maybe worth a try. Is the fieldset tag essential to your HTML?
Something strange is happening with a margin setting in Firefox, I have a div with an id "wrap" with a top margin of 20px, when a user is logged in a div appears above the wrap div with an id of user_nav I don't want any margin above this div, but Firefox is for some unknown reaslon propagating the top margin I have on the wrap div to the user_nav div above it, it isn't happening in any other browsers.
If I remove the top margin from the wrap div it is removed from both.
I can get rid of it by giving the user_nav div a negative top margin, but that messes up all the other browsers.
div#user_nav {
width: 980px;
margin: 0 auto;
}
div#wrap {
width: 980px;
margin: 20px auto 30px auto;
}
Any ideas about what is happening?
Thanks
Rob Fenwick
It is indeed quirky behaviour - and it appears to be one of the effects of this old bug related to clearing block elements (or one of its many, many duplicates):
https://bugzilla.mozilla.org/show_bug.cgi?id=451791
One way to get around it is getting rid of the <div class="clear"> and using the overflow method of clearing instead (though that's not always possible, e.g. - obviously - if you have content inside the cleared element that will extend outside it):
http://www.quirksmode.org/css/clearing.html
I.e., remove <div class="clear"> from inside user_nav_frame and apply overflow: hidden (and width: 100%) to it in the CSS instead to clear the floats:
div#user_nav_frame {
background-color: #0A4D84;
overflow: hidden;
width: 100%;
}
JSFiddle: http://jsfiddle.net/69aD9/2/
There are counter-hacks too, if this won't work out in your case. See the above bug report.
I have boiled down my problem to a pretty simple single file with the CSS included in a <style> tag.
The problem is:
I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.
Now I want to position a "Site designed by.... " block just above the footer.
I want to use an absolute positioned div for this, which is positioned relative to the containing #content div, which must get the position:relative property to achieve this.
When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the #content block.
I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the #footer div would get the position:relative property).
But I just would like to understand what goes wrong here and why the floating column is hidden. See the links for the layouts without and with the relative positioned content div.
Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.
http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html
http://websites.drsklaus.nl/relativeproblem/index_withrelative.html
You were almost there! Heres a little help to finish it.
#main {
width: 1005px;
margin: 20px auto; /* shorthand margin for x and y axis */
border: solid black 1px;
/* Added background to main instead so it still covers the full background */
background-image: url('grey-repeating-background-4.jpg');
}
#content {
position: relative;
min-height: 500px;
/* made the padding here margin, made it slightly bigger to accomedate the right column */
margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}
The reason for your right column to hide behind the content is that before you put position:relative; on it it is in normal flow, not 'positioned' and so z-index priority is really just by DOM order. Positioning it just made it a whole lot more important; obscuring the right column.
I need to make sure that two elements always 100 pixels apart. There are no errors with my code, but for some reason the margin-bottom on the the P tag is set to 50 pixels and the margin-top on a DIV below it is also set to 50 pixels.
Instead of being a total of 100px apart, they are only 50. Can someone explain this? I do not have any floats on the page so it's not due to a clearing issue. All html and css has been validated.
This happens in the latest version of Chrome and FIrefox 3.6.
Here's an example of my code:
#content p {
margin-bottom: 50px;
}
#content #posted {
border-top: 1px dotted #ccc;
line-height: 20px;
margin-top: 50px;
}
Margins overlap on top of each other. The maximum margin of the elements will be the margin between two elements.
If this is not what's happening in IE, it's an IE bug, as this is how CSS was designed to work.
You could use padding instead, or just make sure the margin of both elements is 100px.
Margins do not stack like that. The bottom element only sets a 50px margin from the top element, not the top element's margin. Therefore you need to make the margins 100px.