I hope you will understand me. There is a wrapper with width of 360px, it allows only 3 columns of divs. I just want to be able to drop in another div anytime I want and then all previous will be moved along. I have a problem, it seems like divs go to next row but they align verticaly to the tallest one from previous row. Please have a look at the example below (I had to use a picture as the code wasn't showing right). The last green one should be touching the tall red one from above. I am not looking for static positioning it has to be automatic so when I change wrappers width to larger more divs will automatically be included in the rows.
Below is the image of a wrong result.
Masonry script is the closest as I can get to what I need, shame it is JS...
Related
I'm trying to make a list of thumbnails of variable amount be centered while the thumbnails all fit on one line, but then subsequent lines be left-aligned, while the parent element responsively stays centered in the page. width:fit-content works well for one line, but when there are multiple lines it goes to 100% width (in mac chrome anyway). Illustration of the problem:
http://codepen.io/scotthorn/pen/eutAH?editors=110
If there is another way to achieve my desired goal, I wouldn't mind changing any part of the css or html markup. A background that fits the area isn't necessary, it's only in my example to better show what's going on. My primary goal is to have a list that behaves like a centered container of inline-block elements for one-line, but then when a second line has to be created, the first element in it lines up below the first element of the first row rather than being centered by itself.
Hopefully that makes sense, if not I can make a mockup.
I would imagine wrapping the whole thing in a div and centering that with a % width would do what you want. But a mock up would help me understand.
Or you may be able to use margins to squish the inside content.
Your example works well, except you probably want to add a max-width to your UL..
For example, if you wanted to have a max of 7 items per line in your case, you would
add:
ul { max-width:630px}
updated codepen
good luck =)
i'm having a slight problem which i can't seem to figure out how to solve in a wordpress layout.
I have 3 columns which shows the recent posts with each one being an individual by itself, but as the div increases in height, it pushes the next line of div downwards, but what i wanted is just each div having a 20 px margin with each other.
here's a picture of what is happening
here's a picture of what i want
You might want to consider using Masonry to implement the layout you're trying to achieve.
HTML and CSS alone will not get you the effect that you are looking for. For the full effect, and a well put together tutorial, visit:
http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/
I'm trying to achieve the effect of a horizontal accordion using exclusively CSS for animations and layout. So I have 4 columns set up and the main difference with a classic accordion is that when I click on a column, instead of expanding in one direction, it should expand in both directions and push the other columns left and right.
Here's a compact version of my code right now : http://jsfiddle.net/4ZGmj/183/
If you click on the red column, it works exactly as intended: the column is expanded in both directions and all other columns are pushed to the right. Now if you click on the green column, you'll notice something different: the column expands in both directions as intended, but it only pushes columns to the right while overlapping the column to the left. What I would like is for each column to push all neighboring columns when expanded.
I guess it might have to do with the fact that my columns are floated left. Do you guys have any insight on what is causing this behavior and what I can do to fix it ?
Thanks in advance
I think your issue may be in the .animate class, where you give it a negative 50px margin. Negative margins overlap the "previous" element (in all directions). If you remove the -50px, the images will only "flow" to the right, since they're "glued" via the float:left property, which will not do what you want anyway :(
I think the way to get around this is by using relative dimensions. Try setting up a div with a fixed width and use relative dimensions (like 25% for each). You probably have to set a behavior on the :not clicked divs aswell.
Like, if one div is ".animated", it has 33% width, while the others would have around 22%...
There's probably a better math you can arrange for it, though!
edit: typo
I was able to fix it and get the intended effect by removing the negative margin value from the "animate" class (this was responsible for expanding in both ways, but also caused the overlapping to the left). Instead, I added a new class "pushleft" that has this negative margin value and that I always apply to the first column. You can see the effect and get a better understanding of the idea here : http://jsfiddle.net/4ZGmj/185/
Thanks for your help, I wouldn't have fixed it if it wasn't for your input.
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.
I'm building a HTML template for my site and would like to have a main content pane on the left and a navigation pane on the right (similar to Twitter).
I'm assuming DIVs are not the preferred approach since they are by defaulted listed top-to-bottom. I've played around with float:left and float:right but those cause the parent div to not expand appropriately vertically.
I've seen references to using tables (seems like a step backwards) and SPANs (which I haven't been able to use to produce the right effect).
What is the best practice for accomplishing side-by-side panes in HTML?
Any advice or examples would be greatly appreciated.
I'm assuming DIVs are not the preferred approach since they are by defaulted listed top-to-bottom.
Why would you assume that when the example you gave, Twitter, uses them?
The parent div can be made to expand to the height of the larger of the two columns by putting a div below the two columns within the container div with clear: both as its CSS.
DIVs with float is probably your best bet. What is your problem with the height? Have you tried doing height: auto for the div?