I have simple HTML and CSS as following. I notice the bottom margin collapse between .outside box and .inside box. I don't understand why i can't see the background image when bottom margin collapse, background image should nothing about margin.
Thanks :)
<div class="outside">
<div class="inside"> content </div>
</div>
.outside {background:url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat; padding-top:1px;}
.inside { background:#00CCFF; margin:0 0 10px 0; padding:0 0 20px 0;}
You are experimenting vertical margin collapse between your nested divs
Include this overflow property (any value not equal to visible will do the job), and it will work ok
.outside {
background:#ff0000 url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat;
padding-top:1px;
overflow:hidden;
}
The red color was added only to test the result. Of course you can wiped.
Detailed comment
Your outside div uses a sort of yellow strip at its left bottom.
Your inside div has a bottom margin of 10 px and as there is nothing in between this margin and the outside div bottom margin. Thats why they are collapsing.
You could prevent this to happen including a bottom padding or even a bottom border to outside div. But this would change your design intentions.
That is why I suggested using the overflow property which also prevents the vertical margin collapse and does not interfere with your design.
In this fiddle I added a left margin to the inside div and a red background to the outside div.
For didactic porpouse I also included a transparent background to the inside div.
Vertical Margins collapsing
Prevented by overflow:hidden
Play with it. Delete the overflow property and watch vertical margins collapsing.
I hope is clear enough for you.
Have a good day and enjoy your coding :-)
Related
I am coding a two column layout, (980px width in total) which will have the background of each div in the columns expanding all the way to left/right side, see screenshot.
So on the left I have a blue div with width: 49%, inside it is div with text, which should expand to 470px (to keep the text aligned in overall max-width: 980px div), and scale down when the viewport is getting smaller (screenshot).
Is there a way of keeping the div expanded like on the screenshots from photoshop but also aligned right in the parent, blue div? What I am getting with float:right and max-width: 470px is this :(
So basically, you want to right-align your div inside the blue div.
Use this :
HTML
<div id="someid">
<p>Some text here</p>
</div>
CSS:
#someid {
margin-left : auto;
margin-right : 0;
}
Let's assume the following html markup:
<div id="container">
<div id="inner"></div>
</div>
I would like the inner div to be centered in its parent (container) while if there is not enough space in the viewport, it should gradually go to negative left margin upto -XY px.
The situation is:
I have a container div that always has a plain background. In this div I have another div that has a ribbon as a background and contains the navigation. If the viewport is wide enough, I want to show everything (=from the inner div) centered on the page. So far no problem by setting margin: 0 auto to the inner. However, when the viewport is less than the ribbon's width, I would like to "cut off" the ribbon on the left side (logically, on the right it is automatic) to the point where it "bends", that's the point where the buttons of the navigation begin (169px from left). I have come up with this:
#container {
height: 240px;
position: relative;
background: url("../images/top_noise_bg.png") top left repeat #222;
margin-left: -169px;
margin-right: -169px;
}
The margin works as intended when the viewport is large enough. When it is too small, the left side works just right, however the negative right margin cuts the *top_noise* background off on the right side when I scroll there. Also it creates another undesired effect: the page will always have horizontal scrollbars. Any advices how to solve this? Thank you!
jsfiddle example -> resize the area to very small, then scroll to right of the red div.
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/
HTML:
<div> <p></p> </div>
CSS:
div { background-color:green; border-top:1px solid white; }
p { background-color:yellow; height:50px; margin:70px; }
Demo: http://www.jsfiddle.net/Xy8QF/4/
Why is the area above the yellow paragraph green, and the area bellow it white?
btw I already figured this out, but I thought I'll post this anyway. Consider it a riddle :)
Update: Just to add to the accepted answer:
Only vertical margins collapse
The margins will not collapse if the outer element (in this case the DIV) has a padding or border
This happens because the margins of two block elements with position:static (the default) collapse as per CSS 2.1 8.3.1, i.e. the margin is "carried over" to the body element. This demo shows it does not happen with absolutely positioned elements, one of the exceptions (along with a non-none border) listed in the aforementioned standard.
Good question. :) You can solve it by giving the div a bottom border, or if you don't want to, by giving it a height of 100%. ;-)
The area above the yellow paragraph as you put it, is not actually above it. The green div contains the yellow paragraph. The yellow paragraph has a margin of 70px, pushing away from the green edges of its container. The yellow paragraph has a height set to it, hence we cannot see the yellow pushing away from the green on the bottom edge.
It's because the <p> is right against the bottom of the enclosing <div>. Since there's nothing constraining the height of the <div>, the rendering gives just enough space to fit down to the bottom of the <p>. Any explicit height > 50px will show the bottom.
Yup, on the update, exactly. The box expands vertically, but not horizonally. Also, padding puts space on the inside of the box, so the p can't push right up against the bounds.
Read up on the CSS box model, for example here:
http://www.w3schools.com/css/css_boxmodel.asp
and here: http://www.w3.org/TR/CSS21/box.html
I have to create a div that has a paper texture to it, with rounded corners. When the content inside grows, this div should grow along with it and not ruin the bg..
So to do this, I made the main div with the content, and made it repeat the center of the bg and set the height to auto. I made a div for the top and bottom parts of it with the textures and rounded corners. I used absolute positioning relative to the content div so when it grows, the bottom bg will be below the content div at all times.
Everything looks good BUT, the top and bottom divs are covering the content div. I can fix this by leaving a large gap at the top and bottom of the content div but it looks strange having such a large gap.. and its improper.
Any ideas around this?
Try adding a margin to the top and bottom of the content div (ie. margin: 20px 0 30px 0; where 20 is the height of your top div and 30 is the height of your bottom div). Also, can't you just put the three divs in a container and position them relatively, one stacked on another?
Example:
<div id="container">
<div id="top"></div>
<div id="content"></div>
<div id="bottom"></div>
</div>
It´s hard to say without looking at your code, but I think your problem can be easily solved by adding a top and bottom padding to your main div, the size of the top and bottom parts.
Edit: An alternative would be to put your content in another div in the main div and abandon absolute positioning. Just put all three divs one after the other and use negative margins to pull the content up over the top div and do something similar for the bottom border.
Use z-index: http://www.jsfiddle.net/xPEY6/
(Per the CSS spec you don't actually need the .text div, you could set .top and .bottom to z-index: -1 and .container to z-index: 0, but I wouldn't rely on all browsers implementing that detail correctly.)
You can do this with positioning:
div.paperTexture {
position: absolute;
top: 0px;
bottom: 0px;
}
Also works well if you need the div to take up 100% of the viewport minus Xpx. Just set the top or bottom to Xpx.