I'm trying to create a blog post display grid. My fiddle is here These divsare currently centered in the middle of the page, which is fine; however, I would like to:
Change the alignment of the divs to the left, not the center; so that as each post is generated, such is done in the natural reading order.
Make the height of the divs responsive. By this I mean, the height of the individual divs are already responsive; however, the next row of divs is aligned based on the bottom of the single-longest div in the row above it. I would like for each div to fill in the space not taken by the div above it, as depicted in the picture below
Currently, my code renders me this:
Any idea as to how I achieve this? Thank you!
You could use this modern CSS approach (won't work for older browsers)
column-break-inside: avoid; // for each content "widget"
OR
You can use some of the javascript libraries allowing you to achieve this:
bricklayer.js
Masonry
Related
I am trying to achieve the following layout for one of the pages I am building using bootstrap 4.
Sections 1 and 2 are basically container fluids with col-4/col-8 and col-5/col-7 layouts and have a background image or background color.
On top of this I have to place a div with some text and button, and depending on the placement, left or right column, the content must be confined to the size of container i.e. left and right margins same as set by container. This also needs to be responsive in nature.
I have tried adding margins based on media queries that seems to be a very ugly solution.
How do I achieve this in a more efficient way?
Thanks!!
I want to achieve this layout below 600px:
And this layout above 600px:
The height of the text and image is variable and unknown.
Flexbox works great for the source reordering but I'm having trouble forcing the new column to work cross browser.
Using page-break-before: always; on the div with the image forces a new column - but this technique only works in Firefox (39).
This JS Fiddle shows an example of what I have so far (test in Firefox to see working example).
How can I make this layout work in Chrome and IE11?
Using position absolute on the image to move it out the document flow is not an option as I need it to push the content below down.
Whilst I'm using flexbox I would accept any (CSS only) method that could achieve the desired layout.
If you're willing to mess with the source order a little bit, you could do something like:
Grouping container with this order inside:
Img container
Title container
Content container
Then float your image to the right, and have the title and content sit on the left at large size.
At smaller sizes, to achieve the visual reordering, you could apply flexbox to reorder them as 2 1 3.
So a kind of "hybrid" solution, could possibly solve this situation.
I'm building a website with fluid layout and I want avoid things like setting dimensions. I'm having success in almost everything, but I have a div that doesn't work as expected. See this link: http://cssdesk.com/Bshqe.
I expect that "div_botao_comecar_convite_cadastro_b" were placed to the right of "div_descricao_curta_convite_cadastro_b", but it was placed below this div. I want that the div be placed at left.
As I say, I don't want set a width for anyone div. Sorry for bad english. Thanks in advance.
If you don't want to set a specific width but want the children elements aligned horizontally, use css3 flexboxes -
apply display:flex to #div_elementos_convite_cadastro_b and adjust the other css accordingly....
demo
more about flexboxes # CSSTricks
how can I display divs with different height to be close to each other regardless of its height and with a specific margin just like buildings
I mean something like the divs in this website http://via.me
I used flaot:left but it floats only with the last div and leaves an empty spaces
this is the code that I used http://jsfiddle.net/D9rHB/6/
I think that the jQuery Masonry plugin would be what you're looking for in this instance:
Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
JS Fiddle demo.
You can do that. For that you have to have position as "absolute".
Then manually calculate the height and top value to place the div where ever you want.
For making the things easy take the width of all divs same. Also make height of divs in each
column fixed.
Let me know if you need more clarification how to do this.
I've been trying to make a horizontal web page. However I don't want to keep setting the width to a certain width to accommodate the content that is floated is there a way to have the Div automatically re-size to the content that it contains? This way all the content is floated or "horizontally" scrolling? I'm using width:"specific size" but as soon as I have too much content it overflows is there a way to not have that happen and also where I don't have to specify a specific width size?
EDIT:
What I want is the whole website to be horizontally scrolling. I don't want just the specific div itself to have scrollbars, but I want the div to be able to adjust it's width to accommodate the content no matter if I have 3 divs within it or if I decide to add 6 divs later into the div.
For example what I want is like this. (Where even if I have more content it won't drop to the next line) I mean can this be achieved with css alone?) I specifically want that effect where the whole website is scrolling not just the div I don't know exactly if that website is doing that. Basically I want the whole website to scroll horizontally not just a scroll bar on the specific div itself.
For example vertically if you have more content you can keep scrolling down that is what I want, but I want that in a horizontal scroll of the website is that even possible?
Here is my code Jfiddle Code which is for tumblr but I want this for more than just tumblr. As I'm thinking of doing this for a regular website but where I manually will add more list items or Divs. I just want to see if there is a way to have the width adjust to the content so the floated content doesn't drop to the next line.
I think what you need is display: inline-block;
Like this: http://jsfiddle.net/ZDJbH/
Check this fiddle , is that what you need
div{
width:auto;
overflow:auto;
white-space:nowrap;
}
Set the css width property to auto
#yourDiv {width : auto;}
1.display:inline-block
2.float:left or float:right Because it will destroy line box.
3.position:absolute；（and without top, left or position:absolute) May be need to know information to use it.