I need DIV blocks which have some data. Due to different content, blocks have variable height. I need to align div blocks by two. Because of the different height of blocks there is "free space" remaining. How to align these blocks so it would be aligned properly?
The data comes from JSON reques so making table seems : 1. more tricky to make grid using JS (2 elements in a row) 2. Obsolete (?) . What would you recommend?
CSS:
.book-details{
float:left;
display:block;
border-style:solid;
border-width:1px;
padding: 2px 2px 2px 2px;
border-color:gray;
width: 450px;
display: table;
}
PIC:
IE7 and below doesn't get display:table, for IE8, you have to use the html5 doctype, ie 9 will work.
Better to avoid it and just float. Remember your box model. Your width is actually 456px so what's the parents' width?
And, you should clear the float after two if you're just doing 2x across.
You could just set a height that will be tall enough for the longest div. What you're pulling in seems to be easy enough to estimate.
Related
If you have a number of block items in a list, I was wondering if there was a way to get
0 margin on the left,
0 margin on the right, and
margins between the items in the middle
Right now on the items in the list I only know how to do this margin:0px 5px 5px 0px;
This way there is no margin on the left, so it matches to the left of my container, but there is always 5px space on the far right column... however I need margin-right 5px to get space in between my items.
Any suggestions?
div.container{
width:calc(100% - 100px);
margin: 0 auto;
height:100%;
display:block;
background:black;
}
div div{
height:200px;
width:160px;
display:inline-block;
background:grey;
margin:0px 5px 5px 0px;
}
Ref: http://jsfiddle.net/Ly2M3/1/
Again I would like my items to be able to but up against the far left and right side of the container but also have margins to separate the items.
Yes, add text-align: justify to the div.container element.
I'm making another answer because it works well at centering the divs and it also matches the divs on the last line!
It requires a little knowing of the content you are using but some media queries can help you remove some extra space if you need to support multiple resolutions.
You need two things:
* The text justification (as Josh Rutherford answered) to align all lines except the last, and second
* A few invisible divs to fill the rest of the line so the browser can match the divs on the last line with the rest of the lines
The result is this: http://jsfiddle.net/wBe4F/1/, resize it so you can see the last line always matches the other lines no matter if there are 1, 2, 3, 4 or 5 divs, they always match.
So, the idea is to add extra divs with height 0px to fill one more line so the browser will also justify it and all visible divs will be aligned.
You only need to think how many ".extra" divs you put at the end. I would put enough .extra divs to cover a complete line with the widest screen size you want to support, then you could add media queries to hide unneded .extra divs if they are making too much extra space at the bottom of your container div (the background color is there to show that). Resize it small enough and you'll see all that space below the original divs created by all those unneeded .extra divs. You could give them an id for each .extra div and "display: none;" some of them if the resolution is less than some values to keep that controlled.
To make the extra divs the same width as the original divs just add them to the original divs declaration:
.data, .extra {
display: inline-block;
width: 120px;
height: 40px;
background: #666;
}
and then tweak them a little to make them invisible
.extra {
height: 0px;
}
I have two divs. One that is floated left and one floated right. The one of the left has a width set to 18% and a min-width of 217px. I want to have the div on the right take up the remaining space, while also being able to resize to fit the window.
The problem I am having is that I can set the right div's width to 82% and to float right, which works until I make the window side too small, in which case the min-width of the left div kicks in and it stops shrinking. The right div doesn't have enough space to fit, so it is pushed down.
Here's some sample code.
HTML
<div id="div1">
stuff inside of it
</div>
<div id="div2">
stuff inside of it
</div>
CSS
#div1
{
float: left;
width: 18%;
height: 100vh;
min-width: 130px;
box-shadow: 0px .3em .2em #000;
z-index: 2;
}
#div2
{
width: 82%;
float: right;
z-index: 1;
}
So this is where I'm stuck, how should I approach fixing div2? I've tried using a table instead of divs, but a border appeared around the cells that I couldn't change and it removed my box-shadow, so I would prefer a solution without it.
Your thinking of using tables is somewhat on the right track, as table elements do actually have many properties that make them capable of such a thing, but as people are pointing out in the comments, it's no longer a valid approach to use table elements for the purposes of layout for non-tabular data.
This is why CSS implemented a set of style rules built to reflect those unique properties. You can set a container around two elements with the style display: table;, and then give it's children the style display: table-cell;
Setting the width for the right side div to 100% will ensure it always fills as much space as is available to it.
But, since table cells can't break to a new row when the content exceeds the width of the table, it will automatically adjust to fit. So when another div (the left one) has a specific min-width, the div on the right is given less space in order to keep the cells contained.
Here's an example using your code:
http://jsfiddle.net/Q5rjL/
CSS table display properties give you all the benefits of these unique elements, but without the semantic issues. They are great for complex layouts where other style display types fall short.
You can also contain floats with overflow:hidden:
#div2{
overflow:hidden;
z-index: 1;
}
The DIV will fill up the remaining space (http://jsfiddle.net/MAjwt/)
Is it possible to evenly space many elements in a div with changeable width.
Here's not working example. If we use text-align:center; elements will be centered, but margin:0 auto; is not working. I want to accomplish something like justify+center:
|..<elem>..<elem>..<elem>..<elem>..| // for one container width
|..<elem>..<elem>..<elem>..| // for smaller container width
|....<elem>....<elem>....| // even smaller container
Container will be user resizable.
One picture is worth a 1000 words:
Container(red box) width:100%; So user can resize it (browser window, js, whatever).
<--> represent even spaces.
In second row <--> are bigger because there is more room. I was able to fake it with:
text-align:center;
word-spacing:3em; // but any fixed value looses proportion
I recently read about a very clever technique to do exactly what you're asking.
In short, you just need to use text-align:justify; on the container element to achieve this, in conjunction with an extra invisible block at the end.
This works because inline-block elements are seen as being part of the text content, each being effectively a single word.
Using justify will spread out the words in your text so that they fill the entire width of the element with extra space between the words. For inline-block elements, this means that they are spaced out with even spaces between them.
I mentioned an extra invisible block at the end. This is required because normal text-align:justify won't justify the last line of text. For normal text, that's exactly what you want, but for aligning inline-block boxes, you want them all to be aligned.
The solution is to add an extra invisible but 100% width element to the end of your list of inline-block elements. This will become effectively the last line of text, and thus the justify technique will work for the rest of your blocks.
You can use the :after pseudo-selector to create the invisible element without needing to modify your markup.
Here's an updated version of your jsFiddle to demonstrate: http://jsfiddle.net/ULQwf/298/
And here's the original article that explains it in more detail: http://www.barrelny.com/blog/text-align-justify-and-rwd/
[EDIT]
One final update after seeing the image you've added to the question. (I don't have a better answer, but some additional thoughts that might be useful).
Ideally what you need here is a :last-line selector. Then you could text-align:justify the main text and text-align:center the last line. That would do what you want.
Sadly, :last-line isn't a valid selector (:first-line is, but not :last-line), so that's the end of that idea.
A slightly more hopeful thought is text-align-last, which does exist as a feature. This could do exactly what you want:
text-align:justify;
text-align-last:center;
Perfect.
Except that it's non-standard and has very limited browser support.
You can read about here on MDN.
I guess as a last resort it might be an option for you, if you can live with only partial browser support. It would at least get what you want for some of your users. But that's not really a sensible way to go.
My gut feeling though is that this as as close as you're going to get. Tantalisingly close to what you want, but just not quite there. I hope I'm proved wrong, but I'll be surprised. Too bad though, because I it would seem like a perfectly logical thing to want to do.
I worked on your example, you have to make a combination of block / inline style since the justify alone just work for inline (text).
div{
width:530px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
border:1px red solid;
text-align:justify; /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */
}
div span{ /* I worked with your example you may use a class */
width:60px;
border:1px yellow solid;
display: inline-block; /* Inline-block */
position: relative; /* relative to container div*/
}
div:before{
content: ''; /* position for block element*/
display: block; /* the block part for the last item*/
width: 100%;
}
div:after {
content: '';
display: inline-block; /* inline-block for the first (and middle elements) */
width: 100%;
}
If tried a different approach, in the fiddle looks pretty similiar to the picture but the space is fixed in both lines but the elements are intercalated.
div{
width:250px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
border:1px red solid;
text-align:center; /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */
}
div span{ /* I worked with your example you may use a class */
width:60px;
float:justify;
border:1px yellow solid;
display: inline-block; /* Inline-block */
margin-left:2%;
margin-right:2%;
}
I need some help with positioning divs. The HTML structure is as follows:
<div class="container">
<div class="item">
<div class="left">
lorem lorem
</div>
<div class="right">
<p>right</p>
<p class="bottom">bottom</p>
</div>
</div>
</div>
And I have the following CSS:
.container {
float: left;
padding: 15px;
width: 600px;
}
.item {
float: left;
padding: 15px;
width: 570px;
}
.left {
float: left;
padding: 40px 20px;
margin-right: 10px;
}
.right {
position: relative;
float: left;
}
.bottom {
position: absolute;
bottom: 0;
}
The width and height of the left div is dynamic.
What I want to achieve is:
Make the height of the right div equal to height of the left div.
Make the width of the right div fill the rest of the div with class item.
The paragraph with class bottom should be at the bottom of the right div.
Here is a simple image that represents my goal:
And a link to a JSFiddle demo.
Getting the correct position and width of .bottom appears to be the biggest hurdle for a cross-browser, CSS solution.
Options
1. Floats
As #joeellis demonstrated, the flexible widths can be achieved by floating only the left column, and applying overflow:hidden to the right column.
The position of .bottom cannot be achieved in any browser. There's no CSS solution for floated columns with equal, variable height. An absolutely positioned .bottom element must be inside the right column div, so that 100% width would give it the correct size. But since the right column won't necessarily be as tall as the left column, positioning .bottom with bottom:0 won't necessarily place it at the bottom of the container.
2. HTML tables and CSS tables
The flexible widths can be achieved by giving the left cell a width of 1px and not specifying a width for the right cell. Both cells will grow to fit the content. Any extra space will be added to the right cell alone.
If .bottom is inside the right table cell, the position can't be achieved in Firefox. Relative position has no effect in a table cell in Firefox; absolute position and 100% width would not be relative to the right table cell.
If .bottom is treated as a separate table cell in the right column, the correct heights of the right and bottom table cells cannot be achieved in any browser other than Firefox. Table cells aren't flexible in height the same way they are in width (except in Firefox).
3. CSS3 flexbox and CSS3 grids
Flexbox and grids are the promising layout tools of the near future. But flexbox isn't supported by IE9 or earlier, and grids aren't supported by any browser other than IE10. Haven't tested if either can achieve this layout, but browser support may prevent them from being an option at present.
Summary
Floats don't offer a solution for any browser.
HTML tables and CSS tables don't offer a cross-browser solution.
Flexbox doesn't offer a potential solution for IE9 or earlier (and may or may not offer a solution to other browsers).
Grids only offer a potential solution to IE10 (and may or may not offer a solution there).
Conclusion
There doesn't appear to be an adequate CSS solution at present, one that would work in enough relevant browsers, with the possible exception of flexbox (if support for IE9 and earlier isn't required).
jQuery
Here's a couple modified demos that use jQuery to force the columns to have the same height. The CSS and jQuery for both demos is the same. The HTML only differs by how much content is in the left and right column. Both demos tested fine in all browsers. The same basic approach could be used for plain JavaScript.
Taller content on the left
Taller content on the right
To keep things simple, I moved the internal padding for the left and right div to a child element (.content).
Sibling elements of same height and staying on the same row can be achieved by displaying them as table-cell and parent as display: table.
Working fiddle: http://jsfiddle.net/SgubR/2/ (which also display the overflow: hidden along a floating element technique for creating a column. The latter needs a clearfix)
Table-cell in CSS uses any HTML element you want (section, div, span, li, whatever), its semantics is unrelated to table, tr and td elements used for table layout (except that the visual result is the same, that's what we want).
display: table is set on a parent
display: table-row may be used on an element in-between but if it works without it, fine
display: table-cell is set on each child
a width is set on none, some or all these "cells". Browser will adapt both to content and widths set in order to calculate their widths (and total width of parent, obviously)
table-layout: fixed will tell browsers to switch to the other table layout algorithm where they don't care about the quantity of content, only to widths set by CSS
vertical-align: top will be needed in most cases (but you may set other values, great for complex layouts)
margins aren't applied on "cells", only padding. Margins only apply on table itself. Though you still can separate "cells" with border-collapse: separate and/or border-spacing: 4px 6px
Compatibility: IE8+
Fallback for IE6/7 if needed is exactly the same as for inline-block
Longer explanations in previous answers: here and there with also the good old method of faux-columns (your design must be thought with this technique in mind)
Just add an oveflow to the right column and don't float it.
.right {
position: relative;
overflow: hidden;
}
This will make right to fill the rest of the width.
Something like this might work:
http://jsfiddle.net/PCvy9/2/
The main key of what you're looking for lines in the:
.right {
overflow: hidden;
background-color: #C82927;
}
This is due to something called the "block formatting context." Great reasoning and tutorial as to why here: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
However, their heights are not completely linked; in this example, your left side block's height would still need to be manually set (as it's a floated container)
I've started to write a design for my video streaming site.
http://www.xjerk.com/new.site/ [SFW]
The content area is horizontally fluid, and the white boxes in the content area are divs that are floated left. This means they all sit next to each other nicely, and flow onto a new line when there's no room left.
However, the content area often has a blank area on the right side, where there's not enough room for another white box. I would like to get rid of this; either by making the whole container div (#container_inner) shrink to remove this space, or failing that, make the blue bar above the white boxes contract (by making #content contract) so the the right edge is in line with the white boxes.
I've tried setting the left area (#content) to inline-block, but this doesn't work since the content inside is bigger than the div width (hence the overflow onto multiple lines).
Is there any way this can be achieved, or would a fixed width design be my best bet?
PS: I hope I've explained everything well enough.
Use media queries to set break points for the blue bars size.
Have you tried setting the video_box to a % of the width?
This should remove the white-space.. Remember to change the margin to percentage too, else width could start to exceed 100%+.
For exmaple:
.video_box {
margin:1%;
width:31%
min-width:100px;
height:370px;
border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #d0d0d0;
background-color: #ffffff;
float: left;