One more time today i stumbled upon a problem i always have with css layouts. I'd like to have 5 divs in a horizonzontal row. Let's say for example their widths should be:
1 : 60 px,
2 : 30 %,
3 : 40px,
4 : *
5 : 100px
where * stands for "fill up the remaining space". Back in the old days that's been the way we layouted width tables. Nowadays due to accesibility reasons html tables are banned for layouts. This is just an example. I'm searching for a general solution.
Does someone know a generator, a lightweight javascript solution (can be a jQuery plugin), a tutorial, a book, or a magician which can help me to solve this problem for now and forevermore?
Allthough a javascript based solution is possible a non-script solution would be preferred.
You can use display:table to create this effect, I made a quick fiddle
This makes the individual div's act like table cells, and the section is the table, I used a section just to have cleaner code, a div would work too.
You will notice the table cells get smaller than you specified if the window size is too small, this is because of the table's default behaviour. To combat this just add a min-width (with the same value as the width)
http://jsfiddle.net/lnplnp/bFrmD/
#div1 {
width: 60px;
}
#div2 {
width: 30%;
}
#div3 {
width: 40px;
}
#div4 {
}
#div5 {
width: 100px;
}
.layout {
display:table;
}
.cell {
display: table-cell;
}
<html>
<head>
<title>DIV LIKE TABLE</title>
</head>
<body>
<div class="layout">
<div id="div1" class="cell">1</div>
<div id="div2" class="cell">2</div>
<div id="div3" class="cell">3</div>
<div id="div4" class="cell">4</div>
<div id="div5" class="cell">5</div>
</div>
</body>
</html>
Cross your finger ! With recent broswers you can do it now !
Related
I would like to conserve the some height for two dynamic table.
I know that the solution is by using javascipt(
document.getElementById('bloc2').style.height = document.getElementById('bloc1').clientHeight ).
Can we find other solution with the using of HTML and CSS?
First of all, please make an effort with your language skills (if you're not good at English, verify it), and use the styling tools of StackOverflow.
All the information is here, check it out. And as an answer I'd first advise not to use <table> if not really needed !
<div id="container">
<div id="block_1" class="foo">
<!-- Your HTML/text content -->
</div>
<div id="block_2" class="foo">
<!-- Your HTML/text content -->
</div>
</div>
And for CSS (the values are examples, use yours) :
#container {
width: 100%;
/* The height will be minimum 350px, depending on the content */
min-height: 350px;
/* I often use flexbox properties, it does really well the job */
display: flex;
flex-flow: row nowrap;
justify-content: center; // Default value
}
.foo {
width: 50%;
/* this value will make your 2 blocks the same height according to their container */
height: inherit;
}
Check the Flexbox properties (there are many), it can ease your work.
The problem occurred on other projects, but then I made all the divs the same size. I made a print screen of my problem.
As you can see the the third div is a little longer then the others (and yes I want to keep this). My css or bootstrap wants to skip a row.
html
<div ng-repeat="work in myWork" class="col-lg-3 col-md-3 col-xs-12" id="myWorkHolders">
css
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
}
Problem
DIVS skip a row when the div above is not the same size as the others.
Question
what Css terms can I use so the divs will display under each other despite different sizes.
you can add an extra class with min-height to every div, just match the height of ur largest div and put that into css class.
<style>
.yourclass {
min-height:Xpx; //replace X with the height of your largest div.
}
</style>
and now just put this class into every div as:
<div class="col-md-3 yourclass">.col-md-3</div>
I have run into this problem before; I'm curious what other people say. Not sure if this is the best solution, but what I did that worked for me was assign a min-height to those divs. the min-height you assign will depend on the height of your largest div.
so:
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
/* the exact height specified will have to be experimented with */
min-height: 250px;
}
With bootstrap you need to use the row class to make sure the columns layout correctly no matter the height a particular column.
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
So when creating your loop you need to think about how to add in the row container after every fourth column.
EDIT: Problem fixed. See my own answer for details. Will mark it as the answer in 2 days when SO lets me.
I am populating a div with a list of square images using Knockout. The div is currently of fixed width and height, though will eventually be resizeable. I would like the images to fill up the div row by row. So when image n reaches the boundaries of the div's width, image n+1 is wrapped around to the next row. Currently, the images flow over the boundaries of the div to fill the entire window.
The current markup is as follows:
<div data-bind="foreach: images" width="500" height="500">
<img data-bind="attr: { src: fileName }">
</div>
I've played around with float and overflow with no success so far. I've also tried putting the images in their own divs. The images exhibit the wrapping behaviour I want in the whole window to form a grid, just not in the div I've put them in.
How do I make the images stay inside the div while getting the grid that I want? Is this possible with HTML/CSS alone or does it require some Javascript?
As Daniel Weiner said in his comment - floats are the way to go. Add in display : inline-block; to keep each element aligned. Example:
#container {
width: 100%;
background-color: black;
display: inline-block;
}
.block {
height: 100px;
width: 100px;
background-color: #fff;
margin: 10px;
float: left;
}
<div id=container>
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
</div>
My problem was that I was not specifying the length units for my containing div. In my original markup, I was using the HTML attribute width="500". Changing this to inline CSS and specifying the length unit solved the problem, keeping my 2D grid inside the div: style="width: 500px"
Besides this, as suggested by wahwahwah, the following style was required for a containing div for each image: float: left;
Inlining the CSS, the end result is:
<div data-bind="foreach: images" style="width: 500px">
<div style="float: left;">
<img data-bind="attr: { src: fileName }">
</div>
</div>
I'm working on a dynamic php gallery.
The thumbnails will all have the same width but various heights. They'll be placed from left to right. So, I don't want to use a five columns pattern.
I guess it's not possible to do it only with CSS, so maybe you know any jquery script that would do the job? I guess this kind of gallery pattern is quite common...
http://i.stack.imgur.com/Xwdx0.png
Here's the pure css solution using css3 columns. This isn't going to work in older browsers, read here (click). Live demo here (click).
You can use masonry.js, isotope.js, or packery.js for more compatible js solutions.
<div class="col-5">
<div class="sm"></div>
<div class="lg"></div>
<div class="sm"></div>
<div class="sm"></div>
<div class="lg"></div>
<div class="lg"></div>
<div class="sm"></div>
<div class="lg"></div>
<div class="lg"></div>
<div class="lg"></div>
</div>
css:
.col-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.col-5 > div {
display: inline-block;
}
.sm {
height: 75px;
}
.lg {
height: 125px;
}
You could try using/jigging a Jquery plugin like the following:
http://codecanyon.net/item/jquery-tiles-gallery/2281417
or
http://codecanyon.net/item/jbmarket-image-gallery/full_screen_preview/3028128?ref=lamdang
If you're trying to make the layout the 'pintrest' way, you can have an array of x columns and iterate through each column to check for the shortest height, and add the next box in that column.
That way you would know it works for all browsers [unless they have js disabled] and then you can style the width of the columns.
I currently have a grid made out of square DIVs (200px x 200px each).
I have started in the top left hand corner and floated each one left so that the 2nd one is to the right of the first and the the third to the right of that and so on. When it runs out of horizontal space in it's container the next square automatically starts a new row, obviously.
This is great if you want the grid to keep getting longer vertically each time a row fills up, but I want mine to be three squares high and grow to the right hand side, so the first square goes in the top left, the 2nd underneath it, the third underneath that, then (because the container is 600px high) the 4th square should start a new column and go to the right of the first.
Is it possible to achieve this for an unspecified number of squares so it just keeps growing into new columns without resorting to javascript?
IE6 support is not necessary.
Any help would really be appreciated.
You can try CSS 3's multi columns http://www.w3.org/TR/css3-multicol/ , http://www.css3.info/preview/multi-column-layout/
Using properties like
-moz-column-width: 5em;
-webkit-column-width: 5em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
http://jsfiddle.net/Txgnk/1/
Looks like IE 10 is the first IE to support it http://caniuse.com/multicolumn
Try this,
<style>
.parent {
height:600px;
white-space: nowrap;
}
.child {
width: 200px;
height: 600px;
display:inline-block;
}
.grand-child {
width: 200px;
height: 200px;
border: 1px solid;
}
</style>
<div class="parent">
<div class="child">
<div class="grand-child"></div>
<div class="grand-child"></div>
<div class="grand-child"></div>
</div>
<div class="child">
<div class="grand-child"></div>
<div class="grand-child"></div>
<div class="grand-child"></div>
</div>
...
...
</div>