I have searched for several things, but i just couldnt find the answer. Maybe you could help me out.
I want to align div elements like on Pinterest. Not all divs are the same height, but the gutter width stays the same. I am designing something and i would like to program it as well.
Here is an image of what I mean, for clarification: http://nl.tinypic.com/r/ekkkte/8
Graphicburger.com uses the same thing I mean to do. I just want to know how one would align his content like that.
Well, one way to achieve this is by using Masonry. I think this is what Pinterest actually uses for their layout. This also happens to work jQuery, if you are using that as well. If you are looking for more on the theory behind this, check out this link
The following is the demo code from the Masonry plugin/library link:
HTML
<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>
<script src="/path/to/masonry.pkgd.min.js"></script>
CSS
.item { width: 25%; }
.item.w2 { width: 50%; }
Javascript
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
i have answered a very similar post few days ago.. with sample code of html and css: How to create grid position elements like in this image css
mind to take a look?
Related
I'm new to html and css. I've gotten a college assignment to create a webpage and i went somewhat overboard on the design something that was supposed to be simple has gotten somewhat complicated.
I'm currently trying to list the cast of a tv show down the left hand side of my page.
->Wire-frame example <-
Everything I have tried has failed, I'm feeling beaten here is an example of what I've managed to do trying methods i know or have found online hoping it would do the trick.
->Current Progress<-
->Link to current HTML<-
As you can see in the wire-frame, I'm ideally wanting their names centred under the pictures, which is my struggle.
Any ideas?
Thanks.
The problem you're having is that the label and the image belonging to one actor are not grouped. Put them inside a <div> container.
<div>
<div class="actor">
<img src="Pictures/willingham.jpg" class="actor-image">
<div class="actor-label">Travis</div>
</div>
<div class="actor">
<img src="Pictures/willingham.jpg" class="actor-image">
<div class="actor-label">Laura</div>
</div>
</div>
Here's the new CSS:
.actor {
display: inline-block;
}
.actor-image {
width: 86px;
}
.actor-label {
font-weight: bold;
}
Note that I also improved a lot of other things like removing unnecessary code or using CSS to style elements instead of HTML (cause that's what CSS is for). If you want the labels to look different just change/add the properties inside the .actor-label selector.
I'm building the tablet version of a site through css max-width media queries. Adapting styles have been easy so far.
But I found for one part of the site I need to show divs with 2 images instead of 3 and I can't find a way to do that with css.
Example:
Site version
<div>
<div>Image1</div>
<div>Image2</div>
<div>Image3</div>
</div>
Tablet version (if max-width is whatever, show only two divs)
<div>
<div>Image1</div>
<div>Image2</div>
</div>
Any ideas?
Thanks!
EDIT
Ok, I'll try to be more specific since every answer has been related to display:none and though that's a great solution, it wouldn't work for what I'm trying to do.
The divs are part of a slideshow. In the full site version the slider shows groups of three images. So in the tablet version, the third image would now be part of the second group (but not disappear):
<div>
<div>Image1</div>
<div>Image2</div>
</div>
<div>
<div>Image3</div>
<div>Image4</div>
</div>
And so on...
I'm not sure if this can be done through css or if the problem needs to be addressed with some kind of in-html script. That's why I asked for a solution without css.
Something like this would be good... The .hideme class of course can be placed inside a specific media query, and obviously can be renamed.
CSS
.hideme { display: none; }
HTML
<div>
<div>Image1</div>
<div>Image2</div>
<div class="hideme">Image3</div>
</div>
Assuming there will only ever be 3 divs there and you always want to hide the 3rd one, you could do it like this:
div:nth-child(3) {
display:none;
}
JSFiddle
The best way is to specify in the media-query the div that you want to "hide".
Something like:
<div>
<div>Image1</div>
<div>Image2</div>
<div class="ThingTohide">Image3</div>
</div>
#media only screen and (min-width:300px) and (max-width:480px) {
.ThingTohide {
display: none;
}
}
try this with jquery
<div>
<div>Image1</div>
<div>Image2</div>
<div class="move">Image3</div>
</div>
<div class="group2">
<div>Image4</div>
</div>
jquery code
$(document).ready(function(){
if ($(window).width()<640) { //to check if it's on mobile device, or any other method if it's not suits you
$('.move').prependTo('.group2');
};
});
This may sound stupid of me, but why does your title say "without CSS" when you're searching for a solution in CSS?
Aside of that, does your tablet version actually have only 2 divs coming from the backend, or is it the way it is supposed to be rendered?
In the second case you can just use display: none on the third div.
div > div:nth-child(3) {
display: none;
}
<div>
<div>Image1</div>
<div>Image2</div>
<div>Image3</div>
</div>
The HTML scheme is following:
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
.item CSS style:
float: left;
And the result:
But the white boxes are not aligned right one after another one -- where could be the issue? I;ve tried also using display: inline-block; instead of float: left;, but the result was basically the same.
Thank you
You can use CSS 3 column-width and column-gap like this..
http://www.bootply.com/118335
I run into the exact same problem and I found this one that worked for me.
https://github.com/kudago/waterfall
It depends only on js no css, though I'm still using bootstrap for other styling. I also use jquery.infinitescroll.js to dynamically load items and after the items are appended, waterfall will do its magic and put everything in place.
The only glitch I found is sometimes items could overlap a bit vertically, as soon as you keep scrolling down they are put correctly. I'm not sure why this is happening, a bit annoying but till I find something better.
Hope this helps.
I have a simple question, I am using a widget which has a text and I can customize the css for the division..
In the widget, the code to show the text and image is
<div>
<div class="image"><img src=""~~</div>
<div class="text">text</div>
</div>
Now, am looking to let the text on top and the image after the text and in center, but I can not edit the html, so is there any way I could achieve it only through css??
I don't think using top margin-top would work up here, beacause it is a layout, and top or margin-top might breakout .
Thanks in Advance
Mohit
If the markup and class names will be the same throughout, you could also use jQuery:
$('.image').each(function () {
var container = $(this).parent('div');
var image = $(this).detach();
container.append(image);
});
JSFiddle: http://jsfiddle.net/9psQh/
I have following code:
<div class='parent'>
<div class='left-child"'></div>
<div class="right-child"></div>
</div>
What I want to do is, if height of "left-child" is going to increase then height of "right-child" is also going to increase.
This might be a simple question as I'have less knowledge of html and css.
I don't want to use any of the java script code.
I want only css and html code for this.
Thanks.
Have a look at:
Demo
The most cross-browsers solution is styling your divs with table properties. This is also the least semantic solution.
.parent{
display:table;
}
.parent > div {
display:table-cell;
}
DEMO
You can create the illusion of the left and right child having the same height, by adding the background you want to use in the right column to .parent. I've added an example:
http://jsfiddle.net/3MCzm/