I have a list of items displayed in 3 columns. The items are of various heights which is causing problems with their alignments, forcing larges gaps. I would like them to display tight to each other vertically. You can see what I am talking about at my site Matthew Grenier Consulting. I would like the "Bright Beginnings" item to be directly beneath the "Yes We Do Coffee" item and the same in the first column. Any ideas how I can do this with CSS? I have played around for a couple hours without luck. Thanks.
Simply use display: inline-block; together with vertical-align: top; instead of float: left;.
div.appico ul.sp-portfolio-items > li {
background: transparent none repeat scroll 0% 0%;
padding: 0px;
margin: 0px;
/* float: left; remove this! */
display: inline-block; /* use this */
vertical-align: top; /* and this */
}
Also, remove float: left; from div.appico .sp-portfolio-item, or replace it as well.
This is the visual result:
If you want the fourth box even closer to the first one, I suggest you restructure this part of the page so that the boxes are beneath eachother (using three columns) instead of to the right of eachother, or you could set a fixed height.
.sp-portfolio-item:nth-child(3n+1){
clear:left
}
Related
I've try to create 2 colums list so I use:
ul {
overflow: hidden;
}
ul li {
float: left;
width: 50%;
}
but when I have 2 items that one on the right have list bullet and the one on the left don't. Why is that?
PS: is there a way to have 2 columns list without using :before with content: "•"
The left ones are still having a bullets but you can't see it because of the float: left;. I think if you remove it, the problem will dissapear, specially if before that you have a reset margin: 0; padding: 0; for all the elements in the current html page.
I had the same problem and neither overflow:hidden nor display: inline-block worked for me.
So I cheated using the unicode number for 'bullet' before all items in my list: •
It's far from elegant, but does the trick in desperate situations.
I'm trying to vertically center single and multi-worded links in a horizontal nav. The multi-worded links work fine but as you can see the single worded links float to the left. I tried adding a width to ul li a and ul li.colour but that changes the width of the div itself.
http://codepen.io/Compton/pen/ufGCI
You can try this, it's a bit hackish but it works:
ul li span {
display: inline-block;
vertical-align: middle;
height: 110px;
font-size:2em;
text-align: center;
padding: 0 20px;
line-height: 110px;
}
.doubleLine {
display: table-cell;
line-height: 1em;
}
The line-height on the span centers it vertically; you add the doubleLine class to spans with more than one line to revert them and keep them working like they were.
I'd like to see a neater solution than this, but again it works for now. You may have trouble down the line as the double line spans are only happening to look like they work, they won't always work for every combination of words. You can test this by changing one of the words to two characters, you'll see it doesn't actually center it.
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;
}
I have got a couple of boxes containing text which should be displayed next to each other. They all have a fixed width, but a variable height (depending on their content). They are inside of a container with a variable width.
If there are too many boxes I want them to jump into the next line and start from the left again. I realized this using left floated boxes. This causes a problem if the first box per line is higher than the next one, because then the ones from the new line won't start from the left. Here's a demo:
HTML:
<section>
<article>One: This text is so long, it's so long oh my gosh!</article>
<article>Two</article>
<article>Three: bla bla bla bla bla bla bla bla</article>
<article>Four</article>
</section>
CSS:
section{
width: 300px; /* For demo, this can vary */
overflow: hidden;
}
article{
float: left;
width: 100px;
background: #dddddd;
padding: 10px;
margin: 10px;
}
You can also have a look at this JSFiddle, where you can see the problem immediately: http://jsfiddle.net/dwr6K/ Box "Three" starts right from Box "One", although I'd like it to start in the new line under Box "One". Sadly I can't use clear: left because I don't know how many boxes will fit in a line.
Is there a way to prevent this and to display it the way I'd like to?
Here: http://jsfiddle.net/dwr6K/9/
Just remove float: left;
and add
display: inline-block;
vertical-align: top;
to article.
As #JimmyX pointed out, do go through this post about Cross-Browser Inline-Block
Basically, what float:left does is it makes each element stick next to the leftmost div it can find. And hence if the heights vary, you don't get the desired layout.
You can use display: inline-block instead of float: left if you're not too worried about support for older browsers.
Here's a much more detailed rundown of display: inline-block's quirks.
To get your example working, simply use:
article {
display: inline-block;
vertical-align: top;
width: 100px;
background: #dddddd;
padding: 10px;
margin: 10px;
}
If the heights all vary then have a look at the jQuery plugin Masonary - http://masonry.desandro.com/
You can use a clear left on every odd div assuming you only want 2 divs to ever be paired together. See: http://jsfiddle.net/dwr6K/
That is, add the line article:nth-child(odd) { clear: left; }
this is the layout I'm working with. what I'm trying to achieve is that as the window is collapsed I want the div on the right to collapse allowing the inner elements to be pushed down.
my css is as follows:
#left-div {
display: block;
float: left;
}
#right-div {
display: block;
float: left;
}
#right-div elements {
display: inline-block;
}
I basically want to achieve what's going on in the last photo without the right div getting moved down first. any ideas?
Edited to remove pictures as I've come to an answer and I'm not sure if I was supposed to post them.
After taking various stabs at it, appears that JavaScript/jQuery may be your only solution...