I am working on a product page layout that has two columns with various height items. I am trying to avoid nesting the items in two column containers, so that I can have optimal order of elements on small screens that go to one column.
The problem I am running into is that sometimes the second block (floated left) is longer than the first block (floated right), and sometimes the opposite is true. The problem occurs when the third block is given clear: left to make sure it's as far right as it can go, the fourth block will not go above the top of the third block.
Here is a CodePen with the code: http://codepen.io/anon/pen/jAQdEK?editors=1100#anon-login
What you want to do looks like a layout table to me. Using display types table, table-row and table-cell might be an easy and solid solution for that. See:
http://codepen.io/wortwart/pen/grQqzv
Related
I don't think I asked this as clearly as I could for easy searching, but here goes:
How can I make a bootstrap column extend to a larger height so that when the columns wrap around, they get offset by it even if it's not tall enough to cause that normally.
Essentially, how do I make the bottom panel in this bootply stay centered in both cases?
http://www.bootply.com/FCgrUtGuQ0
My left panel will be of variable length, which means that if I use a col-x-offset-x it will get pushed over further if the left panel extends below middle.
If I add the bottom panel to a new row then it will have whitespace above it if the panel left is longer than middle.
I tried the negative margin trick without success. It lets you change the background colour which those examples all used, but it doesn't seem to cause the floated panels to shift right.
I need this layout to behave differently at smaller screen sizes, so I can't just put the middle and bottom in the same col-x-6 as this is actually my lg layout, and at sm I need it to act with left at the top in a row, middle and right as two columns in the second row, and bottom as a third row.
Negative margin trick:
.row {
overflow:hidden;
}
#extend-down {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
This isn't answering my own question directly, as it doesn't explain how to expand the column height to make the repositioning happen properly, and it's not generic to all column sizes and arrangements.
But in my exact case this arrangement of columns and rows case can be solved with two master columns and then separating the contents of the second, where 3-6-3 columns can easily be made to be 3-9(4-8) columns which maintain the same 3-6-3 spacing.
http://www.bootply.com/UTq2klEuCG
By putting the middle, right, and bottom in the second column then letting those wrap around naturally seems to handle all my cases with this specific layout.
So I went from
col-x-3
col-x-6
col-x-3
col-x-6
to
col-x-3
col-x-9
{
col-x-8
col-x-4
col-x-8
}
This isn't ideal, as a 2-8-2 arrangement might be best at a large screen size, but the math doesn't work to easily create a subset within the col-x-10 that would need that follows the same spacing as a 2-8-2.
I'm trying to design a 2 column layout for getting a feel for HTML again.
I want to avoid using floats because I want to keep the natural document flow. Every other question on Stack Overflow I browsed through incorporate floats or worse tables. I tried layouting it with flex as well but I couldn't figure out how to make both the columns stay the same size on the other pages with different amounts of content in the first column.
Here's what I got so far: http://jsfiddle.net/wykenakw/
I figured out through trial and error that I can use a negative margin to line up the sidebar to the main content but it feels awkward, quirky and hacky. I inspected every element inside my columns but I couldn't find any potential child elements with margins that could cause this 4px gap. It's driving me nuts.
Am I missing something? Am I doing something wrong?
float is ideal because it will essentially cut out the "white space" for you. You can try and use: white-space-collapse:discard on parent elements (in this case #wrapper), but I rarely have success using it.
White space is just a "natural" occurrence created by the browser rendering. In order to avoid this (without using float), you need to simply remove the white space between your elements. This isn't ideal because of the flow and indentation of the elements, but without using float it's what has to be done.
Additionally, in my opinion there is nothing wrong with using float as a "natural document flow". You can always clear the elements.
So instead of:
</main>
<aside id="col_2">
You'd have:
</main><aside id="col_2">
Hope this helps!
http://jsfiddle.net/wykenakw/1/
Change your <main> into a <div> or use css to turn it into a block element:
main {
display: block;
}
As mentioned in the other answer actual spaces between the two elements is causing the unwanted whitespace. However spaces between two block elements is always ignored.
I want to organize data in two columns of equal width, but they may be different heights per element. It's difficult to explain, but if you have div1 of height 500 and div2 of height 400, then add div3 of any height, it should appear directly below div2 rather than div1 because div2 is shorter. However, if div1 was shorter, div3 would instead appear below it.
Originally I was using tables since it's mostly tabular data, but when one of the two text fields are longer than the either (one in left vs. one in right), it stretches the shorter to match the height. I end up with rows of different height, and the element in the shorter column will stretch to fit that row (which is determined by the taller of either element). I don't want it to stretch, I'd rather it stack to minimize blank space.
Here's a mockup of what I'm trying to achieve. At the top you'll see the page with only one element, then below that you'll see with two elements, then below that with three and four elements. The third element goes below the second element because the overall height of the right column is shorter, but the fourth element goes below the first element because after the third is added, the left column is now shorter.
The only site I can think of off the top of my head that uses a similar organization style is Pinterest.
This concept on the web is usually refered to as Masonry.
Here is a link to a javascript library that can help you implement it.
http://masonry.desandro.com/
This can also be accomplished using FlexBox css for modern Browsers.
That has been addressed in this question: using flexbox to get pinterest or jQuery masonry layout
I frequently find myself with a two column layout, in which one column contains all the content and the other contains various extra elements. These need to be somewhat anchored to specific paragraphs in the first column to make any sense. An example:
While it appears to be three continuous columns, it's actually four separate rows, each with three columns -- that is, the first row contains the gallery block, the first paragraph and the "1918" timeline block; the second contains an offset region, the second paragraph and the illustration above the "1925" block, et cetera.
The upsides of this approach are that the extra content pieces (hereafter "blocks") are vertically aligned to the paragraph referencing them and are responsive due to being sized proportionate to the column width. The downsides are that it's not at all semantic, and having blocks taller than the main paragraph will stretch the height of the column and add blank space beneath it (Unless absolutely positioned, which these are).
I could also make it a single 3-column row, with the blocks added to the main content column above the referencing paragraph, and then absolute positioned into the blank space created by the outer columns. This is good in that it's much more semantic, but bad in that block widths won't reflect the column width defined by Bootstrap's grid, and thus are much more difficult to make responsive.
I could do the same but put all the blocks one after another in each column, positioned vertically with bottom margins (or positioned relatively), but this is even more difficult to make responsive given the distance between blocks will change in a responsive layout when the central column is narrowed or widened. I could scale the text at different breakpoints to prevent the paragraph shape from changing, but that would probably reduce readability because I'd need to scale down on smaller devices.
Is there anything I'm missing? Put another way, is there a clean, semantic way of vertically positioning an element in reference to another element?
Could this plugin answer your problems?
http://leafo.net/sticky-kit/
I am working on the interface for a small web module and am having some problems with the CSS. Right now I have the container DIV and then tables to layout the sub-sections. I am floating 3 of the tables left and 3 tables right, which until now has worked great.
I recently added a feature that allows for additional fields to be added by the user as needed and as the height of a table in the right column grows, it breaks the layout. Is there a better way to do this so that the layout won't break?
After adding "clear:left" and "clear:right" to each table, it appears as follows...
After moving the 3 left floated tables to the top of the code and removing the "float:right/clear:right" from the other 3, it works well except for this.
For each float left, add clear:left, for each float right, add clear: right.
It'd depend on the order of each floated container though. Another option would be to try keeping one set of floats from one column (i.e. the float lefts or float rights) and remove the float property from the others in the other column so they wrap to the side of the floated boxes.
EDIT: a working example: http://cssdesk.com/Xan5j
It would be better to show a live example of this, but the easiest way to handle this—if this is an option—is to wrap each column in its own div.