I would like to create a grid with 4 columns. Columns width should fit to there respective contents, and gutters should all share the same width changing depending on the columns width. The tricky thing is that the total width of the container / grid should be adjustable dynamically, as it should be a responsive design.
Here is a scheme that's explains what i want to achieve :
And here is a fiddle trying with margin-left:auto (doesn't work)
nav ul {
width:80%; /* fluid design */
}
nav ul li {
display:inline-block;
}
nav ul li:not(:first-child) {
margin-left:auto;
}
I can use latest CSS3, Sass, Compass and Susy. But i haven't found any way to do it yet. It seems Susy doesn't allow me to have columns adjusting their width to their content - or i haven't found how. Does anyone have any idea ? thanks !
As in the link I posted as a comment, you may use flexboxes to achieve your layout.
Basically if you give your container this CSS:
.flexbox-container {
display: flex;
justify-content: space-between;
}
your content will adapt to the 100% of the container and space between elements will always be the same.
Here you have a FIDDLE as an example. Try writting more on any div to see it growing.
I've added a margin right to the elements so there's always a gap between elements. If you remove that margin, when no room the space between elements will be 0.
There's more options avalaibles like giving your elements the option to shrink if no room enough with flex-shrink: and many others...
More info about flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
At this point in time the only way to achieve this is through Javascript. CSS is not capable of finding the width based on your content.
Related
I am displaying verse: poetry and song lyrics.
I have one layout in which the lyrics flow as multi-column text. I have it working with flex layout, but it is not 100% to my satisfaction. See this codepen: https://codepen.io/sidewayss/pen/WNNEBgV
The remaining issue is the horizontal spacing of the columns. Flex layout spreads the columns as if I had set an alt version of align-items:space-between. I want the columns to align left, which can be accomplished only by setting the width of the container <div> to one pixel greater than the width at which it starts scrolling horizontally, the minimum width for displaying all the text.
It seems to me that there should be a way to do this with grid layout, but I have not been able to make it happen. I have tried a variety of settings, including the various auto flow settings.
Is there a solution for this in CSS, or do I have to rely on JavaScript? I have a way of doing it in JS, and I already have code that manipulates these elements, but I'd much rather do it in CSS. It seems like a supremely reasonable layout request, at least to me. The biggest problems I've encountered with grid layout are the need to set the number of rows and columns and to size those columns. I want that to be all automatic because otherwise I'm still writing JS code to set those values.
div {
display:flex;
flex-direction:column;
flex-wrap:wrap;
height:300px;
overflow-x:scroll;
/* align block to start*/
align-content: flex-start;
}
span {
padding:0 8px;
/* align child block to start*/
align-self: flex-start;
}
I want to create a horizontal nav that sometimes has multiline link text (not always; it's dynamically generated), and that has all the text vertically centered.
The caveat is that I'd also like to make the nav so that the a elements fill up the entirety of their containing element so that the clickable and hoverable area is much bigger for each link.
Is this possible with just CSS? Thank you.
full disclosure: I don't typically use this technique, but if you think that sometimes links will wrap, this is a pretty easy solution. Also, this does not work in ie7 and below
Every frontend developer will tell you that using tables for non-tabular data is a no-no, but using table styles is going to help you here.
If you apply display:table; to your containing div/ul/whatever, and display:table-cell to each item in your navigation, you will then be able to use properties like vertical-align:middle;.
Do you know how many elements you will have in your navigation? If not, create a few css properties that look like something like this:
.container.items-2 .item { width 50%; }
.container.items-3 .item { width 33%; }
.container.items-4 .item { width 25%; }
.container.items-5 .item { width 20%; }
/* ...etc... */
I want to achieve that result as my web app layout:
I create application for mobile usage first. I want to fixed top menu that stretch to it content and content at the bottom of this menu. Content height can be very long but I want to use overflow-y: auto;. I use CSS display: table; for container and display: table-row; for menu and content to solve this problem. JSFiddle example here.
Which pros and cons should I expect? I.e. mobile browsers interoperability, performance issues and so on.
I had this exact same issue and I solved it in exactly the same way you did. The only issue I ran into was that the row on the bottom:
#content {
display: table-row;
height: 100%;
}
IE will not respect this and it will see height:100%; and instead of taking of the remaining space of the table like every other browser it will be equal to 100% of the entire table causing your layout to render incorrectly. The only way i found to solve this was to use a bit of jquery with a window resize function to basically only fire when it's IE and apply a pixel value height to the #content based on what it should be.
Take a look at this fiddle. I've got divs on either side, with fixed widths of 50px, and display:inline-block.
I want the div on the inside to expand to fill the gap between these two divs, but the problem is if I put lots of text inside this div it pushes itself onto the next line, and the layout breaks down.
Also, I want it so the middle div will fill the space even if there is a small amount of text in it (less than the page width).
How can I ensure the left and right divs are always on the left and right, and that the content div always fills the space in between them?
I tried using CSS3's calc, but it appears that it isn't very well supported.
This is the sort of situation that was handled in the past by using tables for layout. This will be fixed in the future by the new Flexbox implementation https://developer.mozilla.org/en-US/docs/CSS/Flexbox
In the meantime, you can emulate the table effect by using display: table-cell, this will cause each div to stretch the way you would expect a table to. If you want more control over the total width you can wrap it in a div that has a display: table-row and a set width.
.col {
background-color:#333;
color:#EEE;
width:50px;
display:table-cell;
}
.middle {
background-color:#EEE;
color:#333;
display:table-cell;
}
If you are open to using javascript, this will work:
$(function(){
$('div.middle').width( $('div.container').width() - $('div.right.col').width() - $('div.left.col').width() - 10 );
$(window).resize(function() {
$('div.middle').width( $('div.container').width() - $('div.right.col').width() - $('div.left.col').width() - 10 );
});
});
Working JSFiddle:
http://jsfiddle.net/vh8Zu/
http://jsfiddle.net/XKL6E/
How can I centre these images so they form a pyramid (overlapping each other halfway)?
If you don't care to support IE7, you can use display: inline-block instead of float: left and just center the whole chunk: http://jsfiddle.net/XKL6E/16/
Add display:inline-block to .empty-button, and text-align:center to .button_row:
http://jsfiddle.net/XKL6E/14/
If you change all of the buttons to span elements instead of div, you can apply the display: inline-block to them.
Credit to #Blender for the inline-block idea and the original version of this fiddle.
http://jsfiddle.net/XKL6E/21/
Edit:
I forgot to mention, the difference between inline-block on a div and a span element is IE7 support. Articles like this one give all sorts of hacky ways to make this work. In the case of div elements, substituting span is good enough.
Using fixed width divs and centring them automatically with
margin-left: auto;
margin-right: auto;
The fixed width is dependant on the width of the images. If the image width is always the same, which I assume in your case is, you can multiply the width by an integer ( use jQuery .css(attr,value) selector ).