I know this is a common problem but I can't seem to find a solution that works. I have a setup like this:
<div id="wrapper">
<div class="content-area-top"></div>
<div class="content-area">
<h1>Title</h1>
some other text
</div>
</div>
.content-area-top {
height: 12px;
width: 581px;
background-image: url(images/content-top.jpg);
}
.content-area {
margin-left: 10px;
margin-right: 10px;
background-color: #e9ecfd;
}
The problem is that there is a gap between .content-area-top and .content-area. the .content-area-top div is sized to contain a background image that gives me the rounded corners that I want.
I know that issue comes form the fact that the H1 tag has a (browser default) top margin set (.67em), but I'm unwilling to set its margin to 0, and I don't see why its margin applies 'outside' its containing div.
I'm using chrome on Mac, but firefox has the same issue. This is probably some well-known fix, but I couldn't find a a solution specific to my case.
See here for a related question:
Why would margin not be contained by parent element?
in which a great article on margin collapse is presented:
http://reference.sitepoint.com/css/collapsingmargins
The article does have some pointers.
The answer is that the margin on H1 collapses with its parent(.content-area) margin (0 in this case), and so the parent div takes on the H1 margin. To prevent that, the parent div (.content-area) needs to have a padding set or a border or something set to prevent the collapse (which, in my case, brings my two divs together correctly)
Margins aren't supposed to collapse if there is a border between them. So you can add a hidden border to prevent margin collapse.
The following worked for me in my tested versions of FF, Chrome & IE.
<!-- Set the border-color to your background color.
If default white background colour use #FFFFFF -->
<div style="background-color: #8DB3E2; border-color: #8DB3E2; border-style:solid; border-width:1px; ">
<p >Paragraph 1 in blue box</p>
<p >Paragraph 2 in blue box</p>
</div>
<!-- No space here thanks -->
<div style="background-color: #9BBB59; border-color: #9BBB59; border-style:solid; border-width:1px; ">
<p >Paragraph 1 in green box</p>
<p >Paragraph 2 in green box</p>
</div>
Try giving a valid doctype. It worked for me :)
Refer this : A list apart has said it beautifully!
Yogesh
Try this approach:
#content-area-top {
width:581px;
height:12px;
float:left;
background-image:url("images/content-top.jpg");
}
#content-area {
width:561px; /* substract margin left & right values from it's width */
float:left;
display:inline; /* prevent ie6-double-margin bug */
margin:0 10px;
background-color:#e9ecfd;
}
#wrapper {
width:581px;
float:left;
}
Related
I just learnt a new "css hack" from my teacher. But he don't know why it works.
I'll explain:
I've on my website a gap (the green line) which I don't want to appear:
the grey one is the nav element, the black is a div which contains the p-tag "some content" which make this gap because of his margin. (I'll post the code at the end of the question).
My solution would be just delete the margin. But my teacher telled me another way. He added overflow: hidden; to the div which contains the p, and poff, the gap is gone.
But how is this possible? Why do overflow affect the margin of an element?
Here's a example code plus a codepen demo:
http://codepen.io/anon/pen/JdQaYv
.container,
.header,
.content{
margin 0;
padding: 0;
}
.container{
background; green;
}
.header{
background: red;
}
.content{
background: yellow;
}
.overflow{
overflow: hidden;
}
<div class="container">
<div class="header">
Header
</div>
<div class="content">
<p>Contentcontent</p>
</div>
</div>
___________________________________________
<br />
<div class="container">
<div class="header">
Header
</div>
<div class="content overflow">
<p>Contentcontent</p>
</div>
</div>
The browser always collapses the margins with the nearby margins. When you give an overflow: hidden, it calculates all the contents inside it's box model and makes it confine to the content.
Explanation for BoltClock and anyone else. Sorry about my quick dirty handwriting...
This is the same case with floats too. Floated items do not occupy any space. Have a look here:
div {padding: 5px; border: 1px solid #666;}
<div>
<div style="float: left;"></div>
</div>
But the same thing, if the parent has an overflow: hidden it doesn't happen:
div {padding: 5px; border: 1px solid #666;}
<div style="overflow: hidden;">
<div style="float: left;"></div>
</div>
A whole big article about this concept here: What You Should Know About Collapsing Margins. The overflow is such a powerful property that it works for everything. But when it comes to position you need to use it carefully!
The position works like float, in the way that both do not take the layout. For eg., see the below snippet:
div {padding: 5px; border: 1px solid #666;}
<div>
<div style="position: absolute;"></div>
</div>
Where, if you play with it in the wrong way:
div {padding: 5px; border: 1px solid #666;}
<div style="overflow: hidden; position: relative;">
<div style="position: absolute;"></div>
</div>
The contents above get cut. Hope it is clear.
overflow: hidden causes the container element to establish a block formatting context, which blocks parent-child margin collapse (though not other forms of margin collapse). This effect is mentioned explicitly in the section on collapsing margins:
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
As a result, the margins of the p element do not bleed out of the content box of its parent.
You would delete, or zero out, the margins if you absolutely do not want any margins surrounding the p element. Blocking margin collapse between the p element and its parent does not remove the margins from either element.
I need to make a block-level element sit outside it's content area. The content area has a margin round it of 10px; which means that (as expected) the items within sit with a 10px edge around them. I need to eradicate this edge, but keep the 10px margin (as it's needed elsewhere on the site.)
I've put together a colour-coded JSFiddle to help which makes a lot more sense. Essentially, keeping the HTML and the CSS for the margins as they are, I need my red h2's to expand to touch either edge of the viewport, as though they were 100%.
How can this be acheived? I know that using negative margins is possible but I cannot seem to make it work.
<div class="contentMain">
<div class="mobCategory">
<h2>Item one</h2>
<h2>Item two</h2>
<h2>Item three</h2>
</div>
body{
background-color:orange;
}
.contentMain{
background-color:olive;
margin:10px;
}
.mobCategory h2 a{
background-color:red;
Add the negative margins to your h2:
http://jsfiddle.net/SxbZe/6/ (note that the body has had its margin set to 0)
.mobCategory h2 {
margin-left: -10px;
margin-right: -10px;
}
You can kind of hack it by adding negative margin and padding to counter the difference:
.mobCategory h2 a {
margin-left: -10px;
padding-right: 20px;
}
JSFiddle example.
I'm working on a project to better my knowledge of Spring MVC practices. To do this, I've been creating a very scaled down version of Twitter. Basically, a user can sign in and post a little blurb and also see a timeline of their previous blurbs and all their follower's blurbs.
I have a background image across the whole page and a container in the middle with a light blue background for just the post blurb box and the timeline. The light blue background only goes to the bottom of the visible page. If the timeline goes down past a single page view where you have to scroll down, the light blue background stops at the bottom of what was visible on the initial load.
I have my page defined like this:
The div class=blurb is the blurbs in the timeline.
<div id="container">
<div id="mainPanel">
<div id="timeline">
<div class="class="blurb"">
<span class="user">test</span> <span
class="displayName">Test User</span> <span class="bodytext">This is a small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
<div class="blurb">
<span class="user">admin</span> <span
class="displayName">Test admin</span> <span class="bodytext">This is another small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
</div>
</div>
</div>
The CSS style for the container is shown below.
#container {
width: 650px;
height: 100%;
margin: 0 auto;
padding: 10px;
background-color: #DDEEF6;
}
Can I modify that container CSS in a way to make it be as long as the timeline is? The timeline grows with every blurb post.
Screenshot with height defined to 100%
Screenshot with height undefined
UPDATE:
Okay, so it absolutely has to do with the floats. Thanks to the two commenters below. The #socialPanel is defined as such:
#socialPanel {
width: 250px;
float: right;
}
Using Chrome's developer tools, if I clear the float is drops the social panel below my blurbs/tweets and moves the light blue background all the way down the list of blurbs.
Any suggestions on what I could research to keep the socialPanel floating left at the top, but still have my light blue background use all the available height? Many thanks on helping me figure it out this far!
UPDATE TWO:
I combined the methods shown in the answer below to solve my problem. I added a div with class clearer with clear:both; and then removed the height: 100%; from the #container styling. This resolved the problem.
NOTE:
Adding the overflow: hidden; to my container's styling made the page cut off after the light blue area, it did not make the light blue area go all the way down.
Many thanks to all the help! I'm still learning and it was all very appreciated!!
Place overflow:hidden on the #container.
How does it work?
One would think placing this style on a container would hide the floats instead of containing them. What actually happens is that overflow:hidden makes the element establish a new block formatting context. This fixes the float containment of any children floating within it. This CSS fix is more practical then including an additional element in the HTML styled with clear:both and works on all modern browsers, including IE7+.
You probably just need to add a clearing div after your two inner divs. http://jsfiddle.net/c3vTU/1/
<div class="outer">
<div class="inner-left"> Stuff on the left</div>
<div class="inner-right">Stuff on the right <br/><br/></div>
<div class="clearer"> </div>
</div>
CSS
.outer {
width: 520px;
padding: 10px;
background-color: #eee;
}
.inner-left {
float: left;
width: 300px;
background-color: red;
}
.inner-right {
float: right;
width: 200px;
background-color: yellow;
}
.clearer {
clear: both;
}
As #MichaelIrigoyen noted, you can also just add overflow: hidden or overflow:auto (I think makes more sense) to your container. http://jsfiddle.net/c3vTU/4/ This is cleaner and I love it!
If you simply remove the height declaration (height: 100%;) from #container, it will expand as its children do (and the background of course, too).
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS properties being passed up to the parent element when the DIV is empty
I'm a newbie for CSS layout design.
What I'd like to do at the moment is that I want to make two Div boxes, one nested inside one another. Anyway, my problem is the top margin I set to the inner box didn't behave the way I wanted.
Pls take the portion of script below for example:
[demo.html]
<html>
<header>
<title>Mock-up page</title>
<link href="stylesheets/demo.css" rel="stylesheet" type="text/css">
</header>
<body>
<div id="box1">
<div id="box2">div 2</div>
</div>
</body>
</html>
[demo.css]
#box1{
width: 300px;
height: 300px;
background-color:#0000FF;
}
#box2{
margin-top: 30px;
background-color:#008000;
}
The effect it produced was it only pushed the outer box 30px down from body tag (left-sided in the picture), which wasn't what I had expected (right-sided in the picture).
What was the reason why this happened and how to correct the styling?
Change the margin-top to padding-top will do what you want.
This is a know issue in many browsers.
When the first child of an element has a margin-top (no content before it) the margin overflow the top of the parent element and pushes it like in your case.
Other solutions exists, but all of them are a bit hacky:
Apply a position: relative to the child and change the margin-top to a margin-bottom and apply top: 20px;;
Create an element before the inner box with some content ( can be used here) with height: 0; and overflow: hidden;;
Set a border-top: 1px solid transparent or the same color of the background of the element (in this case, pay attention that the border is added to the height of the object;
and so on...
You could add position: relative to #box1 and position: absolute to #box2.
See this example
CSS Positions Explained
CSS
#box1{
display:block;
width: 300px;
height: 300px;
background-color:#0000FF;
border:solid transparent 1px;
}
#box2{
margin-top: 30px;
background-color:#008000;
}
HTML
<div id="box1">
<div id="box2">div 2</div>
</div>
If you keep the outer box empty (no text node) then it's doing this behavior and to be honest I didn't understand why, but I found it here why it does so and it's known as collapsed margin and I've added border:solid transparent 1px; to soleve the issue but alternatively you can use padding for outer DIV. Here is also an answer on SO.
Demo.
This article by Chris Coiyer does a good job of explaining box-sizing. Understanding that will help you.
For me, one of the most useful features of tables is that their width adjust to its content.
You can very easily do things like:
<table align=center style="border: 1px solid black">
<tr><td style="padding: 20px">
some text here
</table>
If the content of that box is wider, the box will be wider. Very intuitive and it works on ALL browsers, period.
You can achive something similar for normal block elements by using the float CSS property, i.e. their width adjust to its content. But the element will not be centered.
So, the question: How can you center a block element and make that element to adjust its width to its content in a cross-browser manner?
The modern way is to specify display:table and the workaround for IE is having a parent element and text-align:center on a inline/inline-block:
<div id="for-ie">
<div id="el">whatup son</div>
</div>
<style>
#el {
display:table;
margin:0 auto;
}
/* for IE, throw this in a CC */
#for-ie { text-align:center; }
#el {
zoom:1;
display:inline;
}
</style>
Demo
Here's a quick tutorial I wrote on this subject: http://work.arounds.org/centering-block-level-element-variable-width/
I'll lengthen it when I'm not sleepy.
Quoting CSS: The Definitive Guide by Eric Meyer
If both margins are set to auto, as shown in the code below, then they are set to equal lengths, thus centering the element within its parent:
p {width: 100px; margin-left: auto; margin-right: auto;}
Setting both margins to equal lengths is the correct way to center elements, as opposed to using text-align. (text-align applies only to the inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it.)
In practice, only browsers released after February 1999 correctly handle auto margin centering, and not all of them get it completely right. Those that do not handle auto margins correctly behave in inconsistent ways, but the safest bet is to assume that outdated browsers will reset both margins to zero.
However,
One of the more pernicious bugs in IE/Win up through IE6 is that it actually does treat text-align: center as if it were the element, and centers elements as well as text. This does not happen in standards mode in IE6 and later, but it persists in IE5.x and earlier.
If your intend is to display just some text at the middle of the page, you can use something like this:
<div style="text-align:center;">
<div style="background:red;display:inline;">
Hello World!
</div>
</div>
The first block will align contents to the middle. The second will fill the height equal to its contents, since display:inline will force the <div/> block to behavior like a <span/>, ie. adjust its width to content, and not to the remaining space.
Note this is limited to single line text only (like "some text here").
Use this CSS
#content {
position: absolute;
width: 150px;
margin-left: -75px;
left: 50%;
border: 1px solid #000;
text-align: center;
padding: 20px;
}
and this html
<div id="content">
some text here
</div>
Good golly, miss Molly! These answers are really overcomplicated.
CSS:
div.centered {
width:100%;
margin:0 auto;
text-align:center;
}
div.centered span {
padding:20px;
border:1px solid #000;
}
And then use this in your body:
<div class="centered"><span>Hello world!</span></div>