I'm doing a project with bootstrap, and I have a problem with the alignment of the s columns. These apparently are not well aligned to the size of a specified column, so are spaces within the site.
I did not find some method that allows me to solve this.
I leave an image below.
Problem Image
It looks like you're putting multiple rows' worth of columns within the same <div class="row">. That works if they're all the same height, but yours aren't. Bootstrap implements its grid system by making each cell float: left, which will give kind of funky results if some columns are taller than others. Here's an example where you can kind of see how it ends up positioning variable-height cells.
Instead, you probably want to do multiple separate rows, as shown in the second third of that same example. Each row will start over at the left margin, fully under the row above it, which sounds like what you want.
Alternatively, you can add a <div class="clearfix"></div> as another way to start over at the left margin (as shown in the final third of that example). This isn't as clean, but it can give you more flexibility to do really fancy stuff with your responsive layout. See the documentation for responsive column resets.
I'd go with multiple rows unless you really need the flexibility of responsive column resets.
Related
I am new on this forum, hopefully someone can help me out.
I am trying to create a page with three independent columns. Each column will have its own divs of different heights. See this image - 3 columns
I achieved this layout using separate divs for each column and then divs for each window, then I tried to make the layout wrap when I make the screen smaller into two then three columns but this is where I got stuck. I want it to prioritise the top divs when the window gets smaller, see this image - 2 columns. Wrapping is of course made very simple with flex and grid but these two don't allow me to create different height divs in each column, it's always based on even horizontal lines, or if I use flex in column direction it messes up the order of windows when it wraps.
I am very particular about the order being as per the image, because I will need to keep adding content to the page and most recent content will need to always be at the top.
Maybe there is a way to add order to each div in flex which reaches beyond its container? Or can someone suggest another way to do it?
Hope this is clear enough...
Thanks
I am trying to create a newspaper-like look through pure CSS where everything flows through columns and onto new pages when it needs more space.
I have tried flexbox and grid, but it does not work the way I need it to. The content inside can be images, divs, etc. I found it best to illustrate what I am looking to achieve through a picture:
I also created a code pen to try and demonstrate my current attempt:
https://codepen.io/knickfocks/pen/qBZBLqq
As you can see from the above sample code, the items align in columns left to right. The items are assigned various heights just to demonstrate that I wouldn't always know the height, and the content of these items can vary in size. But I am looking to have it move onto the next column row after it runs out of width space. Sorta like how a newspaper reads.
Thanks in advance!
I have a design I'm working on that is almost complete, but I'm having trouble getting the CSS to do what I want. What I am trying to do is something like this:
However, when the page is generated, this is what the output looks like:
How can I get the third box to float up under the first and next to the second? I have tried every trick I know, but can't get it to work. I should also mention that each block is added to the page by a loop in PHP pulling from a database, so I'm kinda limited by not having static content, and have no way of knowing ahead of time how tall a particular block is going to be.
If the number of columns is variable, CSS can't really do it (if you want it to work in all common browsers), so instead use jQuery Masonry which is designed to solve exactly this problem.
Here's me saying the same thing, but with more words: CSS two columns with known children width
Per the second layout, a good option is using three primary columns. There are several grid systems available including Twitter Bootstrap and 960 Grid that will help you get the basic framework laid out quickly and sans quirks. When divs (block elements) fall within any of the three columns, they'll stack up, top-to-bottom, naturally.
Regarding the bottom of the divs lining up perfectly, you'll be able to use JavaScript to calculate the overall height of the parent of the columns (which will naturally inherit the height of the tallest column), calculate the total height of the block elements within each column, and use javascript to add the difference in height to the lowest block element for each.
Be sure to account for padding and margin in the JS height calculations.
Try putting the divs into 3 columns instead of stacking them in the order they appear.
That behaviour is because of the float rules. The top of a floating element cannot be over the top of another element that came before it in the normal flow of the page. I don't know exactly how you position your elements but you might want to look into that.
Here is the Css Specs for float: http://www.w3.org/TR/CSS2/visuren.html#float-rules (It's css2 but the rules still apply)
Look at rules 5 and 6
Now this is a tricky question, with the concern of not using tables or JavaScript for this task.
Basically I have a five columned row, one column takes any type of content that can extend the height, but the task is to make the sibling columns take up the same height as that column with fluid content.
Demo: http://jsfiddle.net/Mrg5E/
As you can see in the second row, it has bigger content inside it that takes up the height, but this breaks the siblings height too.
I've looked around proposed answers, mainly using tables or JavaScript - this is something I need to avoid this. I've also looked at hacks such as the Holy Grail, etc, but this is mainly for 2-3 columns when I have 5 columns (sometimes 4).
Is there a possible fix in CSS to match all the siblings heights?
If you have no idea what the one column with variable content's height will be, then no, you can't do this with CSS alone. You will need to either fake it, or use javascript.
If you have a fixed width layout, you could try the faux column technique. That's "faking it" with a background image that tiles vertically, giving the illusion that the columns are the same height. The example in the article uses two columns, but there is no reason you can't use it for five.
The other way is using javascript. If you are using jquery, there is a plugin that can help you out. The basic idea is to identify the greatest column height, then apply that height to the other columns.
Use the min-height property and for cross browser solution, take a look at:
http://css-tricks.com/snippets/css/cross-browser-min-height/
Working Example
I'm working on making a redesign of my college newspaper's website and got the design to fit nicely on an iPad. I'm now trying to switch it to a one column layout (for smart-phones).
The problem is that, in a single-column layout, the the right column must go above the left column. I would know how to do this if the code for the right column was written before the left column, but unfortunately it isn't.
How can I move the left column under the right column? Do I need to use Javascript to switch the column orders in the HTML code? Thanks!
EDIT: I realize that I can have a DIV that is invisible when the width > someNumber. I'd prefer not to have to be redundant though...
The CSS only solution is to start with the smallest screen as your default design then enhance as the screen size increases using media queries. Starting with the smallest screen first puts your markup in the correct order - for the image above Banner, Primary Navigation, Main Content (right-hand column), Aside (left-hand column) and (presumably), Footer. As the media queries apply additional CSS you can then float Main Content right and Aside left - the elements are positioned correctly for smaller or larger screens.
The easiest way I can think to do this is with jQuery (a javascript library) to remove the right column content from one div to another in the DOM. This allows you to create and remove the div's on the fly so there is not redundancy in the end.
If this is too vague, comment and I'll add an example.
CSS can take elements out of the document flow and put them anywhere, in any manner you want. But it cannot create a new document flow (ie it can't reorder elements). You need to position one element relative to the other or position them both absolutely.
If you have access to Javascript and are not concerned about graceful degredation you could also swap the .innerHTML of the two divs.