I'm struggling spreading fives divs evenly inside a resizeable div. I have looked at How to spread elements evenly (horizonatly)? but cant get it to work :-(
The problem seems to be that even thoug my div width is set to 20% the last element is wrapped onto the next line if the surrounding divs width is not dividable by 5.
My css is this
#exposureSummaryContainer > div { width: 20%;display: inline-block;}
and my html:
<div id="exposureSummaryContainer">
<div>1.000.000</div>
<div>1.000.000</div>
<div>1.000.000</div>
<div>1.000.000</div>
<div>1.000.000</div>
</div>
How do I ensure that all five elements stay on the same line?
I made this http://jsfiddle.net/GTwFb/ to illustrate my problem.
Add float:left;
#exposureSummaryContainer > div { width: 20%;display: inline-block; float:left; background:red}
DEMO
There is a whitespace you don't see, if you removed it,
<div id="exposureSummaryContainer"><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div></div>
it shall work.
This is maybe not the best looking way.. but its working
#exposureSummaryContainer { width: 100%; display: table; }
#exposureSummaryContainer > div { width: 20%;display: table-cell;}
You can edit the width to a specific size
the problem is the physical space on the markup amongs div elements when their display is inline-block, so a workaround is the following:
#exposureSummaryContainer {
white-space: nowrap;
word-spacing: -3px;
letter-spacing: -3px;
}
#exposureSummaryContainer > div {
width: 20%;
display: inline-block;
white-space: normal;
word-spacing: normal;
letter-spacing: normal;
}
I'd use the float: left; property
This works for me:
http://jsfiddle.net/GTwFb/2/
Well I would you the trick of table:
<table style="width:whateveryouwant">
<tr>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
</tr>
</table>
This works for me all the time ^_^
Related
What I am trying to do is to have 4 images align in a cross like pattern. I was thinking of using a table, but I do not want the corners, which will be while space to be the same as the image. And I want to be able to use different size images without having the page change if the image is a different dimension. I do not know how to approach this.
Below is an image of a rough sketch of what I am trying to do. One thing is that the images might be taller or longer.
Thanks in advance.
One solution would be to create invisible div elements that occupy the same height as your images, and inject them in the correct locations in the HTML:
div, img {
float: left;
width: 33%;
height: 100px;
}
See the fiddle with same image sizes here.
You can slightly modify this to use variable heights for your images by wrapping each row in its own div, then setting them height of each of those:
.top *, .middle *, .bottom * {
float: left;
width: 33%;
height: 100%;
}
.top, .bottom {
height: 100px;
}
.middle {
height: 200px;
}
See this fiddle for variable heights.
Update:
There's also the option to change the 'inset' of the middle row by giving the div a smaller width and adding margins to the two images in the middle row:
.middle div {
width: 20%;
}
.middle img:nth-of-type(1) {
margin-left: 6.5%
}
.middle img:nth-of-type(2) {
margin-right: 6.5%
}
Fiddle demonstrating this.
You can always play around with the width of the invisible div and the margins in order to get the desired output :)
Note that I've used widths that add up to 99% in these examples. You can get more specific if you'd like, but you'll never be able to reach 100% ;)
Hope this helps!
Here is another option using Flex-box
this solution can accommodate images of different sizes
and you can read more about it here
.wrapper {
font-size: 150px;
/* <-- adjust this to proportiantly scale everything */
outline: 1px dotted red;
}
img {
width: 1em;
}
.container,
.row-container {
display: flex;
width: 3em;
}
.container {
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.row-container {
justify-content: space-between;
flex-direction: row;
}
<div class="wrapper">
<div class="container">
<div>
<img src="http://placehold.it/100x150">
</div>
<div class="row-container">
<div>
<img src="http://placehold.it/150x120">
</div>
<div>
<img src="http://placehold.it/170x110">
</div>
</div>
<div>
<img src="http://placehold.it/190x200">
</div>
</div>
</div>
And here is a table solution
which can also use images of varying size with radius corners
td {text-align:center;vertical-align:center;}
td img {border-radius:4px;}
<table cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td><img src="http://placehold.it/310x120"></td>
<td></td>
</tr>
<tr>
<td><img src="http://placehold.it/175x110"></td>
<td></td>
<td><img src="http://placehold.it/300x150"></td>
</tr>
<tr>
<td></td>
<td><img src="http://placehold.it/280x100"></td>
<td></td>
</tr>
</table>
I'm trying to get my text to align with the top of the image in the cell beside it. Vertical-align top doesn't seem to be working? I think currently it's trying to center itself relative to the other cell. Maybe there's a better way to do this with floats or something?
Here's the CSS:
table#body1 {
padding: 0px;
vertical-align: top;
margin-bottom: 10px;
margin-top: 5px;
}
td#images {
width: 30%;
}
td#text {
width: 70%;
padding-left: 15px;
text-align: justify;
vertical-align: top;
}
And the HTML: (all the divs are inline-block elements if that makes a difference)
<table id="body1">
<tr>
<td id="images"><img class="halfimg1" src="titania2.jpg" alt="Queen Titania"><br></td>
<td id="text">
<div id="header">Wander in these woods.</div><br>
This is some Text.<br>
<div id="caption"><br>This is my caption.</div>
</td>
</tr>
</table>
Thanks in advance for helping!
Add vertical-align: top; to td#images as well.
Keeping in mind the comment I made above, you probably want to move the vertical-align: top; rule from td#text to td#images
jsFiddle example
How can I align vertical text, that is generated by two spans, inside a div inside a table cell. I've tried many combinations of text-align,display but nothing worked. I have this html segment
<table>
<tr>
<td>
<div class="container">
<span>This is span-sentence-1</span>
<span>This is span-sentence-2</span>
</div>
</td>
</tr>
</table>
and the output is
This is span-sentence-1 This is span-sentence-2
while I want to be rendered like this
This is span-sentence-1
This is span-sentence-2
fiddle:http://jsfiddle.net/hjuxdd1b/1/
You can use following:
.container {
width: 100%;
line-height: 50px;
border: 1px solid black;
/*height: 50px; Remove height*/
}
.container span{
display: block;/*Set display to block*/
}
fiddle
Give display: block to .container span
.container span {display: block;}
Remove the height and line-height in the .container
Fiddle: http://jsfiddle.net/praveenscience/hjuxdd1b/7/
Add br tag after the first span or replace span with div.
You may not need that div:
Set those spans to display: block so they are each given their own line.
Give vertical-align: middle to the td so that its content will stay vertically centred.
Have a fiddle
By default a span is display: inline so they will line up next to each other. You could read more about the span element over on the MDN.
CSS
td {
vertical-align: middle;
height: 100px;
border: 1px solid black;
}
td span {
display: block;
}
HTML
<table>
<tr>
<td>
<span>This is span-sentence-1</span>
<span>This is span-sentence-2</span>
</td>
</tr>
</table>
I have a table, where the left td takes the majority of the space, and the right td have very little space which forces the words to break.
I am trying to make so that both TD are the same width of the text content inside. I have done some research online but nothing I found fixed the problem.
Any help would be really appreciated! Below is my table code and css
CSS:
#order_info_container {
width: 620px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
}
#customer_service {
padding-top: 10px;
vertical-align: top;
text-align : right;
}
#order_information { padding-top: 20px; }
#totals_o {
padding-top: 20px;
text-align: right;
}
HTML:
<table id='order_info_container'>
<!--This left td is taking most of the space -->
<tr>
<td><img id='o_summary_logo' src='o_summary_logo.png'></td>
<!--This right td is being squished -->
<td id='customer_service'><b>Customer Service # (646)-397-5751</b><br>
Thank you for your business </td>
<!--This left td is taking most of the space -->
<tr id='totalswrapper_o'>
<td id='order_information'>Order Placed - 07/01/14 12:18AM<br>
<span id='order_number'>Order # - 775</span><br>
<span class='conf_num'>Confirmation # - 81<br>
</span></td>
<!--This right td is being squished -->
<td id='totals_o'>Sub Total = $28.95<br>
Tax = $2.57<br>
Grand Total = $33.52<br></td>
</tr>
</table>
You can use the table-layout: fixed attribute on your table so that all cells have the same width. Example on jsfiddle here:
HTML:
<table>
<tr>
<td>column1 Lorem Ipsum dolor sit amet</td>
<td>column2 consectetur…</td>
</tr>
</table>
CSS:
table {
table-layout: fixed;
width: 200px;
border-collapse: collapse;
}
td {
border: 1px solid red;
}
Also, the fixed layout will automatically give the same proportion of the length to any number of cells you have, i.e. if you had 2 cells, each one will be 50% of the table, 3 would be 33% each and so on… You can play with the fiddle to try this.
Defining a width of 50% for your <td> in CSS should solve this problem. Having said that, 50% will work if you have only 2 <td>'s.
table td{
width: 50%;
}
FIDDLE. I have added a border in fiddle to show this effect clearly.
A better way would be to use the table-layout: fixed; property on table like #arielnmz recommends in his answer. It works best even when you have dynamically generated columns. This way, you won't have to calculate and define how much space a column takes. They will always be equally divided. So, you should probably go with this approach instead.
table{
width: 100%;
table-layout: fixed;
}
FIDDLE
I have tried now several things (and looked around here) and nothing worked so far. So I am going to ask.
What I want:
I have the following simple HTML:
<table>
<tr>
<td class="small">First column with text</td>
<td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
<td class="small">Small column</td>
</tr>
</table>
The table itself should be 100% width of the parent container.
I wish the first and last column (.small) to be as large as they need to be, so the content can fit into it without a line break (so pretty much what white-space: nowrap does). The middle column (.extend) should take the rest of the space (so the table will stay within 100% width of its parent container) and the text within .extend should be ellipsised before it needs to break to a seconds line.
I've prepared a fiddle for this at http://jsfiddle.net/3bumk/
With these background colors I would expect a result like:
Is there any solution for this?
What I get:
My problem is, if I can make the text to stay in one row (having no line breaks), the table will always overflow its parent container width (and cause it to be scrollable), before having the idea to ellipsis the text in the middle column.
What is no solution (I often found):
It's no solution to set the first and third column to a 'fixed' with (percentage or pixel), because the content will have different length from time to time. It is possible to add as many div or span as needed (or get rid of the table all together - what I tried first, with display and table but I didn't find a working solution that way either).
PS: It would be very nice if you could edit the fiddle to a working example, if you know one :-)
EDIT I am free to use divs instead of a table too!
Here is an answer using divs instead of a table: DEMO
HTML
<div class="container">
<div class="fnl first">First Baby</div>
<div class="fnl last">Last Guy</div>
<div class="adjust">I will adjust between both of you guys</div>
</div>
CSS
.container{
width: 300px;
}
.first{
float:left;
background: red;
}
.last{
float:right;
background: orange;
}
.adjust{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Something like this? http://jsfiddle.net/NhGsf/
By using: display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;
And setting first and last child to fixed width the middle section will have the rest off the space
min-width in combination with width:100% seems to work in firefox and chrome:
tr {
td:first-of-type {
width: 100%;
}
td:last-of-type {
min-width: 200px;
}
}
I was facing the same challenge and I found the following solution using tables.
The HTML needs to use a DIV in the long column.
The CSS defines your small and extend classes. The hard part being the definition of the extend class.
This gives you the behavior you describe.
HTML
<table>
<tr>
<td class="small">First column with text</td>
<td class="extend">
<div class="small">This column should fill the remaining space but should be truncated if the text is too long.</div>
</td>
<td class="small">Small column</td>
</tr>
</table>
CSS
table {
margin-top: 50px;
}
table td {
white-space: nowrap;
}
table td:nth-child(1) {
background-color: red;
}
table td:nth-child(2) {
background-color: green;
}
table td:nth-child(3) {
background-color: orange;
}
.extend {
display: table;
table-layout: fixed;
width: 100%
}
.small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
You can re-arrange the columns by moving the longest one at the end then use nested tables.
CSS
.extend
{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
}
td
{
white-space:nowrap;
}
.box
{
width:1000px;
border:blue solid thick;
overflow:hidden;
}
HTML
<div class="box">
<table width="100%" border="1">
<tr>
<td class="small">First column with text</td>
<td class="small">Small column</td>
<td>
<table>
<tr>
<td class="extend" >This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long.</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Except for the ellipsis it is working well. See result
See this fiddle (or, alternatively), you need to set the max-width for each table cell:
body{
width:100%;
padding:0;
margin:0;
}
table {
margin-top: 50px;
width:100%;
max-width:100%;
}
table td {
white-space: nowrap;
}
table td:nth-child(1) {
background-color:red;
max-width:100px;
}
table td:nth-child(2) {
background-color: green;
overflow:hidden;
max-width:100px;
text-overflow: ellipsis;
white-space: nowrap;
}
table td:nth-child(3) {
background-color: orange;
max-width:100px;
}