I'm trying to create some evenly spaced columns (an ol), with the columns themselves being fixed width.
So far, I've managed to achieve the desired effect by using table layout, and nesting an additional element inside the list item.
HTML:
<ol>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ol>
CSS:
ol {
display: table;
width: 100%;
}
li {
display: table-cell;
}
div {
margin: 0 auto;
width: 100px;
height: 250px;
}
This works great, but has the following 2 shortcomings:
As you can see in the demo, the first & last columns don't line up flush with the parent's outer edges.
This can't really be used responsively. The only thing you can do at smaller widths is stack them, but I'd like to split them (2 or 3 per row).
Is what I'm after even possible in CSS alone? I know there are a plethora of ways to accomplish this in JS, but I'm after a CSS-only solution.
P.S. I don't care about IE7-, but I do need to support IE8. CSS3 selectors are OK though, since I'm anyhow using selectivizr in the project (I know that's JS ;-)).
It seems appropriate for you to recycle "how to *really* justify a horizontal menu". Basically the behaviour you're describing is that of inline-block elements of identical width having text-align:justify applied:
ol {
/*force the desired behaviour*/
text-align: justify;
/*remove the minimum gap between columns caused by whitespace*/
font-size: 0;
}
li {
/*make text-align property applicable*/
display: inline;
}
/*force "justify" alignment that requires text to be at least over 2 lines*/
ol:after {
content: "";
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
div {
display: inline-block;
width: 100px;
height: 250px;
}
Working fiddle.
NB: you may have to re-apply desired font-size and text-align to descendants of ol depending on the reset you're using (i.e. to prevent these properties from being inherited)
Ok my first thought would be to use media queries to gain a responsive approach for how many you want to show per row on differing screen sizes and my second would be to use
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
this will stop the paddings you may put in later adding onto the box model size.
Hope this is close to what you are after.
Related
I've read awesome article and was astonished by the Flexbox Justification method. It works really well, but only when elements fit in the container entirely. I've created jsfiddle to illustrate this.
#container {
text-align: justify;
font-size: 0.1px; /* IE 9 & 10 don't like font-size: 0; */
min-width: 600px;
}
How, using this method, can I place the 6th element right after the 5th element without adding extra markup?
The sum of widths must not exceed the parent’s width, or there will be no space left to be distributed among them. Fixed (pixel) widths won’t always work on resize. If your six items are 150px each, and the container is, say, 800px in width, there’s no other way than to break into the next line.
Like the author of your article said: it’s more complicated. To stay that way, you could use calc() to have it dynamic. This is just an example:
.flex-item{
width: calc((100% / 6) - 20px); // 100% width ÷ 6 items - 20px space
}
Here’s an updated fiddle: https://jsfiddle.net/gy04jqdk/
Anyway, flexbox magic is relished best in its pure form. You can achieve the same using justify-content:space-between. To make it all work, you also have to add display:flex to the parent container. This will make it a flexbox and its immediate children flex-items. The extent of your changes might be limited to:
#container {
display: flex;
justify-content: space-between;
}
For visual illustration of element arrangement, the article at CSS-Tricks is well-known. You might be also interested in space-around, which is another value of justify-content.
Also, here’s a fiddle with a fixed width an evenly distributed space: https://jsfiddle.net/fdrgw3eu/
Assume you have a parent element that contains the three elements you would like to arrange in an equidistant manner:
.parent {
width: 100%;
}
.element1 {
width: 33.3%;
float: left;
}
.element2 {
width: 33.3%;
float: left;
left: -50%;
}
.element3 {
width: 33.3%;
float: right;
}
i've got a problem with display: table-cell; and the space between the cells. I'd like to have dynamically the same width for all cells.
See JSFiddle
How you can see the "Ausstattung & Skizze" is much wider than the others. Is there a way to dynamically set the same width to all cells?
You can use table-layout:fixed; on the parent element which holds display:table;
ul{
display: table;
width: 700px;
table-layout: fixed;
}
This way, every cell will get the same width if you don't force their width, no matter how many cells you have in a row.
(Edit: see this JSfiddle http://jsfiddle.net/m8evqnv0/ )
li {
display: inline-block;
width: 150px;
}
edit: no need for inline-block, with width:25%
if the width of the unordered list is fixed, then:-
li
{
width: 25%;
}
best practice:- use classes for li and then style the class.
if you want the table to be responsive, use table markups then. it will work like a charm.
fiddle:- http://jsfiddle.net/4wsmx8t0/3/
I'm currently trying to figure out a way with CSS to layout semantically-defined multi-image figures, each image possibly with their own subcaptions. The semantic for this kind of figure is an outer <figure> div containing multiple <figure class=subfigure> divs. Each of the .subfigure divs contains exactly one <img> followed by a <figcaption class=subfigcaption>.
Here is a minimal working example on JSFiddle
Goal: I'm trying to achieve a kind of layout that is common in print media; each .subfigure is vertically aligned by the baseline of its unique <img> element, while its own .subfigcaption can run as long as it needs without affecting the relative positions of the <img> amongst each subfigure.
However, with my current layout code, I can only relatively align each .subfigure as a whole: the <img> and .subfigcaption is treated as an aggregate block. The result is, as can be seen in my working example, that a long subcaption can ruin the image alignments between the subfigures.
I'd really like to find a CSS solution that does not require me to change the semantically-relavant HTML. I've considered using the table layout format, but I don't see how to place the table rows correctly given the way my html is currently organized. Also, this style would be applied to a large number of content, so I can't exactly tweak each specific figure by hand.
Note: doing figure>figure {vertical-align: top;} looks okay for this example but isn't what I'm looking for. The goal is to mimic a print convention, that we align at the bottom of the images, not the top. In fact, the more exact goal is to have all the .subfigcaptions start at a common baseline, regardless of the relative size of the images.
Current layout
Desired layout
Err, am I missing something, or does just removing the vertical-align: middle give you the desired results:
http://jsfiddle.net/LzUaC/9/
Here is the demo:
http://jsfiddle.net/salman/LzUaC/29/
And the idea:
Use display: inline-block for sub figures so that:
They stack sideways
Their baselines align
Place images with width: 100%; height: auto; inside sub figures
Optionally set vertical-align: bottom; to remove those few pixels at the bottom
Place captions with float: left; inside sub figures so that:
They move out of the flow and do not affect the height of sub figure
Set width: 100%; to make them stretch all the way across sub figure
Use clear: both on the last figure caption (I think you should however it does not seem to have any effect)
The CSS:
figure {
margin: 1em 0;
text-align: center;
background-color: #CCC;
}
figure > figure {
display: inline-block;
background-color: #AAA;
}
figure > figure > img {
width: 100%;
height: auto;
vertical-align: bottom;
}
figure > figure > figcaption {
float: left;
width: 100%;
background-color: #999;
}
figure > figure + figcaption {
clear: both;
background-color: #666;
}
/*
* for testing
*/
figure > figure:nth-child(1) {
width: 31%;
}
figure > figure:nth-child(2) {
width: 31%;
}
figure > figure:nth-child(3) {
width: 25%;
}
I know this might scare you at first but give it a chance :-P You can always replace the tables with divs contenting display:table and table-cell.
This is about the only way I could think of to achieve this effect.
http://jsfiddle.net/LzUaC/5/
CSS
.fig-img{width:40%; text-align:center; vertical-align:bottom;}
.fig-img img{width:100%;}
.fig-caption{vertical-align:top;}
.fig-summary{text-align:center; padding-top:40px;}
Removing
figure>figure {
vertical-align : middle;
}
figure>figcaption {
display : -webkit-box;
display : -moz-box;
display : -ms-flexbox;
display : -webkit-flex;
display : flex;
}
and Adding
figure>figure>figcaption {
vertical-align : top;
display : inline-block;
}
figure>figcaption {
text-align : center;
}
does the magic: running demo
Not using flex, and works everywhere... except that in IE (what a surprise...)
My JSFiddle:
http://jsfiddle.net/3YGdL/
My CSS:
#sidebar {
width: 100%;
background-color: blue;
}
#sidebar div {
width: 33%;
display: inline-block;
}
#sidebar-left {
background-color: green;
}
#sidebar-center {
background-color: red;
}
#sidebar-right {
background-color: yellow;
}
#sidebar li {
list-style: none;
}
My Question:
I want the 3 columns in one line with exactly the same width and aligned top. The content of those 3 columns should be dynamic, this means, the height should automatic change to the max height. We never know which of the 3 columns is the highest one, so this should be dynamic too.
My current solution is in the JSFiddle, I've tried other stuff like "display: table" but this was even worse...
I've tried this, but it didn't work for me...
Here is pure CSS solution
The HTML sturcture is the same, only i altered few lines in your CSS. I assigned #sidebar display to table.
Then, assigned #sidebar>div to display as the table-cell for equal height to all columns. For improving form UI i added this code
div.form-group input, div.form-group textarea {
clear:both !important;
float:none;
margin:5px;
display:block;
}
For futher details refer this URL
Hope this will be useful
Here is a solution with a simple jQuery Script: Example
First I gave every section a class .column to target them more easily.
Then I get the height of every element, and apply the highest height to all of them.
heightArrayHeading = [];
$('.column').each(function() {
$(this).css('height', '');
heightArrayHeading.push($(this).outerHeight());
});
$('.column').css('height', Math.max.apply(Math, heightArrayHeading));
Finally I gave .column vertical-align:top; to align them on top.
is this what you looking for?
JSFIDDLE
please remember that display:inline-block by default is baseline so you have to set it vertical-align:top, plus inline-block create whitespaces, you can see solutions for that here:
INLINE-BLOCK FIXES
UPDATE
now that i read carefully your question I understand you want same height for 3 columns, so I give you a link with some methods to achieve that:
Fluid Width Equal Height Columns
Hope it helps!
Firstly my CSS skills are... a work in progress. But I have got so far in as to successfully have a bunch of list items arranged in a grid. http://jsfiddle.net/ashanova/Y4SR3/2/
What I'd like to do now is centre the list items. I have tried to replace float with inline but it causes the width and height of each item to collapse. I would also like to centre the text horizontally and vertically within each list item as well, ideally ellipsisizing (not a word) overflow text. As one last specification I would like to only modify CSS to the ul and its children if thats possible.
While the language gets a little unclear when you're dealing with multiple parent and child elements, and centering (/middling) on 2 axes, I think that if the other answers aren't what you're looking for, you might actually want display: table-cell.
Check this fiddle.
If you give your li elements display: table-cell, text-align: center and vertical-align: middle, I think the text will arrange itself appropriately. Unfortunately, table-cell elements don't accept margin, so I added a 10px border instead.
In order to accomplish truncation of text that overflows and the insertion of an ellipse, you'll need to use some kind of javascript.
UPDATE
Having learned more about what you're after through the many other answers and comments, I've come up with a better solution here: http://jsfiddle.net/crowjonah/jx8sD/
What you need to do is insert <a class="list-item"> tags inside the li elements, and use this CSS:
.tile li {
background-color: white;
display: block;
float: left;
margin: 10px;
overflow: hidden;
}
.tile li a.list-item{
display: table-cell;
vertical-align: middle;
height: 75px;
text-align: center;
width:75px;
}
Text-align: center will align your list items to the center. Vertical-align: text-top will align items to the center vertically.
vetical-align will not actually do the job in this case. I wish it were that simple.
This aricle will give you some insight into the problem and will help you solve it:
Understanding vertical-align, or "How (Not) To Vertically Center Content"
This will do what you want. Borders on inline-block items are a pain, so I'm using a border to make it look right.
.tile li {
background-color: white;
display:inline-block;
border: 10px solid red;
width: 75px;
height: 75px;
text-align:center;
display:table-cell;
vertical-align:middle;
overflow: hidden;
}