I have a container with a fixed height, inside is an <article> with display: table; property. I want this <article> to fill his parent, both in height and width (height: 100%;width: 100%;).
The tricky part is this table has 3 children : a header and a footer, both with variable heights, and a third, main element, that should fill the remaining space.
The problem is, in that main element, I have an <img> bigger in height than the main container, stretching the table, despite the height: 100%; (illustration here :
Is there a way to limit the img's height so that it doesn't stretch the table ? I tried height/max-height: 100% with no luck.
As the code needs to be IE9 compatible, I can't use a flexbox layout, hence the display: table-* approach.
Here's the full code and a codepen, notice how the table is bigger than its parent container (<section> with red border), due to the img : http://codepen.io/anon/pen/xGJLLa
HTML
<section>
<article class="table">
<header class="row">
<h2>My header</h2>
</header>
<div class="mainrow row">
<div class="vmiddle">
<img src="http://lorempixel.com/200/300/abstract/" alt="Myimg" />
</div>
<div>
<p>Lorem ipsum [...]</p>
</div>
</div>
<footer class="row">
My Footer
</footer>
</article>
</section>
CSS
section {
border: 3px solid red;
height: 15em;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.row {
display: table-row;
vertical-align: middle;
}
header { background-color: lightgrey; }
h2 {
display: table-cell;
padding: 0.5em 0;
vertical-align: middle;
}
.mainrow { background-color: lightyellow; }
.mainrow>div {
float: left;
height: 100%;
width: 50%;
}
.vmiddle {
font-size: 0;
text-align: center;
}
.vmiddle:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
footer { background-color: lightblue; }
Thanks
Related
I came across this fiddle that I thought would work for my project.
HTML:
<div>
<header>
<div>XXX</div>
</header>
<main>
<div>
<div class="content"></div>
</div>
</main>
<footer>
<div>YYY</div>
</footer>
</div>
CSS:
html, body, .container, .table {
margin: 0;
height: 100%;
}
.container {
background-color: gainsboro;
}
.table {
display: table;
width: 100%;
}
.table > div {
display: table-row;
}
.table > div > div {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
overflow: scroll;
}
#header,#footer {
height: 1px;
}
What I wanted to do was to add an image within the < div class="content" > where the image's height would follow the div's height even after resizing the window. Could that be done without pushing the footer down?
Thanks!
You can add this to your css:
.content img {
max-width: 100%;
}
Using display:table;, I am trying to vertically align two inline div's with different heights inside a fixed width container.
display:table; and display:table-cell with vertical-align: middle; is a very simple solution to this that works in certain circumstance - however in this it seems I have missed something.
The result of my fiddle is a correct vertical-align however each element is not holding their responsive widths to fill the entire container space. i.e. 2 elements inside the container equal 50% width.
Here is my code:
HTML
<div class="table container">
<div class="inner-column table-cell">
<div class="table inner-container">
<div id="left" class="table-cell">
content
</div>
</div>
</div>
<div class="inner-column table-cell">
<div class="table inner-container">
<div id="right" class="table-cell">
content
</div>
</div>
</div>
</div>
CSS
body {
width: 100%;
margin: 0 auto;
background: white;
color: white;
text-align: center;
background: white;
}
.table {display: table;}
.table-cell {display: table-cell; vertical-align: middle;}
.container {
width: 600px;
height: 200px;
background: lightgrey;
margin: 0 auto;
white-space: nowrap;
padding: 0
}
.inner-column {
display: inline-block;
white-space: normal;
width: 50%;
height: 100%;
border:1px blue solid;
padding: 0;
margin: 0;
}
.inner-container {
margin: 0 auto;
width: 100%;
}
#left {
background-color: red;
height: 120px;
}
#right {
background-color: purple;
height: 170px;
}
Here is the above in a FIDDLE
Problem List:
Width of the inner-column is slightly bigger than the container
each element container is not vertically aligned to the fixed height of the container.
display:table-cell is not being applied since you wrote this code before display:inline-block.
I have updated fiddle
https://jsfiddle.net/dgzp6h2w/1/
I'm making a table out of divs. The reason to why I'm using divs is a table might not be as responsive as I want.
Anyways I made this container that should be the width of the children and centered, however for some reason it decides to be bigger despite no width being set. Any ideas on how to fix that?
.wrapper {
transform: translate(-50%, 0);
margin-left: 50%;
height: 100%;
background-color: purple;
}
.wrapper div {
background-color: cornflowerblue;
width: 150px;
height: 150px;
display: block;
float: left;
margin: 10px;
}
<body style="margin: 0; height: 100vh; width: 100vw;">
<section class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
It's your floats. If you want the container to "contain" the divs, you have to "float" bu either using float on the container itself or using inline block.
I would suggest using display:inline-block
Try this out:
.wrapper {
display: inline-block;
background-color: purple;
margin: 0px auto;
max-width: 280px;
padding: 0;
}
.wrapper div {
background-color: cornflowerblue;
width: 120px;
height: 120px;
display: block;
float: left;
margin: 10px;
}
This will cause your container to actually contain the elements within it. Additionally, you will need to add the max-width to the container to ensure you don't have any wonky padding to the right. You might want to use some media queries to set that up so that it looks right at each size.
#media screen AND (max-width: 300px) {
.wrapper {
max-width: 280px;
}
}
The issue is that all children of your .wrapper div are floating, resulting in a height of 0 on their parent. You can simply remedy this by setting overflow:hidden on the wrapping container, if you need them to be floating (you could also use display:inline-block instead of float:left and wouldn't require the overflow property).
.wrapper {
transform: translate(-50%, 0);
margin-left: 50%;
background-color: purple;
overflow: hidden;
}
.wrapper div {
background-color: cornflowerblue;
width: 150px;
height: 150px;
display: block;
float: left;
margin: 10px;
}
<body style="margin: 0; height: 100vh; width: 100vw;">
<section class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
Set the wrapper div to display: inline-block;
HTML
<section class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
CSS
.wrapper {
display: inline-block;
background-color: purple;
}
.wrapper div {
background-color: cornflowerblue;
width: 120px;
height: 120px;
display: block;
float: left;
margin: 10px;
}
Codepen
This doesn't address your specific code, but you did mention trying to create tables with DIVs. You could use display: table | table-row | table-cell;.
Here's one way to implement it:
.table {
display: table;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
.example {
width: 50%;
}
.example .td {
text-align: center;
border: 1px solid #CCC;
}
<div class="table example">
<div class="tr">
<div class="td">
A
</div>
<div class="td">
B
</div>
<div class="td">
C
</div>
</div>
<div class="tr">
<div class="td">
D
</div>
<div class="td">
E
</div>
<div class="td">
F
</div>
</div>
</div>
You could also change up the CSS to what's below if you didn't want to slap a CSS class onto every element:
.table {
display: table;
}
.table > div {
display: table-row;
}
.table > div > div {
display: table-cell;
}
I'm having a bit of difficulty in displaying a table. I use display:table and display:table-cell a lot for sections usually. Especially when I just want to center the content of a section vertically. So to say, I have the following HTML:
<div class="wrapper">
<div class="cell">
<div class="red">
</div>
</div>
</div>
and the following css applied to the html:
html,body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.wrapper * {
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.red {
margin-right: auto;
margin-left: auto;
background: red;
height: 200px;
width: 200px;
}
Now there is a small problem. I want to add a section header to this particular section and the section header has to be a child of .wrapper, so the HTML changes as below :
<div class="wrapper">
<div class="section-heading">
<h1>section heading</h1>
</div>
<div class="cell">
<div class="red">
</div>
</div>
</div>
Now the problem with using display table and table-cell is that when I add a header to the section, I can't add it without it affecting the other child elements of .wrapper . So how do I add a heading (when the heading is added in the above HTML the .cell div seems to be moving horizontally slightly)?
Of course I could use absolute positioning, but I was just wondering, is there something that can be done, without taking the heading element out of the flow?
FIDDLE HERE
Did you try adding display:table-row to the section-heading?
.wrapper > .section-heading{
display:table-row;
height:auto;
}
Fiddle: http://jsfiddle.net/7xo353hg/4/
You can make heading container display: table-row:
.section-heading {
display: table-row;
text-align: center;
}
Check the demo:
html, body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.wrapper * {
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.red {
margin-right: auto;
margin-left: auto;
background: red;
height: 200px;
width: 200px;
}
.section-heading {
display: table-row;
text-align: center;
}
<div class="wrapper">
<div class="section-heading">
<h1>section heading</h1>
</div>
<div class="cell">
<div class="red"></div>
</div>
</div>
I am trying to create a container, of height 80% of the page height, which has a fixed height header and footer with a content pane that stretches to fit the rest of the available space.
I've tried to use display: table with the following layout:
<body>
<div class="ticket">
<div class="header">header</div>
<div class="body">
<div class="wrapper">
<div class="content">content</div>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>
With these styles
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.ticket {
background: #ccc;
width: 600px;
margin: 0 auto;
height: 80%;
display: table;
}
.header {
background: blue;
height: 36px;
display: table-row;
}
.body {
background: orange;
display: table-row;
}
.wrapper {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.content {
height: 600px;
}
.footer {
background: green;
height: 72px;
display: table-row;
}
In Chrome this gives me a scrollable middle panel that grows with the height of the container:
Unfortunately this doesn't work in IE8 or Firefox, the '.body' div stretches to fit the '.content'.
Is there a way to do this that will work cross browser, and IE8+?
Check out http://caniuse.com/#search=flexbox and/or http://caniuse.com/#search=vh
Those are the ways to get it, but none of them works on IE 8.
You must use JS