I want to create the following three column layout. The middle column will be of variable size and be centered. The left and right column will grow or shrink to meet the edge of the middle column and the edge of the outer parent div. It should look like this.
-------------------------------------------------------------
| Size: X | Variable Size | Size: X |
-------------------------------------------------------------
I have tried a few different methods but none have worked.
EDIT: To clarify I'm trying to achieve the effect of a header that is centered with two horizontal lines on either side of the text.
https://css-tricks.com/line-on-sides-headers/
I wanted to see if it was possible to do with three nested divs.
There are a couple different methods you could take. Actually, 5 that I can think of.
For the next few examples, the markup is this:
<div class="container">
<aside class="fixed column"></aside>
<main class="fluid column"></main>
<aside class="fixed column"></aside>
</div>
Global CSS
.fixed {
width: 100px;
}
.fluid {
calc(100% - 200px); /* subtract total fixed width of the sidebars */
}
Flexbox:
.container {
display: flex;
}
.container .column {
flex: 0 1 1;
}
Float:
.container:after {
content: '';
clear: both;
display: table;
}
.container .column {
float: left;
}
Table:
.container {
display: table;
}
.container .column {
display: table-cell;
}
Inline-Block:
.container .column {
display: inline-block;
}
.container .column:not(:first-child) {
margin-left: -4px;
}
Absolute:
.container {
position: relative;
}
.container .column {
top: 0;
position: absolute;
}
.container .fluid {
left: 100px; /* width of 1 fixed sidebar */
}
.container .fixed:last-child {
right: 0;
}
Here's a link to the codepen :)
http://codepen.io/akwright/pen/OPvwLv
<div>
<table>
<tr>
<td width="20%">COLUMN 1</td>
<td width="*">COLUMN 2</td>
<td width="20%">COLUMN 3</td>
</tr>
</table>
</div>
Just use display table and table-cell.
Don't use actual tables unless you have tabular data, it is not a best practice and hard to make responsive.
.table{
display:table;
width:100%;
}
.table-cell{
display: table-cell;
text-align: center;
}
.cell1{
background-color: red;
}
.cell3{
background-color: blue;
}
<div class="table">
<div class="table-cell cell1">123</div>
<div class="table-cell cell2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut </div>
<div class="table-cell cell3">321</div>
</div>
*{
padding: 0;
margin: 0;
}
.table{
display: table;
width: 100%;
max-width: 400px;
margin: 25px auto;
border-top: 1px dashed #222;
border-bottom: 1px dashed #222;
}
.table > div{
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
border-right: 1px dashed #222;
}
.table > div:nth-child(1){
border-left: 1px dashed #222;
}
.table > div:nth-child(1),
.table > div:nth-child(3){
width: 20%;
}
<div class="table">
<div>cell</div>
<div>cell</div>
<div>cell</div>
</div>
According to
The left and right column will grow or shrink to meet the edge of the
middle column and the edge of the outer parent div.
You simply want to have each column in % . The easiest way to do seems to be :
<html>
<head>
<title>test</title>
<style>
.side {
width: 20%;
float: left;
background-color: red;
height: 100%;
}
.middle {
width: 60%;
float: left;
background-color: blue;
height: 100%;
}
</style>
</head>
<body>
<div class="side"> </div>
<div class="middle"> </div>
<div class="side"> </div>
</body>
</html>
Related
I have to fix this layout, which is a messy combination of flexbox, table layout and absolute positioning.
While it's working normal on Chrome, FF and Safari, the output screen on IE11 is strange.
In my code, I want the span to be at the bottom-right of each square, but on IE11, it appears on top-right instead.
Can anyone please help me to fix this problem? The constraint here is that the flexbox .container and the table system must be maintained. I want to fix only the span element. Thanks in advance!
.container {
display: flex;
width: 400px;
}
.inner {
width: 50%;
}
.table {
display: table;
width: 100%;
border: 1px solid;
}
.table:before {
content: '';
display: table-cell;
width: 0;
padding-bottom: 100%;
}
.cell {
display: table-cell;
vertical-align: bottom;
position: relative;
padding: 20px;
}
.cell span {
position: absolute;
bottom: 20px;
right: 20px;
}
<div class="container">
<div class="inner">
<div class="table">
<div class="cell">
Yeah?
<span>Yo!</span>
</div>
</div>
</div>
<div class="inner">
<div class="table">
<div class="cell">
Yeah?
<span>Yo!</span>
</div>
</div>
</div>
</div>
remove your .cell span block and
use below code instead of that.
i have checked its working in every browser.
.cell span {
float: right;
}
One thing you can do to fix it in IE11 is to wrap your cell contents into a block container and then add position: relative to it. Now you can adjust the position with right: 0px - see demo below:
.container {
display: flex;
width: 400px;
}
.inner {
width: 50%;
}
.table {
display: table;
width: 100%;
border: 1px solid;
}
.table:before {
content: '';
display: table-cell;
width: 0;
padding-bottom: 100%;
}
.cell {
display: table-cell;
vertical-align: bottom;
position: relative;
padding: 20px;
}
.cell span {
position: absolute;
/*bottom: 20px;
right: 20px;*/
right: 0px; /* ADDED */
}
.cell div { /* ADDED */
position: relative;
}
<div class="container">
<div class="inner">
<div class="table">
<div class="cell">
<div>Yeah?
<span>Yo!</span></div>
</div>
</div>
</div>
<div class="inner">
<div class="table">
<div class="cell">
<div>Yeah?
<span>Yo!</span></div>
</div>
</div>
</div>
</div>
I want to create the following layout:
where the blue block is an image and the red and green blocks contain vertically centered text. The container needs to have position:fixed, the image is sized dynamically so that its height is set to the height of the container and the red and green boxes are of equal height and fill the remainder of the container horizontally.
I initially tried using divs:
body {
padding: 0;
margin: 0;
border: 0;
}
.container {
height: 15vh;
width: 100vw;
position: fixed;
background-color: red;
}
.imgContainer {
height: 100%;
float: left;
}
.imgContainer img {
height: 100%;
}
.textContainer {
height: 100%;
background-color: yellow;
text-align: right;
display: table;
table-layout: fixed;
float: right;
}
.row1 {
height: 50%;
width: 100%;
display: table-row;
}
.row2 {
height: 50%;
background-color: blue;
display: table-row;
}
span {
display: table-cell;
vertical-align: middle;
}
<div class="container">
<div class="imgContainer">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</div>
<div class="textContainer">
<div class="row1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row2">
<span>More text.</span>
</div>
</div>
</div>
This worked fine for the image but I couldn't figure out how to get the red and green divs to fill the remaining width satisfactorily.
My second attempt was based around tables but, again, I don't seem to be able to get the widths correct:
body {
background-color: red;
padding: 0;
border: 0;
margin: 0;
}
div {
background-color: yellow;
height: 15vh;
width: 100vw;
position: fixed;
}
table {
height: 100%;
width: 100%;
background-color: blue;
border-collapse: collapse;
table-layout: fixed;
}
tbody {
height: 100%;
width: 100%;
background-color: purple;
}
tr {
height: 50%;
width: 100%;
background-color: green;
padding: 0;
}
tr:last-child {
background-color: yellow;
}
td {
height: 100%;
padding: 0;
white-space: nowrap;
}
td:last-child {
max-width: 100%;
}
img {
max-height: 100%;
display: block;
}
<div>
<table>
<tbody>
<tr>
<td rowspan="2">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
<tr>
<td>
More text.
</td>
</tr>
</tbody>
</table>
</div>
I have also had problems ensuring that both red and green sections remain at 50% of the total height, regardless of content.
How can I get either of these to work? Or is there a completely different approach that can work?
You don't say what your target market is, but since in most my work I only have to worry about the latest browser versions, this answer makes use of the new CSS flexbox. If you need compatibility with older browsers, see the 2nd set of code below.
body {
padding: 0;
margin: 0;
border: 0;
}
.container {
height: 15vh;
width: 100vw;
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.imgContainer {
height: 100%;
}
.imgContainer img {
height: 100%;
}
.textContainer {
height: 100%;
width: 100%;
}
.row1 {
background-color: red;
}
.row2 {
background-color: green;
}
.row1,
.row2 {
height: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
overflow: hidden;
}
<div class="container">
<div class="imgContainer">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</div>
<div class="textContainer">
<div class="row1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row2">
<span>More text.</span>
</div>
</div>
</div>
Below is a solution that works in older browsers, except IE9 and below where the text will not be properly centered vertically. If that's a concern, you might be able to find something that works on this page, but not knowing all your limitations, I was unable to select the right solution.
body {
padding: 0;
margin: 0;
border: 0;
}
.container {
height: 15vh;
width: 100vw;
position: fixed;
}
.imgContainer {
height: 100%;
float: left;
}
.imgContainer img {
height: 100%;
}
.textContainer {
height: 100%;
}
.row1 {
height: 50%;
background-color: red;
}
.row2 {
height: 50%;
background-color: green;
}
span {
right: 0; /* right-justify */
}
.row1 > span {
position: absolute;
top: 25%; /* put the top 25% down within .container - the first non-static ancestor element */
transform: translateY(-50%); /* nudge the line up half it's height */
}
.row2 > span {
position: absolute;
top: 75%;
transform: translateY(-50%);
}
<div class="container">
<div class="imgContainer">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</div>
<div class="textContainer">
<div class="row1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row2">
<span>More text.</span>
</div>
</div>
</div>
I have this situation:
I want the table on the right side to be at the same height as the form on the left side.
Here is my CSS:
.left {
height: auto;
width: 550px;
}
.right {
height: auto;
width: 550px;
padding-left: 40px;
}
.innerRight {
height: auto;
}
.middle {
height: auto;
position:absolute;
left:50%;
top:17%;
bottom:15%;
border-left:1px solid grey;
}
.left, .right {
display: inline-block;
}
How can I do this?
I used floating, but then the height doesn't adjust automatically, so I can't used it.
You could give them both position:absolute; then position them with top, left, right, ect..
Without your actual HTML code, here is an example that might help you by using the table-row, table-cell css property.
.wrap {
overflow: hidden;
width: 250px;
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
}
.left {
width: 50%;
display: table-cell;
background-color: yellow;
}
.middle {
border-left: solid 1px red;
width: 1px;
display: table-cell;
}
.right {
width: 50%;
background-color: orange;
display: table-cell;
}
<div class="wrap">
<div class="row">
<div class="left">Lorem</div>
<div class="middle"></div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</div>
I have a page containing a header and three other divs of irrelevant content, like this.
+-----------+
| header |
+-----------+
| 1 | 2 |
+-----+-----+
| 3 |
+-----------+
What I need is for the tables to take up the remaining space on the page, but not extend beyond the viewport (there should be no vertical scrollbar on the page).
In other words, the height of 1, 2, and 3 should be exactly 50% of the remaining space (after the header). How can I accomplish this without JS and also without fixing the height of the header?
It can be done using CSS tables and quite a few nested div elements.
body, html {
margin: 0;
height: 100%;
}
.wrapper {
height: 100%;
background-color: tan;
display: table;
width: 100%; /* optional, depends on layout */
}
.header-row {
display: table-row;
}
.header-row img {
display: block;
width: 100%;
}
.content-row {
height: 100%;
display: table-row;
}
.content-row {
border: 1px dotted blue;
box-sizing: border-box;
height: 100%;
display: table-cell;
}
.content {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
.row .cell {
display: table-cell;
height: 50%;
width: 100%;
border: 1px dotted blue;
}
.row .split {
width: 50%;
height: 100%;
float: left;
border: 1px dotted blue;
box-sizing: border-box;
}
<div class="wrapper">
<div class="header-row">
<div class="header">
<img src="http://placehold.it/1000x200">
</div>
</div>
<div class="content-row">
<div class="content">
<div class="row">
<div class="cell">
<div class="split">split</div>
<div class="split">split</div>
</div>
</div>
<div class="row">
<div class="cell">stuff</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/hqu8N/
<div id="container">
<div id="one"><p>one</p></div>
<div id="two"><p>two</p></div>
<div id="footer"><p>footer</p></div>
</div>
#container {
display: table;
width: 200px;
height: 200px;
background-color: red;
border-spacing: 5px;
}
#one {
display: table-cell;
background-color: yellow;
}
#two {
display: table-cell;
background-color: blue;
}
#footer {
display: table-footer-group;
background-color: green;
}
Basically i want the green footer to extend over to the end of the blue ID. And also between the green footer and the yellow ID it's 10 px of space instead of 5px. What am i doing wrong ?
I used grid for your case, and a grid-gap for a 5px distance:
#container {
display: grid;
grid-gap: 5px;
width: 200px;
height: 200px;
background-color: red;
}
#one {
background-color: yellow;
}
#two {
background-color: blue;
}
#footer {
background-color: green;
grid-column: 1 / 3;
}
<div id="container">
<div id="one">
<p>one</p>
</div>
<div id="two">
<p>two</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
https://jsfiddle.net/arman1373/4xkgd5Lj/
I had the same issue with both the header-group and footer-group.
I solved this by putting a container around my table which specified the basic width. Inside that I put a div with display: table properties as below
#tContainer {
width: 80%;
margin; 0% auto;
}
#tData {
display: table;
width: 100%
}
.tDataRow {
display: table-row;
}
.tDataRow span{
display: table-cell;
}
I didn't use table-header or table-footer but defined them separately:
.tDataFooter {
display: block;
width: auto;
}
And the element structure as follows:
<div id="tContainer">
<div id="tData">
<div class="tDataRow"><span class="dHeader"> xyz </span></div>
<div class="tDataRow"><span> data sets repeat </span></div>
</div>
<div class="tDataFooter"> Footer data </div>
</div>
I am hoping someone else has a neater solution but I couldn't get the header and footer to fit at all, not even the header columns to align with the data
Result:
Resulting table sample