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/
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 =)
Here is my reduced test case on codepen: http://codepen.io/RonStrilaeff/pen/pKBdf
I have two fixed width sidebars on the outside edges of my page with the content autosizing between them … that works. It is required that one side bar is left an one is right.
However, when the screen gets smaller, I want the sidebars pushed down below the content. That basically is the opposite of what my demo does. :-)
What I want to know is what kind of css magic do I have to do inside my media queries to make it behave that way? I’m thinking it has something simple to do with float or clear that I have not grasped yet. Or maybe I need to start with a different order to my divs in the html.
Any help is greatly appreciated.
Some principles gleaned tips from Chris Coyier's site and forum helped me.
Here is the solution I went with (a fork of the first codepen):
http://codepen.io/RonStrilaeff/pen/oefav
put the content div first with specific margins to match sidebar widths
made the sidebars normally fixed (top, left or right) within the wrapper containing both sidebars and the content
at whatever width needed, made each sidebar static and float left or right (below content is natural because of source order) while removing the respective content margin
Voila!
I’m very happy with this since it does not involve much code at all and seems pretty standard … ie: no “tricks” :-)
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...
I need a div placed at the top and center of the page to appear over top of the scrolling content below it, and stay in place at the user scrolls.
However, due to freakishly annoying bug I can not reproduce in jsFiddle (or I'd ask for help with that instead) I can't use position:fixed and I need it to work without JavaScript.
How else can I do it?
I think I understand what you mean and I've made a little example, it's pretty self explanatory but just say if you don't understand anything, sure you will.
And if I've misunderstood, I apologise... jsFiddle 1
EDIT With Real Fix
Since I read the question wrong and a fixed position couldn't be used, I have now altered the code slightly to the following jsFiddle 2
Basically you're placing a transparent fixed div to fill the entire width of the page, and then placing your absolute position div inside that, creating the same effect but hopefully getting round the bug you've come across.
First see http://jsfiddle.net/b2BpB/15/
3 columns, aligned to the top of a container which is centred on the page. When the browser window is wider than the container - the example above is good.
When you shrink the width of the browser window - the columns start to stack down the page.
Question: How can I make it so that the outer two columns have a z-index lower then the centre column, so that when the browser window is squeezed, width-wise, instead of the columns stacking down the page, the outer columns slide under (behind) the centre column?
Note: I need to keep the present behaviours. 3 divs align to top of container. 3 divs grow / shrink to fit their contents (can't use fixed width, hight divs for the columns)
--added 19 April 2010 am UK--
This one seems to be stumping everyone - I've added a couple of more tags to see if anyone else can figure it out.
It may help me & others even if you post your initial ideas and explain why they wont work in this instance - to help avoid dead ends.
One avenue I looked at is using iframes instead of divs - but auto resizing iframes in a cross-domain application requires some exotic javascript. I would like to avoid javascript, let alone this cross domain hack. - I think this is a dead end - unless you know otherwise.
Thanks in advance...
--added 19 April 2010 13:44 UK--
#RoToRa - here I get absolute top positioning, divs size to fit content & divs sliding under the main centre div with no stacking down the page as the window is squeezed:
http://jsfiddle.net/qr7WB/
I have used inline style - but this is easy to extract to the CSS file - if I ever get it to do what I want.
If I can just get the left & right divs to but up to the centre div - only sliding under when the browser window forces them to, then bingo!
In terms of the application: I want a 3 col web site. The centre col holds the main content and I want it to take precedent. The outside columns are for subordinate content and ads.
First off: This isn't an answer, however I have several points and it's more readable as an answer.
I don't think what you want is possible. Having elements slide under each other is normally something one want to avoid, so it's not a "standard behavior" of CSS.
You'd have to use absolute positioning to have elements overlap each other, but then you can't have the elements adjust width and height to their contents.
The best I can think of is JavaScript, which could be based on the existing layout (so that it would still be displayed without JavaScript), and just "kick in", when the elements need to overlap. However that wouldn't be a simple script to write, because calculating the correct width it needs to react too, isn't simple.
Another alternative could be CSS 3 Media Queries, which allow you define different CSS rules based on window size, however that would require you to know at exactly which width you want the change.
As I mentioned having elements overlap - especially when they contain text, which one would expect to be able to read - is something one usually tries to avoid. Maybe you should describe your exact scenario (which elements contain which kind of information, and why it's ok for them to overlap) instead of your perceived solution, then it may be possible to suggest alternatives.
BTW I can't see how iframes would have to do with problem at all.
Do You mean like this?
Example Fiddle : HERE
if that's it it will depend on what widths you can or can't set, but if that's the idea more specs would help
It's all floated or inline-block, no absolute positioning so flow should remain to allow for footers to follow.. let me know!
Updated fiddle per comments : HERE