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%;
}
Related
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 am looking to horizontally (and preferably vertically) align three inner divs. Applying margin: 0 auto; to class vbox should do the trick but as in the following minimal code, it isn't affecting the alignment at all. How can i accomplish this aligning?
HTML:
<body>
<div id='site'>
<div class='main'>
<div class='vbox'>
<div id='inner1'>inner1</div>
<div id='inner2'>inner2</div>
<div id='inner3'>inner3</div>
</div>
</div>
</div>
</body>
CSS:
#site {
width: 100%;
height: 100%;
}
#main {}
.vbox {
margin: 0 auto;
}
The result can be seen in this fiddle.
You need to define the width for vbox:
.vbox {
margin: 0 auto;
width: 30%;/*apply as your own*/
}
100% wide element is centered horizontally but you see no alignment for text. For this you should apply text-align: center;
Just give display: table; to .vbox will make it horizontal center.
.vbox {
margin: 0 auto;
display: table;
}
Working Fiddle
Another solution is display: flex;
.main {
display: flex;
}
Fiddle
You can use display: inline-block for your inner divs:
.vbox {
text-align: center;
font-size: 0; /* white spaces fix */
}
.vbox > div {
font-size: 1rem; /* white spaces fix */
display: inline-block;
}
Example
Try something like this
#site {
width: 100%;
height: 100%;
}
#main {
Width:100%;
}
.vbox {
margin: 0 auto;
padding:0;
}
.vbox div{
width:32%;
display:inline-block;
padding:0;
margin:0;
box-sizing:border-box;
}
The important bit is that the default behavior of a div is to take up the full width of its parent. To change this you give it the display mode inline-block.
You could do this :
HTML
<body>
<div id='site'>
<div class='main'>
<div class='vbox'>
<div class='inner'>inner1</div>
<div class='inner'>inner2</div>
<div class='inner'>inner3</div>
</div>
</div>
</div>
</body>
CSS
#main {
width: 100%;
}
.vbox {
width: 500px;
margin: 0 auto;
text-align: center;
}
.inner {
display: inline-block;
margin: 0 4px;
}
You could do this to align all 3 divs vertically by using:
#site {
width: 100%;
height: 100%;
}
#main {}
.vbox {
margin: 0 auto;
}
.vbox div{
width: 30%;
float: left;
}
If you have more divs or less, just update the width accordingly.
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
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