In a two column template, how can we use background on each column repeated when height of both columns differ?
eg, if my column 1 height is 200px (after loading some dynamic matter) and column 2 height is 500px, column 1 background is shown according to 200px height and column 2 background is shown according to 500px but i want both columns' background to be 500px.
Note: heights may differ because of dynamic content that will be loaded.
Ah, equal height columns. You can find dozens of techniques online using JavaScript, CSS, images, etc., all with varying degrees of success.
I'm a fan of faux columns, where you have a single background image that is the width of both columns, and that image is tiled in a container element that surrounds both columns. Then the background will extend as far as the tallest column. Theoretically, this same technique can be used for two, three, or more columns.
The original article is on A List Apart (http://www.alistapart.com/articles/fauxcolumns/), but the end result can vary a lot depending on your setup and structure.
Depending on other layout factors, an easy solution is to create a single background image that spans both, and set it as the background for the container element. That way, no matter which column has the vertically larger content, the background will span the entirety of it.
Of course, this really works best with fixed width layouts, etc.
Related
i am using bootstrap for design. two rows are in the container. the second row contains the background picture.here the two rows. the images is slightly less then the full width.
I suppose what you're looking for is background-size, more specifically cover.
I am wanting create a display wall (rows) of images with various aspect rations. (Think like an Instagram wall, but with different sized images, not just square crops)
However, I want the left and right margins to be aligned and for there to be a constant spacing between each image.
So the way to do this is to have the height of each row vary so that the width of each images expands until it is the right width to completely full up the required space.
I could use JavaScript to keep a running tally of the space available and math that against the aspect ratio of each of images.
However I feel this is something I can/should do in (more or less) vanilla css (perhaps using flexbox).
How do I create a table/grid of images, with each row an equal width; with a varied row height, to leave a consistent gap between each of the images? (with a minimal amount of js)
I am wanting to display a wall (rows) of images of various aspect rations. (Think like an Instagram wall but with different sized images, not just square crops)
However, I want the left and right margins to be aligned and for there to be a constant spacing between each image.
So the way to do this is to have the height of each row vary so that the width of each images expands until it is the right width to completely full up the required space.
I could use JavaScript to keep a running tally of the space available and math that against the aspect ratio of each of images.
However I feel this is something I can do in (more or less) vanilla css (perhaps using flexbox).
How do I create a table/grid of images, with each row an equal width; with a varied row height, to leave a consistent gap between each of the images? (with a minimal amount of js)
I want to use bootstrap's well component on a horizontal form.
Most rows of the form only have one or two fields in a set of columns, and I am specifying the width of each column.
I would like to style some of the of rows in a well, but I don't want to have the well go across the entire screen, because it looks weird to have so much extra space to the right of the fields. I only want to style the maximum width of the columns in the rows.
If enclose the grid within a div of a set size, then all of the controls' sizes and positioning are affected.
Is there anyway to style a row this way?
Is there a way to create a div that has the right width, and position underneath the actual rows?
I want to utilize CSS3 Columns around my site as it on wide pages provides a better UX for the users. However if I use CSS3 Columns, sometimes the left column is full (lets say 20 lines of text) and the right side only have2 lines of text. Can I with pure css3 (maybe Flexbox) make it have equal amount of content? Or do I need JS to fix this?
Beaware I'm not talking about equal height, but equal amount of content :)
You'll need to specify a height property.
From the Mozilla docs:
The CSS3 Column specification requires that the column heights must be
balanced: that is, the browser automatically sets the maximum column
height so that the heights of the content in each column are
approximately equal.
However, in some situations it is also useful to set the maximum
height of the columns explicitly, and then lay out content starting at
the first column and creating as many columns as necessary, possibly
overflowing to the right. Therefore, if the height is constrained, by
setting the CSS height or max-height properties on a multi-column
block, each column is allowed to grow to that height and no further
before adding new column. This mode is also much more efficient for
layout.
Sorry it was a padding-bottom which messed it up. When I remove that it spreads out nicely. Strange!
I'm trying to build a three-column page with a fixed-fluid-fluid layout and equal column heights.
I found this:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-32-fluid-fluid-fixed/
it got me most of the way, but the columns aren't equal height.
I've also tried using CSS tables and it works except when scaling, the columns overlap.
Any ideas?
Edit: I was able to make this work just fine using CSS tables. I preferred that method for making the columns equal height anyway. The overlapping columns, it turns out, was a result of some floated content in my fixed left column. When I removed the float, the page scaled fine.