I have a list of div with each div having a image inside.
The width of the images is not known before loading the page.
I have a container div with width 960px. How can i arrange the images in rows with each row having as much images as the row width permits? So for example if i have 4 images (300px, 400px, 200px, 250px) i would need to have first 3 of them on a row and the 4-th one on second row as having all 4 of them in a single row will get a width larger then 960. And on each row the images should be centered.
I've tried all i could think of using css, and did not found a way that works.
Any ideea?
Something like THIS?
Ok, I worked with simply divs, because I didn't want to search for images but the main pont is: the elements which need to be both aligned and fitted, make them inline-block. Inline to be made multiline, box to be able to set both width and height. After that, you only need to set on the parent: text-align: center
EDIT
Oups, I've put spaces between the divs (like real space characters) and they appear as spaces between the divs, since they are inline. make sure not tu put any whitespace between the containers, like THIS
If you lose the containers, you don't even need to use inline-block.
http://jsfiddle.net/bryandowning/ghcmM/
However, since this is a list of images, you probably should use inline-block on the li elements of an unordered list.
Related
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
I positioned two div elements side-by-side by using float= left;
But buttons are getting displayed beside the div elements.
I want the button elements right below the two div elements which were placed side- by-side.
When you use float:left property then the div's height and width are set by either of the following
amount of space it's content html elements require
applied css height and width.
hence say if your screen if too big and space is left out on the sides then the next element (if it can be fitted in that space) is rendered (if it requires more then it would appear on the next line).
hence now regarding your problem there are two possible solution's
Increase the widths of your div so that it takes most of the screen width.(mostly never used as it might look ugly on big screens)
but if u want to go by this approach the setting the width's in percent can do the job.
Fiddle demo
use the clear:both property of css (mostly used)
for it's explanation you have to read it's documentation
i would suggest you go by this approach
Fiddle demo
how to make 3 column layout where:
left column is fixed width
middle column is auto width (not fixed)
right column is fixed width
and all columns height are equal (but exact height is unknown)
Example:
I know i can do it by using tables, or display:table-cell, but is it possible to do it wihout using tables? I would go for table-cell but it doesn't work with older ios/android mobile devices and older browsers.
Is there some css hack available to do it without table-cell ?
Edit: In this particual case I just want to set full height color background (left: color #A, middle: color #B, right: color #C)
Edit2: I feel like 1999 table layout poltergeist/ghost is laughing in front of my face
Edit3: no js please
Have you tried using a separate <div> to draw desired backgrounds? Here, I've created an example http://plnkr.co/edit/WOaF3SZ9N8sswsxbZ116?p=preview
Take a look at my fiddle:
http://jsfiddle.net/RB9JZ/1/
I've had to use javascript to make the columns the same height:
$(".col").setMinHeight(3);
In the setMinHeight(3), 3 = number of columns, and give each column a class of col or whatever class you'd like.
This is an interesting question. Since Rich already figured out the columns, I'm going to address the issue of getting all the columns "the same height". Like you said, this is very difficult to do without table behavior. What I've always done is use background images on a div that wraps all columns. This div stretches to the height of the tallest column automatically, and if you have a repeating background, it will give the illusion of matched columns. Since you have a special case of 3 columns with a fluid width in the middle, you will probably need two divs to wrap the 3 columns, and have two background images. One aligns left, and one aligns right. Let me know if that doesn't make sense.
maybe this variant:
display:block;
height:100px;
I have 15 Divs with 200px x 200px sized. I also having a container div which height set to 100%.
I need to display the Divs vertically one by one and when its reached the end of the container height, The following divs should display in the second column.
I exactly need my divs to display like floating icons in desktop in PC.
Please help me fix this.
This can be done by setting css column-count property of ul to number of columns
This link explain more about this solution
How to make floating DIV list appear in columns, not rows
I have a bunch of thumbnails that I wish to display in my page. The widths of the thumbnails are not necessarily all the same, and neither are the heights. What I'd like to do is arrange them in a tabular format such that elements line up in neat rows and columns with each "cell" being an equal, specified width.
I do not want to use a table as I would like the number of rows/columns to automatically re-size with a browser re-size.
I've tried sticking the images in:
divs of fixed-width with float left. The problem is because of unequal heights, wrapped divs might "catch" on the bottom of a div on the row above.
spans and lis: setting width: 200px or whatever doesn't seem to fix the width; however they do wrap fine.
If you use display: inline-block on your spans or lis, that should allow you to set the width.
http://jsfiddle.net/bnmPR/
You could use lis and make them display:inline-block;
http://jsfiddle.net/jasongennaro/zDC2w/
Drag the window over to see it work.
borders, width, and height added to show effect
you can still use you divs that float left and add this script: http://masonry.desandro.com/
It will push the divs up vertically so that they are beside each other.