I have a tag cloud with different font sizes.
<div>
<a style="font-size:15px;">tag1</a>
<a style="font-size:10px;">tag1</a>
</div>
And it looks like this:
alt text http://img69.imageshack.us/img69/5120/49274398.gif
Now I need to wrap each tag into its own div:
<style>
.cloud {float:left}
.tag {float:left}
</style>
<div class="cloud">
<div class="tag"><a style="font-size:15px;">tag1</a></div>
<div class="tag"><a style="font-size:10px;">tag1</a></div>
</div>
Which puts them all over the place. How to make them look like on the first picture?
alt text http://img26.imageshack.us/img26/7355/12644278.gif
UPDATE: Here is how it looks if I set fixed height for the .tag:
alt text http://img710.imageshack.us/img710/3385/59552565.gif
Replace
.tag {float:left}
by
.tag {display: inline}
Or was there some other reason why you were floating all the tags?
Perhaps increase the line-height or vertical padding of the smaller font-sizes. The reason it's happening is because the smaller ones are wrapping around the larger ones as designed in the specification, so by increasing the size of the area of the smaller elements, the wrapping should be prevented.
As an aside, is there any need to float the tags in the first place? Just putting them all in a row as normal in your first example would seem to have the same effect.
Related
sorry if this question looks duplicate, but those explanations were in some way different from what I was looking for.
I have a DIV that is displayed a table. It has two DIVs as cells which also have their own DIVs inside.
<div class="theTable">
<div class="theRow">
<div class="cell1">
<div class="cell1Content">
cell one content
</div>
</div>
<div class="cell2">
<div class="cell2Content">
cell two content
</div>
</div>
</div>
</div>
Now, when by any means (such as writing, or changing attributes), I enlarge the content of one of these cells (say cell2) instead of the content being enlarged from downward, and filling the area of the parent DIV (which is a cell), what happens is that the parent DIV actually expands from top. This behavior is not desired. I want the parent DIV to stay the same size, and the content to resize from bottom (downward).
I know this can be achieved using, position:relative, top:2em, but that's not what I am intending to do, because I do not want to disrupt the flow of the document, rather a simple answer as to how to get round this problem.
As in the case above, the CSS file is like this:
.theTable {display:table}
.theRow {display:table-row;}
.cell1 {display:table-cell}
.cell2 {display:table-cell}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}
If you change the last line (margin-top:0em) you'll see, it is not only the child that is changing size, but also the parent. I don't understand why? And what can be done about it?
So what you want is that the cells start from bottom to grow upwards right?
Something like this could solve it:
http://jsfiddle.net/7y19n8eh/
.theTable {display:table}
.theRow {display:table-row;}
.cell1 {display:table-cell;vertical-align: bottom}
.cell2 {display:table-cell;vertical-align: bottom}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}
What I did was to add vertical-align:bottom to the cells.
The vertical-align property sets the vertical alignment of an element and is compatible with all major browsers.
I have 2 divs I want to exactly overlap horizontally using negative margin-left.
HTML:
<div id=one></div>
<div id=two></div>
CSS:
body{margin:0px;padding:0px,border:0px}
#one {width:100px;height:100px;background-color:red;}
#two {width:100px;height: 50px;background-color:blue;}
#one,#two{display:inline-block;}
#two{margin-left:-100px;}
Before negative margin each div is 100px wide:
After negative margin the divs are 4px from overlapping exactly:
Why does setting a negative margin on the second div not cause it to exactly overlap the first div?
BTW, I'm just experimenting with margin-left...I know I can absolutely position the 2 divs inside a relative wrapper.
Thanks in advance for any enlightenment!
Inline elements are sensitive to their structure in your HTML. Since both divs are separated by a line break, they have a small "margin" between them like letters in a sentence would (which is pretty much the point of inline elements).
<div id=one></div> <!-- Here -->
<div id=two></div>
Change the structure of your HTML to remove this space:
<div id=one></div><div id=two></div>
Or you can use comments to negate the line break:
<div id=one></div><!--
--><div id=two></div>
Inline block has weird "bug" you could call it, that applies a 4px space between elements assuming a default font-size. This is created from the line-break between your div's. You'll find that you can fix this quite simply by making your negative higher.
margin-left: -104px;
This will fix your issue, but it's also not the only way to fix it.
You could do this... Instead of:
<div id=one></div>
<div id=two></div>
Delete the line-break between the div's so they are this:
<div id=one></div><div id=two></div>
This will also fix the issue.
You could alternatively set the font-size of their containing element to 0.
HTML:
<div class="container">
<div id=one></div>
<div id=two></div>
</div>
CSS:
.container { font-size: 0; }
But wait! There is more. You could comment out the line-break.
<div id=one></div><!--
--><div id=two></div>
You could drop the ending > to the beginning of the next element.
<div id=one></div
><div id=two></div>
Demo: http://jsfiddle.net/5qdZr/
I want that the first div containing a photo of the second row be "aligned to top" to the first div containing a photo of the first row, and the third div containing a photo of the second row must be "aligned to top" with the third div containing a photo of the first row.
Aligned to top of course with 5px margin set in css (#gallery div.placeholder)
html:
<div id="gallery">
<div class="placeholder">
<a href="#" title="" data-gallery="">
<img src="http://lorempixel.com/400/400/" />
</a>
[... repeat so on]
</div>
css:
#gallery{background-color:red;}
#gallery img{-webkit-transition: opacity 0.4s;-moz-transition: opacity 0.4s;-ms-transition: opacity 0.4s;transition: opacity 0.4s;width:100%;}
#gallery div.placeholder{display:inline-block;vertical-align:top;width:30%;margin:5px;}
PRE:
I NEED THIS:
You could float:left placeholder.
But it won't give you exact result you want.
I think you need to use a bit of javascript to absolutely position the elements.
or adjust margins (negative margin-tops)
the html code has to be the same like yours? the problem here is your display:inline-block and the order of the divs.
if only the result is important and not the given code structure i would change it to this:
jsfiddle
hope it helps
There is no simple, foolproof, CSS-only way of doing this for a general case.
Most people who achieve similar layouts use a JavaScript/jQuery plug-in/library such as:
http://masonry.desandro.com/
Alternatively, you need to create a 3-column layout either using a grid framework like Bootstrap or a HTML table (or display: table).
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 have the following code:
<div class="one">
<p>Test<p><span style="color: Green">▼</span>
</div>
This is a really easy question I think but I don't know CSS. How can I make the paragraph appear aligned horizontal in the center?
There are two issues here.
To center the DIV that contains the paragraph.
To center the paragraphs that come within the DIV.
To center the DIV, here's the code using inline styling:
<div style="margin: 0 auto" class="one">
<p>Test<p>
</div>
The above will center the whole DIV but NOT align the text to the center. Again, the div will only get centered if the class "one" has a width specified. Otherwise, it has no effect. You can also include the margin style info inside the class named "one".
Now, to align all text that appear within the DIV horizontally, you can style it like this:
<div style="text-align: center" class="one">
<p>Test<p>
</div>
And if you want to apply the centering style only for a single paragraph, you can include the the style rule within the <p> tag.
The margin solution with margin auto is suitable for floating block elements, but if it is only text within normal html you should look at this example here:
http://www.w3schools.com/css/tryit.asp?filename=trycss_text-align_all
you can use all of the following approaches
.One{text-align:center;}
or
.One p{margin: 0 auto;}
You can use the CSS.
margin:auto
your page should have this on it at the top inside the <head> tag
<style type="text/css">
.one p {text-align:center;}
</style>
If you want to center the entire div, and not the text, use this but be sure to set a width for the div.
<style type="text/css">
.one p {margin:0 auto; width:300px;} /*Change the width to what you need to*/
</style>
For vertical alignment, look into http://www.sohtanaka.com/web-design/vertical-alignment-css/