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).
Related
Let's say I have this structure:
<div className="row">
<div class="col-sm">
<div>TEST</div>
</div>
<div class="col-sm">
<div>TEST<br>TEST<br>TEST</div>
</div>
</div>
Basically, I know how to make the columns of the same height (using the .equal class on the row) however, what I need is the child div of the column to also be of the same height. Currently, if one of the child divs is shorter, it won't look aligned because I set the background color to be in the child div and not on the col-sm div.
I cannot set the background on col-sm for flexibility reasons. E.g. I may need to use that child div component in another section that doesn't use 'col-sm'.
Mine currently is the one on top, I want it to become the one at the bottom:
A situation like this, for me, would be time to turn to jQuery or a plugin such as MatchHeight.
matchHeight makes the height of all selected elements exactly equal.
I would need advice on how to do that I have reached the correct result. Here is a sample code.
I used the main attribute table-cell that I reached the vertical centering, but not me centered DIV #box under DIV #wrap. Neither ANCHOR vercital centering under DIV #box. ANCHOR object must align automatically without specifying the size. Images under ANCHOR may have different sizes.
All ANCHOR objects under DIV #box must align automatically without any separation into DIV blocks. Into DIV #box are automatically displayed those items that can fit in there. Sorting may not be conditional size and neither the number of items. The only condition is the height and width of the DIV #box.
Example:
Main structure
Sequence ANCHOR must not be fixed specified or limited to the number; automatically centered on all sides under DIV #box; automatically adjust the image size.
DIV #box must be aligned horizontally to center under DIV #wrap, has specified a
fixed width and height; the entire contents of the DIV #box must be aligned to the center, both horizontally and vertically; everything that does not fit in the block will be automatically hidden.
It may also be a solution via jQuery.
Thanks for resp.
If you don't allow separation in additional DIV wrappers, then it is impossible to achieve your result cleanly and with reusable non-hard-coded code.
You restrict development options (probably not your fault) by not allowing to change HTML structure.
But if there were no restrictions, then there would be multiple ways to solve this problem:
Using HTML and wrapping little objects into group wraps and a bit of CSS
Hard code CSS with negative margins, relative positioning for every single element
Achieve the same thing with jQuery / JavaScript but with lots of exceptions and computations
Because elements in HTML can be of 2 types - block and inline .
[ let's not go here into specifics of what inline-block elements and other types are]
If an element is of block type then the next proceeding element will jump to the next row , but if the element is of type inline then the next element will line up next to it if there is space in the row. The height of the row is dictated by the highest element AND NOT by a group of highest elements .
The only way to achieve that would be to wrap them into a group.
So in CODE this would look like so:
HTML:
<div id="box">
<img src="" /><p>TEXT</p>
<img src="" /><p>TEXT</p>
<span id="group">
<img src="" /><p>TEXT</p>
<img src="" /><p>TEXT</p>
<img src="" /><p>TEXT</p>
</span>
</div>
CSS:
#group {
display:inline-block;
vertical-align: middle;
}
#group > :first-child {
display:block;
}
RESULT in jsFiddle
Let´s say I have following mark up and CSS:
HTML:
<div id="Container">
<div id="Content">
[* some text *]
</div>
</div>
CSS:
#Container {
height: 400px;
overflow: scroll;
}
#Content {
height: 800px;
}
Obviously this set up invokes a scrollbar to possibly scroll down 400px. I created a jsFiddle for a better understanding.
Is there a way to jump to the second paragraph by CSS only?
I added a javascript command to demonstrate what I want to achieve. Just uncomment and run it.
There are two things that I have tried so far, but in both cases I was not able to scroll up anymore:
Setting the margin-top attribute of the inner div container to -180px
Setting the inner div container to position: absolute and top: -180px
Note: I do not care for the paragraph or any content. This is just an example. I want to jump to an arbitrary position.
Edit:
Anchor tags are not an option. I do not want to flood my mark up with unnecessary tags.
How about the humble 'a' tag?
jump to one
jump to two
<a name="one">this is one</a>
<a name="two">this is two</a>
Not with CSS, but with standard HTML/anchors.
http://jsfiddle.net/r6vn7/3/
paragraph 2
Give your paragraph an ID and use the URL hash to say where to go to. I used an anchor as an example how to make it jump to the second paragraph.
I am trying to make something look like following (don't concern color here. my concern here is the shape);
I tried something with following code but didn't succeed!
<html>
<head>
<style type="text/css">
#header{border:3px solid gray;padding:10px;}
#header-left-container{border:1px solid gray;float:left;width:30%;}
#header-right-container{border:1px solid gray;float:right;width:69%;}
</style>
</head>
<body>
<div id="header">
<div id="header-left-container">
pooo
</div>
<div id="header-right-container">
bla bla bla.....
</div>
</div>
</body>
</html>
I know this can be done with table easily but I don't wanna use table in my application where I can do the same with div elements.
any suggestion here?
http://jsfiddle.net/j4DnG/7/
What you need to do is clearing the area arround the 2 floated divs.
Doing this by modern technuiqe is giving the parent the property of Overflow:Hidden or Auto (what ever fitting you more. I recommend hidden)
In the past people user clearfix (google on that). Todays we use that approach.
As well people used to put clear:both after the creation of the two elements. That has a negative side- 1 more element in the dom.
You need to add overflow:auto; to the #header css; without that divisions don't expand to contain floated elements.
your code looks fine...
suggestions:
Just Add clearfix after floating divs so as they will be contained inside the parent object like:
<style>.clarFix{clear:both;}</style>
<div class="clearfix"></div>
Add
<br style="clear:both" />
after second div. Or make the container div float: left. Or use one of the css frameworks if You don't want to become css master before You create a webpage. One is http://960.gs/
Do you use firebug? go on twitter.com and see how they have defined a left and a right container is the style sheet . They're not using table to implement it. just div
Just replace the float: right; declaration with a margin-left: 30%; declaration for #header-right-container. You don't need to float both of them. This way, you will only need to clear floats if the left block is taller than the right block. See this fiddle.
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.