I have a page with a dynamic number of boxes that I would like to distribute over several columns and lines.
I have the following wishes:
Content of the boxes is different in height, but I want all div's in one 'line' to have the same height for visual appearance. They have a border and background color.
I'dd like to justify columns over the page width
Ideally I'dd like the page to be responsive, so the number of columns should adjust to the browser width. But after reading and watching a lot of examples I don't see how this is possible in combination with the justifying, as that always needs a row div.
So I'm going for a fixed number of columns. With all kinds of examples I came to this solution, but there is still one challenge: getting each div to have the same height:
http://jsfiddle.net/johannesklapwijk/BQJ6A/
HTML:
<div class='row'>
<div class='cell'>a<br/>b</div>
<div class='cell'>a<br/>b<br/>c</div>
<div class='cell'>a<br/>b</div>
<span class='stretch'/>
</div>
CSS:
.row {
text-align: justify;
border: 1px solid red;
padding: 0;
}
.cell {
display: inline-block;
width:30%;
height: 100%; /* does not get the height of the parent div */
border: 1px solid black;
background-color: green;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
I have two questions I guess:
The first question (might make the other absolete), is there a better solution, for example with jQuery to really make a dynamic grid of div's that distrubute nicely based on browser width?
If not: can the height problem be fixed?
Thanks!
So like this? (Change the con width to 100% if you want it the size of the browser)
HTML:
<div class="con">
<div class="col">asd</div>
<div class="col">asdasdasd
<br />asdas
<br />asdasd
<br />asdasd
<br />asdasd</div>
<div class="col">asd</div>
</div>
CSS
.con {
height: 100%;
width: 400px;
display: table;
table-layout: fixed;
}
.col {
display: table-cell;
border: #000000 solid 1px;
}
DEMO HERE
And for if you want it the size of the browser change width on .con
width: 100%;
DEMO HERE
and if you want the spacing like you have on yours add border-spacing to .con
border-spacing: 10px;
DEMO HERE
I've been trying to find something that meets my needs and I'm afraid CSS only is not enough.
I guess the jQuery freewall plug-in might give me what I need, even though it might be a bit heavy for my wishes.
http://vnjs.net/www/project/freewall/
Related
I am trying to fit an image into a div (display: table cell). The width never exceeds the width of the div but the height always does. Although I think in IE 11 it's working fine because the overall size of the table is exactly correct. But in Chrome the computed height is 9.297px; in Firefox the computed height is 10.5px. The specified width and cell of the div
in CSS is 9 pixels by 9 pixels. As you can see from the code below it is a table construction but in divs. I've played around with it for ages with
the help of loads of posts on SO but I can't quite it to work perfectly. To be clear, height, cannot exceed 9 pixels.
I just wondered if anybody had any ideas to get it to work. As I say i think it's working in IE, just not the others.
I've included this JSFiddle - https://jsfiddle.net/eermepfe/ . It isn't an exact replica of my table. I have so many cells it would look ridiculous in a jsfiddle. Moreover the height stretch in the fiddle is even worse than my own broswer results; still it catches the problem.
Thanks for your help
<div id = "table">
<div class = "row">
<div class = "inner">
<img src = "image.png">
</div>
</div>
</div>
There are many rows and many divs in the rows but they follow the above set up.
CSS
#table{
display: table;
table-layout: fixed;
height: 700px;
width: 1200px;
}
.row{
display:table-row;
}
.inner{
text-align: center;
line-height: 9px;
display: table-cell;
background-color: red;
height: 9px !important;
width: 9px;
border-top: 1px solid black;
border-right: 1px solid black;
}
img{
height: auto;
max-width: 9px;
vertical-align: middle;
display: block;
}
Add this style to .inner element
.inner{
box-sizing:border-box;
display:flex;
align-items:flex-start;
}
Edited, Try these styles:
.table{
width:100%;
}
.row{
display:flex;
}
.inner{
box-sizing:border-box;
}
This question has been asked several time on stackoverflow, however I was wondering if someone -perhaps you- doesn't have a unique solution to my problem.
I currently have an parent div that is of varying height and width whose contents are also of varying width and height. To vertically align the child div I have styled it's parent as display: table; and it as display: table-cell; and nested yet another div, as seen below:
<!-- css styling -->
<style type="text/css">
.div-table {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.div-cell {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
.div-alignedcontents {
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
<!-- html -->
<div class="div-table">
<div class="div-cell">
<div class="div-alignedcontents">
<p>Some content that has a varying height and width!</p>
</div>
</div>
</div>
The problem is that the overflow:hidden property doesn't seem to work on tables, and table-layout: fixed property doesn't constrain vertical proportions/height. One solution would be to nest all the above html in yet another div and style that div with overflow:hidden, however I thought I might pick your brains for any suggestions first.
Thank you in advance for any help.
One solution could be defining padding for .div-cell in percentage and subtracting the same padding from the width of your div-table. Something like this:
.div-table {
width: 95%
height: 95%
}
.div-cell {
padding: 2.5%
}
Fiddle
I have seen this thread which answers how to center two columns given that you know the total width of both columns in pixels. What if I don't know that or don't want to hard code that? If I at any point want to change the width of the columns I need also to recalculate the with of the wrapper manually. It goes against the DRY principle and reduces maintainability.
So this is the example code. How do I modify it to get the two columns centered on an arbitrary-sized screen without specifying the total container width in pixels? (This code doesn't center at all)
<html>
<style>
.column {
width: 100px;
float: left;
border: 1px green solid;
margin: 10px;
}
.container: {
margin:auto;
}
</style>
</html>
<body>
<div class="container">
<div class="column">qwerty</div>
<div class="column">asdf</div>
</div>
</body>
display:inline-block your columns, and then you can set text-align:center; on your container
.column {
width: 100px;
border: 1px green solid;
margin: 10px;
display: inline-block;
text-align: left;
}
.container {
margin:auto;
text-align: center;
}
Fiddle: http://jsfiddle.net/dPZ7L/2/
I don't agree with the premise of the question most of the time you need to know the width of whatever you are doing as you need to deal with responsiveness - otherwise your wrapper will always 100%. It's more maintainable to set a width on the wrapper once and then use percentages everywhere else. This means you can center you wrapper and then not worry about working out what the widths of your columns are e.g.
.wrapper{
width: 300px;
margin: 0 auto;
}
.col1{
width: 50%;
float: left;
}
.col2{
width: 33.33%
float: left;
}
This is only an example. My favourite grid system uses this idea: https://github.com/stubbornella/oocss/wiki/grids
I have to divs floated, one is on the left, the other on the right. What i want to do (without js) is that the right div fills the available space (width: 100%). The problem is, that the left div has an dynamic width, else I could simply use margin-left.
I also tried display: table-cell; but that won't allow me to use margin, only border-spacing.
Any suggestion?
You can probably do it like this, works in IE8 and better, in FF, in Safari. You could use padding instead of margin, as in this example:
<style>
.c_0 {
display: table;
width: 100%;
border: 4px solid orange;
}
.c_1 {
display: table-cell;
width: 20%;
border: 1px solid red;
padding-right: 20px;
}
.c_2 {
display: table-cell;
border: 1px solid blue;
}
</style>
<div class="c_0">
<div class="c_1">
has a width and padding instead of margin
</div>
<div class="c_2">
has the rest
</div>
</div>
EDIT
This only works with "%" on the first row. I saw it too late, that you want pixels.
Here's what I'm working with:
<div id="parentDiv">
<div id="labelDiv"></div>
<div class="contentDiv"></div>
<div class="contentDiv"></div>
<div class="contentDiv"></div>
<!-- ... -->
</div>
labelDiv is always a fixed size. In this case, 30px. parentDiv is set to a width of 75%. There can be 1 to any number of contentDiv. What I want is to evenly space out the contentDiv objects. I'm trying to do this all in CSS (2.1, if possible). I was able to write a quick jQuery function to equally space out the divs, but I don't feel like its the best solution.
Any ideas?
display: table; table-layout: fixed can do this.
This is all CSS 2.1 as requested, but check the browser support - it works everywhere except IE6/7.
See: http://jsfiddle.net/thirtydot/Ec8Tw/
CSS:
#parentDiv {
display: table;
table-layout: fixed;
width: 75%;
height: 100px;
border: 1px solid #444
}
#parentDiv > div {
display: table-cell;
border: 1px dashed #f0f
}
#labelDiv {
width: 30px;
background: #ccc
}