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
Related
I am using Bootstrap. I have div with class="row" and three columns inside with divs in each column.
The third column overflows outside the row div, which could be fixed by giving padding-right to row div. But it still repeats when resized to smaller size.
While resizing from md to sm to xs, the column divs overlap during the transition.
How do I fix this?
If all of your columns (col--) add up to 12 you should be alright. If it's an image that's overflowing (which it sounds like it is) you can add the img-reponsive class to it. This will set max-width: 100% which sounds like the issue but I can't be sure without a code sample.
I have 3 block elements (2 navbars and one picture) in one container, all are floating and have a fluid width. The picture is in-between the navbars, so my left navbar and the pic have float:left and the right navbar has float:right.
My goal is to get the picture underneath the navbars on mobile devices. To do so I thought I just have to add float:none to the pic in my media query but the result is the right navbar positioning under the pic.
Is there maybe a way to re-arrange the divs in mobile-view?
Best solution would be a trick to tell the floating elements in which order they should float.
I think you're looking for clear:both.. anyways, here's one way around it;you can adjust the width's and what not, but you get the idea: Fiddle. Also, note that because all items are floating.. you can place the image AFTER both navbars & have it displayed in the center at larger widths.
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.
I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?
JSFiddle Code
The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).
Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.
Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...
EDIT:
New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/
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.