This is kind of trivial, but I have a frequent problem with divs and images that are separated by spaces when they ought to nest flush against each other.
Below is some code I'm wrestling with right now. As you can see, the second div (class Shadow2) contains an image, followed by a div containing text. The class Black gives the caption a black background. Thus, visitors should see nothing but an image above a black box with white text. Instead, the default background color of Shadow2 can be seen between the img and the caption div.
<div class="Cool R P Max300">
<div class="Shadow2">
<img src="">
<div class="Caption Black">Text</div>
</div>
</div>
I added styles setting all images' border and padding to 0 and setting div.Caption's top margin to 0, but it doesn't change anything.
I could fix the problem by applying relative position to the image and lowering it a few pixels, but that seems like a pointless fix for what must be a common bug. Can anyone tell me what's going on here? Thanks.
There is probably some white-space causing this line break. Simply setting the image to display: block; solves the issue.
Also, don't forget to close your img tag (<img src="" alt="" />), but that's not related to the white space.
See it here: http://jsfiddle.net/fkfF7/
The other, hackish solution, is to put font-size: 0; on the parent div. Of course, you'd have to specify the font size for you caption div then.
Here's that one: http://jsfiddle.net/fkfF7/1/
Related
This is the page: http://aszx.altervista.org/aatest/
As you can see from the source code, the #news, #news-1 and #news-2 have this rule:
background: #F2F2F2;
Could you tell me why the background doesn't change and it's still white ?
I have noticed that the background change when I resize the browser's window.
It's because the floats are causing the div to not be of any height. You need to add a clearfix class to the elements you're trying to set the background to.
<div class="col-md-10 center-block clearfix" id="news">
This will cause the #news div to clear itself, thus making its height encompass the contained div elements. Do the same for your other containing elements as well.
I've just created some articles in an HTML5 file. Those articles contain images. The articles also have a border at the bottom.
Now I have this problem that whenever you re-size your window to make it larger, the images go outside the border. I want the border to re-size with the image.
Here's an example of how an article looks like in my page:
<article>
<p>
<img image />
</p>
<p>
text
</p>
</article>
The p-tag with the image inside floats left, the p-tag with text floats right next to it.
To be more clear: I want the article tag to resize to the height of the image.
Just guessing, without seeing a working example or any of your CSS, but adding overflow: auto to the article element will cause it to contain its floated children:
article {
overflow: auto;
}
Example that may or may not relate to the CSS we can't see: http://codepen.io/paulroub/pen/opnfG
Can anybody explain why no background color is displayed in the outermost div in the space of the inner div's margin?
<div style="background-color:yellow;">
<div style="margin-top:10px;background-color:black;color:white;">
Why isn't the background color yellow inside my top margin?
</div>
</div>
Divs are block elements, but they take up no space on their own (other than creating a line break) so your inner div is filling all available space within the outer div, masking the yellow background. Add some padding to the outermost div and you will see the yellow.
This is known as "margin collapse".
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
As found in other answers, adding padding or border to the parent will prevent the margins collapsing.
I also had success applying the following CSS to the container, based on tarkabak's method described here. (Please note limited browser compatibility of :before and :after.)
.prevent-margin-collapse:before,
.prevent-margin-collapse:after
{
content: "\00a0"; /* No-break space character */
display: block;
overflow: hidden;
height: 0;
}
<div style="background-color:yellow;" class="prevent-margin-collapse">
<div style="margin-top:10px;background-color:black;color:white;">
Why isn't the background color yellow inside my top margin?
</div>
</div>
http://jsfiddle.net/yCHkW/
In addition to the other answers: This is a matter of collapsing margins. The section "Collapsing Margins Between Parent and Child Elements" should apply in this specific case.
Update: Here's a statement regarding this topic taken directly from the box model specification of CSS3 (you can find almost the same sentence within the CSS2 specification as well):
Certain adjoining margins combine to form a single margin. Those margins are said to “collapse.” Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them.
To achieve what you want to see change your html as followed:
<div style="background-color:yellow; padding-top:10px;">
<div style="background-color:black;color:white;">
Why isn't the background color yellow inside my top margin?
</div>
</div>
The reason is that the outer div has no width set and just takes the size of its content.
I would imagine it has something to do with not inheriting any properties from elsewhere.
<div style="background-color:yellow; position: fixed;">
<div style="margin-top:10px;background-color:black;color:white;">
Why isn't the background color yellow inside my top margin?
</div>
</div>
http://jsfiddle.net/rJ3HG/
I didn't have code to show my question but I pulled some off the w3schools website. Here's an example they give you to play with clear.
<style type="text/css">
img
{
float:left;
}
p.clear
{
clear:left;
}
</style>
</head>
<body>
<img src="http://www.w3schools.com/cssref/logocss.gif" width="95" /><p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
My question is about using the clear property. Why is it that you can't move the cleared element DOWN any farther away from the floated element that comes before it?
Meaning, let's say I wanted there to be a couple of blank lines between the text paragraph and that image for whatever reason. Page breaks don't seem to work.
If I add relative positioning to the paragraph and give it a larger top margin, that works BUT in the example I had that I no longer have to show you anymore, it was a cleared div under a floated div, not a cleared paragraph under a floated image, and in THAT case, even relative positioning to add a margin didn't work.
What, exactly, does clear do to how the element you apply it to flows with the rest of the document? I know what clear DOES. I know it's saying which side no previous floated object can be on but what does it do to the element ITSELF? Does a cleared element get attached to the same flow as the floated elements somehow?
The clear property specifies which sides of the element's box cannot be adjacent to floated elements, and only does so when these floated elements are in the same block formatting conext.
From SitePoint:
Clearing adds space above the cleared element's top margin until it's
clear of the affected floated boxes. As a result, we can’t use the top
margin on the cleared element if we want a specific amount of space
between it and the floated box.
Attempting to put other elements that have not been cleared after the floated elements will essentially keep in them in the same context. This has to do simply with the way floating works.
If you wanted to put blank lines in between the image and the paragraph, I'd add a margin-bottom to the img element:
<style type="text/css">
img
{
float: left;
margin-bottom: 10px;
}
p.clear
{
clear: both;
}
</style>
</head>
<body>
<img src="http://www.w3schools.com/cssref/logocss.gif" width="95" />
<p>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
I could go on, but I think this will tell you everything you need to know about floating and the CSS clear property:
http://reference.sitepoint.com/css/floatclear
And on that note, I highly recommend against w3schools, as they are known to have faulty information. See:
http://w3fools.com/
Just but a <br class="clear" /> in front of the paragraph, or add a top margin to it.
I have a div (sub area of page with scroll bar) that has some text, an image and a table.
The background color defined for the div -
<div style="background-color: white">
does not fill the area to the top, the top arrow of the scroll bar is above the area filled with the background color (by about the width of one line). Adding a br at the top fixes it, but moves stuff too far down.
I read two potential solutions. One suggested I set a fixed height for the div. That would require changing the height by trial-and-error every time I changed the content of the page. Next. The other suggestion said to add this at the end, just before the /div -
</div>
<div class="clear"></div>
</div>
but that has no effect.
There are several different pages that get loaded into the scrolling area, using SSI's, and some of those included pages use divs, and some of those are floats and some absolutes.
Thanks for any help.
EDIT
Adding the following, which I didn't realize was needed with the "clear", still doesn't work
<style type="text/css">
.clear {
clear:both;
height:1px;
overflow:hidden;}
</style>
Ad
I just wrote this up and it seems to keep the background color no matter how much content you put in it...
<div style='background:#abc;overflow:auto;'>
<p>a bunch of content goes here</p>
</div>
you can, of course, set a height to that but more likely it would be in some div wrapper...