I've got a container which sometimes has three elements, sometimes four. The height of the container is constant.
Are there any bright ideas out there for a CSS-based method for a vertical liquid layout like this?
That is, so the children are either 25% or 33% height, but they figure that out by themselves? (smart kids.) EDIT of course it doesn't necessarily have to be percentage based...
I can do something PHP-based pretty easily, but a more elegant solution would be nice.
Here is a little Sass to make your life easier:
$height: 200px
ul
height: $height
#for $i from 1 through 6
.list-#{$i} li
height: $height/$i
You can also do it with straight CSS:
.list-1 li {
height: 200px;
}
.list-2 li {
height: 100px;
}
...
With PHP, add the .list-# class to the parent element based on how many children there are.
You could also accomplish this in pure CSS with flexbox, but it will not work in the browsers you require.
Well, I've just ended up using a table as the outer container. Table rows added dynamically vertically scale the layout automatically.
Elegant enough, and prevents any PHP processing. Any other solutions welcome, of course (and maybe accepted).
Related
I have a 24 Susy column grid. I'm trying to do some boxes that will each span 6 columns (so 4 per row), but I'm wanting to add some gutters around them, withing a wider container that is 24 columns wide. Unfortunately, no matter what I try, I can't get it to work. It seems the columns are not adjusting their width to accommodate the gutters...I thought Susy was supposed to do that, no? I'm new to all of this so I've read lots of articles and posts and can't figure out this answer, so any help you can give is greatly appreciated.
Here's the code:
.solutionThumbnails {
#include span(24 no-gutters);
#include container;
#include clearfix;
li {
#include span(6);
#include gutters(8px after);
background: #666;
float: left;
height: 240px;
display: block;
&:nth-child(4) {
margin-right: 0px;
}
}
}
And here's what it's looking like right now, ignore the formatting otherwise, still coding :) (you'll see its knocking the fourth item down):
http://i.stack.imgur.com/5tmWp.jpg
Because Sass isn't aware of the DOM, Susy doesn't know that your span and gutter mixins are being applied to the same element, or are related in any way. Susy will handle the math when it has all the information. I think you want something like this?
.solutionThumbnails {
#include container(24);
li {
#include gallery(6 of 24 split);
background: #666;
height: 240px;
}
}
I don't know your settings, or many specifics about the output you need, but that should get you close. You don't need to set a span, container, and clearfix on the same element — the container mixin handles all of that. Similarly, gallery handles everything you need for a consistent layout of same-sized items.
My example doesn't get you exactly 8px gutters. The only way to mix static (px) gutters with fluid (%) grids, is to move the gutters inside the elements. You can approximate 8px gutters with a fluid value by changing the gutter ratio as needed. The default ratio is .25.
Having seen advice seemingly change over the years regarding use of empty DIVs (ie. <DIV CLASS="somediv"></DIV>) I'm confused as to the current thinking over whether or not to use when a DIV will have no inner HTML.
I can find no definitive confirmation over whether we can rely on all modern browsers to display background color and image correctly at the specified width & height when there is no inner HTML, so I'm thinking maybe we can't rely on it - yet it's such a seemingly basic area.
I have even seen suggestions that empty DIVs should never be used - but do specs really state it is 'wrong' to have empty DIVs, or is it just unreliable? (I've tried finding reference to them, but maybe I'm using the wrong terms).
To illustrate, here are 5 areas where I would normally use an empty DIV, in the absence of any recommended alternative:
as a placeholder for content which will subsequently be fetched by XHR calls
as a way to manually create space in a layout
where an image is defined in CSS (as a background image, but will effectively be foreground)
where the text will come from the CSS using .somediv:after{content:SOMETEXT}
where CSS is used to display graph bars etc using solid background color
Maybe there are different answers for each of these, which might explain the complexity over this issue.
I have, of course, tried discovering already, but for example the SO question Is necessary to show an empty <div>? suggests to me there is a huge amount of "IMHO", "probably", "seems to work" in this area. I would expect that by now that some official consensus has been reached on best practice.
So.. should I use and if so should I set font-size to the same as the smaller of DIV width/height to ensure that space is filled in all browsers? Are there any other CSS tricks to ensure this will work in all browsers?
The browser is not going to discard or forget your container just because it does not have any contents (yet).
If you want the container to have a specific placeholder shape, then you might give it min-height, min-width, height and width and make sure it's display: block;.
If you are still unsure, you can fill it with a spacer.gif/png without padding and margin.
http://jsfiddle.net/APxNF/1/
Short answer. Yes, browsers will render the div even if there is no content.
Long answer, That might now always be the case. I have worked in the web for 8 years now and never had to use these, but here they are anyway.
jsFiddle demo
HTML
<div class="empty1"></div>
<div class="empty2"></div>
<div class="empty3"></div>
CSS
.empty1 {
background: #FBB829;
height: 100px;
width: 100px;
}
.empty2:before {
content: "\00a0";
}
.empty2 {
background: #FF0066;
height: 100px;
width: 100px;
}
.empty3 {
background: #F02311;
min-height: 1px;
height: 100px;
width: 100px;
}
Sources:
Experience
Empty div with 2px width and background color doesnt show with height as 100%
http://csscreator.com/node/36023
Hi all and thanks in advance for your help.
I'm pretty new to the CSS, and I would like to have a good input to start building and learning the fastest way possible. I'm already doing some CSS tests myself. Right on the question.
this is the relative css code (I put it on pastebin because it's a bit long)
CSS CODE
As you can see in the code, the 2 tables showing up in the image, have a background and I had to set their size manually with
width:100px;
height:120px;
in the td.menuleft and td.menucenter classes.
1° Question
How do I make automatically resizing cells?
For example i want to say:
Make table tag wide 100% of the page width, then let me make classes for cell tables that are a certain percentage of the table width.
Example
Pic of my work, and how I want to make it like
This way it will be easy to make up tables into tags to automatically fill pages. I've seen something about positioning (relative, absolute) but I didn't managed to make it work.
2° question
What's the best way to structure a web page with css in general? It's ok to do like I said, a div, with tables inside and place every element in a table like manner?
Or can you give me any guide step to step on how to do a particular template?
Thanks guys.
when you want to learn how to make good and effective design that are also considered any worth by search engines, then don't use tables for layouts. tables are there for showing table data, not layout. Use instead divs and start reading about positions, displays, floats.
That is the way you want to go
If you set the tds to be a certain percentage width, they will be the percentage of the parent. so:
table {
width: 100px;
}
tr {
width: 100% /* Will be 100px */
}
td.quarter {
width: 25%; /* Will be 25px */
}
td.half {
width: 50%; /* Will be 50px */
}
And I agree with the previous poster, do NOT use tables for layouts. Not that you are doing that here. But for layouts stick to divs and such.
Here's a fantastic CSS menu:
The only disadvantage its not stretched to 100%... if it has 2 elements, it should be 50%/50%, if 4 items then 25%/25%/25%/25% just like they were table cells. How to do that? I'm new to CSS.
Use display: table/table-cell (for modern browsers and IE8+) and display-table.htc (for IE6/7).
Modify its width as 100% will make the menu span to full width.
#myfantasticmenu { width: 100%; }
I simulated the change with firebug and the needed Style defination was
#nav {
overflow: hidden; /* To clear the div */
width: 100%;
}
And about the part, where you need 50/50 for two and 25 each when the item are 4, you will require some javascript to do so.
If you consider using jQuery then it will something like
childs= $("#myfantasticmenu").children('a'); //grab the list items
childs.css('width', (100/childs.length)+%);
If avoiding scripting is your MAJOR target, then bring tables into the games, they automatically do the behavior you need.
If you can read the Headings ... one's called JWT, the other Alela Diane.. how do I get "Alela Diane" to fill up the space between them ( no puns intended )
The CSS property for these div's is set to display: inline-block.
The HTML - >
<div id="shastra_display">
<div class="shastra_post">
There are multiple div's like this containing the Alela Diane's and JWT's etc.
</div>
</div>
The CSS - >
#shastra_display
{
width: 880px;
}
#shastra_display div
{
display: inline-block;
vertical-align: text-top;
}
.shastra_post
{
width: 270px;
background-color: light-grey;
}
Is it always going to be just two
columns? – thirtydot
It's two columns because the width of
the parent box allows only two to fit.
– Zach
So, the number of columns changes depending on the browser width.
That means you can't "cheat" and do it like this (as suggested by #Stefy):
http://jsbin.com/atimu4
Other than a fixed number of columns, CSS can't do it. See this answer for a comparision of the ideas:
CSS Floating Divs At Variable Heights
You will have to use JavaScript. There's already a convienient jQuery plugin: jQuery Masonry
Some interesting demos:
http://masonry.desandro.com/demos/animating-jquery.html
http://masonry.desandro.com/demos/adding-items.html
You should probably use a 2-column template in order to display the items properly.