I need to set <div id="group-of-tables"> to the bottom of the <div class="item-content">, and without using absolute position.
HTML:
<div class="item-content">
<div id="group-of-tables">
<table class="item" id="first-table">
<tr>
<td><div class="" id="">1</div></td>
<td><div class="" id="">2</div></td>
<td><div class="" id="">3</div></td>
<td><div class="" id="">4</div></td>
</tr>
</table>
<table class="item" id="second-table" border="1">
<tr>
<td><div class="" id="">Next</div></td>
</tr>
</table>
</div>
</div>
CSS:
.item-content{
height:100%;
}
Something like this:
You could do it with CSS flex, and don't forget to prefix all the flex related rules to make it to work more browsers, visit this link to see more support details, visit this link to learn more.
JsFiddle Demo
html, body {
height: 100%;
margin: 0;
}
.wrap {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.top {
flex: 1;
}
<div class="wrap">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
Related
Here is an example, containing a table element with multiple tbody elements
https://jsfiddle.net/aoLbuafx/
HTML
<table>
<tbody class="tbody1">
<tr>
<td>Eka</td>
<td>Toka</td>
<td>Kolmas</td>
</tr>
</tbody>
<tbody class="tbody2">
<tr>
<td>Sisältö</td>
<td>Sisältö</td>
<td>Sisältö</td>
</tr>
<tr>
<td>Sisältö</td>
<td>Sisältö</td>
<td>Sisältö</td>
</tr>
<tr>
<td>Sisältö</td>
<td>Sisältö</td>
<td>Sisältö</td>
</tr>
</tbody>
<tbody class="tbody3">
<tr>
<td>Eka</td>
<td>Toka</td>
<td>Kolmas</td>
</tr>
</tbody>
</table>
CSS
table {
height: 500px;
}
.tbody1 {
background-color: red;
}
.tbody2 {
background-color: blue;
}
.tbody3 {
background-color: green;
}
The end results is that browsers render this table very differently. Firefox shares the total height between tbody elements equally, while Chrome prefers to use the first tbody to fill the available space.
Is is possible to help Chrome render the table as Firefox does, sharing the height between tbody elements, while keeping the table height fixed?
Sidenote: Changing the first tbody to thead and the last tbody to tfoot helps a bit, since in this case Chrome prefers the one and only tbody element to fill the available space. Still, it is not what I want.
That's interesting behavior. Without using Javascript to count children and set height accordingly, this can be done with a flexboxes (as can many things).
Here's the HTML:
<div class="table">
<div class="wrap tbody1">
<div class="cell">Eka</div>
<div class="cell">Toka</div>
<div class="cell">Kolmas</div>
</div>
<div class="wrap tbody2">
<div class="cell">Sisältö</div>
<div class="cell">Sisältö</div>
<div class="cell">Sisältö</div>
</div>
<div class="wrap tbody2">
<div class="cell">Sisältö</div>
<div class="cell">Sisältö</div>
<div class="cell">Sisältö</div>
</div>
<div class="wrap tbody2">
<div class="cell">Sisältö</div>
<div class="cell">Sisältö</div>
<div class="cell">Sisältö</div>
</div>
<div class="wrap tbody3">
<div class="cell">Eka</div>
<div class="cell">Toka</div>
<div class="cell">Kolmas</div>
</div>
</div>
And the CSS:
.wrap {
display: flex;
flex: 1;
justify-content: space-between;
}
.cell {
display: flex;
width: 100%;
padding: 5px;
}
.table {
height: 500px;
display: flex;
flex-direction: column;
}
Here's a JSFiddle with some added styles. The property in the flexbox that allows heights to be evening out is the flex:1 on .wrap.
I'm creating a layout using div and table.
<div class="main-container bg-white">
<div class="main-content-container bg-blue">
<div class="logo-container">
<img src="http://thebrainfever.com/images/apple-logos/Silhouette.png" width="100px" height="100px"/>
</div>
<div class="menu-container">
Menu 1 | Menu 2
</div>
</div>
</div>
<div class="main-container bg-white">
<div class="main-content-container bg-yellow">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="wrapper">
<tr>
<td style="width: 100%; padding: 0px 5px; background-color: grey;" colspan="2">
Content
</td>
</tr>
</table>
</div>
</div>
https://jsfiddle.net/odtkrumL/
The layout seems OK except there is extra spacing at the top of the table such that the text "Content" is being pushed down a bit (the yellow spacing). How could I remove the extra (yellow) spacing?
As a quick fix add display:block to your .wrapper
.wrapper {
margin-left: auto;
margin-right: auto;
display: block;
}
Fiddle : https://jsfiddle.net/qr7byupa/
Please try this:
.bg-white {
background-color: #ffffff;
display:flex
}
I tried pretty hard to find the answer to this on here, on google, and elsewhere, but it seems pretty obscure. I had to do some fancy CSS in order to create a box with a specific aspect ratio inside which a thumbnail would be centered vertically and horizontally. Those are straight-forward ideas that are actually somewhat complicated to implement in CSS. My solution works great everywhere except inside a table in Chrome with an image that has dimensions larger than the container.
Here is code that demonstrates the issue:
/*
sets aspect ratio of container by adding padding that is calculated
according to width of its parent element
*/
.aspect-ratio {
width: 100%;
display: inline-block;
position: relative;
}
.aspect-ratio:after {
padding-top: 76.19%;
display: block;
content: '';
}
/*
parent has no height, this fills the container's space
*/
.fill-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
/*
centers image horizontally and vertically
background color
*/
.image-background {
text-align: center;
background-color: #444;
height: 100%;
width: 100%;
}
.image-background::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
img {
display: inline-block;
padding: 5px;
box-sizing: border-box;
vertical-align: middle;
}
/*
Firefox: image height fills the parent element
Chrome:
inside table - image is rendered at its natural height
outside table - image height fills the parent element as expected
*/
.fill-height {
height: 100%;
}
.fill-width {
width: 100%;
}
/* other styles */
h1, h2, h3 {
text-align: center;
}
table {
width: 100%;
}
.thumbnail-viewer {
width: 40%;
margin: 10px auto;
}
<h1>tall image</h1>
<h2>small</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
</div>
</div>
</div>
</div>
<h2>large</h2>
<h3>table (works in firefox and IE, breaks in chrome and safari)</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.Twine_wrap_2.JPG&imgWH=500" style="height: 100%;">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.Twine_wrap_2.JPG&imgWH=500" style="height: 100%;">
</div>
</div>
</div>
</div>
<h1>wide image</h1>
<h2>small</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg">
</div>
</div>
</div>
</div>
<h2>large</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/Crater-Summer_cropto_500x200.JPG">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/Crater-Summer_cropto_500x200.JPG">
</div>
</div>
</div>
</div>
Hopefully as you can see, in Chrome (I'm using 43.0.2357.132 64-bit) and Safari (8.0.7) the tall/large image is exceeding the boundaries of its parent and its height is being set to the natural height of the image. The wide images all work as expected, so this appears to only be an issue of height.
My question: What is a simple or straight-forward way to fix this issue in Chrome and Safari? Or is it a bug and should I look for a less-than-ideal work-around that makes it look less terrible? What is causing this issue?
Thanks!
FYI, on smaller screens (screenwidth < 650px), your first image inside the table breaks as well.
To fix it, change your img to use the absolute positioning centering trick:
img {
padding: 5px;
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
This also means you don't need the image-background::before declaration.
Why do you need .fill-container to have absolute positioning? If I remove the lines below from styles then everything looks fine in Chrome (I can't test in Safari):
.fill-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
You also haven't closed img tags, you have
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
instead of (notice /> at the end of line)
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;" />
I know there are lots of ways to center content with an unknown width on a fluid width page in HTML/CSS but I can't get them to work in this case for some reason and need help.
Firstly, let me state that I need a solution that works in common browsers and in IE6 (don't ask why).
Here's an example of markup and the problem. In this example I want the yellow boxes centered inside the blue box.
example on jsfiddle.net
<div style="background:blue;margin:0 auto;width:100%;">
<table style="margin:0 auto;">
<tr>
<td>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<td>
</tr>
</table>
</div>
I tried this method using a table but I also tried the -50% +50% method. I am happy to use any method that works on all common browsers and IE6.
Can someone help me fix it.
Please do not lecture me on IE6 or incorrect use of the TABLE tag.
Try this,
<tr>
<td>
<div style="width: 379px;">
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
</div>
</td>
</tr>
what I understood from your requirement that you want to make your div to center ? then please have a look on the below code
<style type="text/css">
.yourclass
{
background:yellow;
float:left;
padding:50px;
}
.blueback
{
background:blue;
}
.mytable
{
width: auto;
margin-left: auto;
margin-right: auto;
}
div.clear
{
clear:both;
}
</style>
<div class="blueback">
<table class="mytable">
<tr>
<td>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
<div class="clear"></div>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
</td>
</tr>
</table>
Hope it helps...
After lots of research I can find no solution to this that works in all browsers and doesn't require IE6 hacks.
The best solution is display:inline-block and IE6/7 and various other hacks (eg. FF2).
The final solution taken from here is as follows:
<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
</style>
<li>
<div>
<h4>This is awesome</h4>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
alt="lobster" width="75" height="75"/>
</div>
</li>
I am trying to make a simple input button center-align within a table cell.
My markup is:
<table width="500" border="1">
<tr>
<td width="390">XXXXXXXXX</td>
<td width="110" rowspan="2" valign="middle"><input type="button" value="submit"></td>
</tr>
<tr>
<td>YYYYYYYY</td>
</tr>
</table>
<br /><br />
<div style="width:500px;">
<div style="float:left;width:390px;">
<div>XXXXXXX</div>
<div>YYYYYYY</div>
</div>
<div style="vertical-align:middle;width:110px;float:right;">
<div><input type="button" value="submit"></div>
</div>
</div>
I have done a table version showing you the layout that I am trying to achieve. Note that the text represented by "XXXXX" or "YYYYYY" is of variable length.
http://jsfiddle.net/8v8gLn4y/
.container {
background: lightblue;
display: table;
width:100%;
}
input[type=button] {
display: block;
width: 50%;
margin: 0 auto;
}
.button-wrapper {
background: darkorange;
display: table-cell;
vertical-align: middle;
}
<div class='container'>
<div>some line with text</div>
<div>another line with text</div>
<div class='button-wrapper'>
<input type="button" value="submit" />
</div>
</div>
update 2016:
flexbox
.container {
background: bisque;
display: flex;
width: 100%;
}
.container>div {
flex-grow: 1;
}
.button-wrapper {
background: chocolate;
display: flex;
flex-direction: column;
justify-content: center;
}
input[type=button] {
display: block;
width: 50%;
margin: 0 auto;
flex-shrink: 1;
}
<div class='container'>
<div>
<p>some line with text</p>
<p>another line with text</p>
</div>
<div class='button-wrapper'>
<input type="button" value="submit" />
</div>
</div>
If you make your button an inline element and add text-align: center to the parent td you should be fine.
.tools {
text-align: center;
}
.submit {
display: inline;
}
<table width="500" border="1">
<tr>
<td width="390">XXXXXXXXX</td>
<td class="tools" width="110" rowspan="2" valign="middle"><input class- "submit" type="button" value="submit"></td>
</tr>
<tr>
<td>YYYYYYYY</td>
</tr>
</table>
<br /><br />
<div style="width:500px;">
<div style="float:left;width:390px;">
<div>XXXXXXX</div>
<div>YYYYYYY</div>
</div>
<div style="vertical-align:middle;width:110px;float:right;">
<div><input type="button" value="submit"></div>
</div>
</div>