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.
Related
I'm testing out some code for a random personal project and I'm looking to place 3 boxes side by side (I believe as divs). But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?
Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time.
Unfortunately, I need more reputation to post my code in the proper format it seems.
Not 100% sure if I get you correctly.
For "But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?", if you wanna make them horizontally centered, you can try this:
wrap them in a container node.
assign a width to this container in its style.
set both margin-left and margin-right of this container to auto
This should then make these 3 boxes (actually the container) horizontally centered.
For "_Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time. _", perhaps width: calc(100% / 3) is what you want to put in the styles of these boxes.
In modern web browsers, even if #Slash_D response is correct, you can get a more flexible alignment using flexbox (here you have a complete guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Futhermore, if you want all the containers drop at the same time, you have to deal directly with media query based on resolutions (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) , or use a grid system, like bootstrap, that helps you with media queries based on classess (https://v4-alpha.getbootstrap.com/layout/grid/#how-it-works)
Hope it helps
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
I have a lot of divs with different size and width. I would like to automatically place them inside another div and position them like:
Anyone know what css properties should I use? I tried with floating + display (several combinations) and nothing works for me correctly - I had divs in one line -> a lot of space (because one big element) -> next line -> and so on... and so on...
Without using Flexbox you will find it hard to acheive this layout.
Flexbox layout example
You could use a JS plugin such as Masonry which will enable you to acheive the layout.
If I understand correctly, what you want to do is place them in a container that has a set size (and probably expanding height according to its content) and then line them up the way you show. The easiest way I can think of is using Twitter Bootstrap. It has a container class and then you can align your elements within divs and it will also make it automatically responsive.
Tip: Avoid using position: absolute and height: wherever you can because it messes with the flow of your site.
don't forget to clear your floating elements when needed.
I'm working on a mobile site, which has a fluid layout. On the main page, I have a table which contains a few products.
Each product has 3 divs: product-image, product-name and prices-container.
I can't seem to figure out how to align the prices-container div horizontally across the table-rows.
I'm thinking that there would be 2 approaches to this problem: either product-name always takes the height of the highest product-name across the table-row, either prices-container always sticks to the bottom of my product table-cell. Can't seem to figure out how to apply any.
Here's an illustration of the problem.
Left image shows my problem and right image shows how I would like it to be.
This wouldn't be a problem if product-name would have a fixed height, but due to the fact that this text is dynamic, I cannot know what height it will have. Might be one line of text, might be 10 lines.
I created a CodePen, where you can check my code and the problem >>here<< (I know it looks ugly, using background-colors to figure out faster what's happening).
I'm using Jade for my HTML and Stylus for my CSS.
Limitations:
- must be CSS & HTML only, I would prefer not using Javascript
- solution must be suitable for fluid layout (width is set with percentage)
- cannot use a fixed height of product-name, this being a dynamic text
Any ideas how to do this? Thank you! :)
add vertical-align:bottom; css style to .box1 class.
Similarly, add same style for .box4 css class.
Thanks,
I am currently working on a prototype that is using CSS3 multi columns for dividing up content and it appears to work well. My issue is that inside of a block that is part of the columns there is an expanding height section and well, in Firefox when the height of an element inside of a CSS3 multi-column changes it disappears and then Firefox crashes.
Shouldn't CSS3 multi-columns take into account varied height content inside or is it not made for that sort of thing? I'd really hate to have to use a plugin like Columnizer, because Columnizer is a pain in the butt to get working correctly.
Here is the layout:
[DIV]
[CONTENT] - Default height is 38 pixels
[EXPAND LINK] - A link when clicked that modifies the height of content to be 52 pixels.
[/DIV]
The issue is as soon as the link is clicked and the height changes, it's like it loses its layout and positioning (the height and width change to 0), then Firefox crashes. This is also the case if I use Firebug to change the height manually.
I resolved the issue right are posting this question basically and my solution was as follows in-case someone else runs into this issue which I believe some will.
I had a parent div element with the appropriate CSS3 multi-column code. The inner elements are article elements (you could just use div's though). The issue was that the inner article elements were being floated left (just out of pure habit of having to float things to give the appearance of columnised items). The floated elements were clashing with the CSS3 multi-column code thus crashing the browser.
I'm guessing that because a float modifies the layout of an element, the multi-column code was trying to perhaps readjust the box and then getting into an endless loop. I'm not entirely sure what went on, but floating elements inside of a multi-column div or anything is bad.