I try to show following object with 3 images:
...........
| | |
| 1 | |
|----| 2 |
| 3 | |
| | |
|____|____|
I use display style:
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
So far I got this:
<div style="display: inline-block; height: 100%; overflow: hidden;">
<div style="display: table;">
<div class="row">
<div class="cell" style="height: 100%;">
<img style="height: 38.5%; display:block;" src="img/group_6.png"/>
</div>
<div class="cell" style="width: 37px;overflow: hidden;">
<img style="height: 74px; display: block; margin-left: -18.5px;"
src="img/group_6.png" />
</div>
</div>
<div class="row">
<div class="cell" style="height: 100%;">
<img style="height: 38.5%; display:block;" src="img/group_6.png" />
</div>
</div>
</div>
</div>
How to achieve the view I posted?
Thank you,
Please change the name of images. For the image available in the right side it might be possible that you've to adjust: align or top or bottom margins. Adjust them according to the requirement. I've created the borders which will help you to adjust images appropriately. Once done please remove them. Kindly check and verify....
<html>
<style>
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
</style>
<body>
<div class="table">
<div class="cell" style="border: 10px solid;">
<div class="row" style="border: 10px solid;">
<img style="height: 38.5%; display: block;" src="xyz.jpg" />
</div>
<div class="row" style="border: 10px solid;">
<img style="height: 38.5%; display: block;" src="pqrs.jpg" />
</div>
</div>
<div class="cell" style="border: 10px solid; height:auto; width:100%">
<img align="middle" style="width:20%; height: auto; display: inline-block;" src="abcd.jpg" />
</div>
</div>
</body>
</html>
Related
I'm having some trouble with this not running properly. It won't align the text correctly and it also won't distribute the cells across the available space. Not sure what I'm doing wrong here, so any help would be appreciated.
While we're at it, I'm also trying to figure out how to get it to show 2 columns instead of 1 when it switches to mobile sized. The way it's setup now, it just transitions to 1 column.
This is for a website on Shopify that uses an html block to insert custom code. I have other blocks that I've inserted into it and they all seem to be working fine, it's just this one that's giving me issues.
.table2 {
display: table;
}
.table-row2 {
display: table-row;
}
.table-cell2 {
display: table-cell;
vertical-align: top;
width: 20%;
padding: 2.5%;
}
.icontext {
display: text;
vertical-align: middle;
width: 20%;
padding: 2.5%;
float: middle;
}
#media screen and (max-width: 768px) {
.table2,
.table-row2,
.table-cell2 {
display: block;
width: 100%;
float: middle;
}
}
<h1><center>Materials</center></h1>
<div class="table2">
<div class="table-row2">
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/0ce94db3-8b05-4d84-a64c-dc6de006151c/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Durable
</div>
</div>
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/b6ff1bd5-4c2e-4db0-bacc-3aa76678e92c/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Quick Dry
</div>
</div>
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/e09a4c7e-c262-415f-b491-599bd0bc3a66/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Lightweight
</div>
</div>
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/03df04db-7851-4f80-ad8f-0438cc7e0397/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Breathable
</div>
</div>
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/8034c6ad-6c30-406d-8865-a4bdb4060bca/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Moisture Wicking
</div>
</div>
</div>
</div>
I would recommend using flex something like below will fix your issue. There was a few issues with your previous code being out of date. This will also flex on mobiles to show 2 columns as you stated.
.table-row2 {
width: 100%;
height:auto ;
display: flex;
flex-direction: row;
flex-wrap:wrap;
justify-content:space-around;
}
.table-cell2 {
vertical-align: top;
padding: 2.5%;
}
.icontext {
padding: 2.5%;
text-align: center;
}
#media screen and (max-width: 768px) {
.table2,
.table-row2,
.table-cell2 {
// removed all
}
}
<meta name="viewport" content="width=device-width" />
<h1><center>Materials</center></h1>
<div class="table2">
<div class="table-row2">
<div class="table-cell2">
<img src="https://ucarecdn.com/0ce94db3-8b05-4d84-a64c-dc6de006151c/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Durable
</div>
</div>
<div class="table-cell2" >
<img src="https://ucarecdn.com/b6ff1bd5-4c2e-4db0-bacc-3aa76678e92c/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Quick Dry
</div>
</div>
<div class="table-cell2" >
<img src="https://ucarecdn.com/e09a4c7e-c262-415f-b491-599bd0bc3a66/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Lightweight
</div>
</div>
<div class="table-cell2" >
<img src="https://ucarecdn.com/03df04db-7851-4f80-ad8f-0438cc7e0397/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Breathable
</div>
</div>
<div class="table-cell2">
<img src="https://ucarecdn.com/8034c6ad-6c30-406d-8865-a4bdb4060bca/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Moisture Wicking
</div>
</div>
</div></div>
I would like to figure out how to get a series of images to be vertically aligned on the page so people can scroll left to right and view them. I have tried 'vertical-align: middle'as well as adjusting the top % to no avail, here's the current set-up
.page {
position: absolute;
width: 2400px;
vertical-align: middle;
}
.column {
float: left;
width: 400px;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
You may use the table-layout , so you get a single line and can use vertical-align:middle from the parent container .
here is an example without float and okay for browsers as old as FF 1 or IE8 . today, grid and flex can do a similar job in that case. Play snippet in full page to check out vertical-align behavior
body {
margin: 0;
padding: 0;
}
.page {
overflow-x: auto;
overflow-y: hidden;
height: 100vh;
box-sizing: border-box;
}
.row {
display: table;
height: 100%;
}
.column {
padding: 5px;
display: table-cell;
vertical-align: middle;
}
.column img {
width: 400px;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
with flex it could be :
body {
margin: 0;
padding: 0;
}
.row {
display: flex;
align-items:center;
min-height:100vh;
box-sizing:border-box;
}
.column {
padding: 5px;
min-width: 400px;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
I'm not using the tag, so I can't use the colspan attribute.
I'd like to create a table with three cells in the first row, one cell in the last row and two cells in the other rows.
Here's my code (minimal):
.row {
display: table-row;
}
.cell {
display: table-cell;
}
HTML:
<div style="display: table;">
<div class="row" style="width: 100%;">
<div class="cell" style="width: 33% !important;">
aaaa
</div>
<div class="cell" style="width: 33% !important;">
bbbbb
</div>
<div class="cell" style="width: 33% !important;">
ccccc
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 50% !important;">
ddddd
</div>
<div class="cell" style="width: 50% !important;">
eeeee
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 50% !important;">
fffff
</div>
<div class="cell" style="width: 50% !important;">
ggggg
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 100% !important;">
last cell
</div>
</div>
</div>
And this is what I get (I can't post images): http://gyazo.com/cc036ed406f6c1a166955522d40e05b0.png
I would build this layout as follows.
For the HTML:
<div class="parent">
<div class="row r3">
<div class="cell">aaaa</div>
<div class="cell">bbbbb</div>
<div class="cell">ccccc</div>
</div>
<div class="row r2">
<div class="cell">ddddd</div>
<div class="cell">eeeee</div>
</div>
<div class="row r2">
<div class="cell">fffff</div>
<div class="cell">ggggg</div>
</div>
<div class="row r1">
<div class="cell">last cell</div>
</div>
</div>
and apply the following CSS:
.row {
display: table;
border: 1px dashed blue;
width: 100%
}
.cell {
display: table-cell;
border: 1px dotted blue;
}
.r3 .cell {
width: 33.333333%;
}
.r2 .cell {
width: 50%;
}
.r1 .cell {
width: 100%;
}
Use display: table for each div.row block element with 100% width.
You don't need to explicitly define a CSS table row, one will be created anonymously as needed.
See reference: http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
See demo: http://jsfiddle.net/audetwebdesign/72yb5th2/
You're trying to emulate a table with divs. Why? The <table> tag is made for exactly this kind of tabular data.
I have a two divs it's containing in parent div. first div at left side and second at right.
So, i want a right div at middle of parent with out using margin.
HTML
<div class="clearfix" style="background-color: #CCCCCC;">
<div style="padding: 10px; background-color: #0099FF;" class="inline-block">
<div class="inline-block"><div>Post</div><div>139</div></div>
<div class="inline-block"><div>Following</div><div>139</div></div>
<div class="inline-block"><div>Followers</div><div>139</div></div>
</div>
<div class="rfloat" style="background-color: #00FF66; display: table-cell; vertical-align: middle;">
Follow
Message
Report
</div>
</div>
CSS
.inline-block {
display: inline-block;
}
.rfloat {
float: right;
}
.lfloat {
float: left;
}
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
and here's jsfiddle http://jsfiddle.net/fmr3Y/
This how you can do it
DEMO
HTML
<div class="rfloat" style="background-color: #00FF66; display: table; height: 60px">
CSS
a {
display: table-cell;
vertical-align: middle;
}
Use display:table -- demo
<div class="clearfix" style="background-color: #CCCCCC; display:table;width:100%;">
<div style="padding: 10px; background-color: #0099FF;" class="inline-block">
<div class="inline-block">
<div>Post</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Following</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Followers</div>
<div>139</div>
</div>
</div>
<div class="ss" style="background-color: #00FF66; display: table-cell; vertical-align: middle;"> Report
Message
Follow
</div>
</div>
You could mimic the flex justify-content with display and text-align:justify : DEMO
.inline-block {
display: inline-block;
font-size:16px;/* do not forget to reset font-size to childs*/
font-size:1rem;
text-align:center;/* left, right, .. */
}
.justify:after {
display: inline-table;
content: " ";
width:100%;
height:0;
vertical-align:top;/* no extra gap please */
}
.justify {
text-align:justify;/* will span element from one side to the other */
font-size:0;/* reduce line-height and avoid gap from pseudo element */
}
HTML updated with class name :
<div class="justify" style="background-color: #CCCCCC;">
<div style="padding: 10px; background-color: #0099FF;vertical-align: middle;" class="inline-block">
<div class="inline-block"><div>Post</div><div>139</div></div>
<div class="inline-block"><div>Following</div><div>139</div></div>
<div class="inline-block"><div>Followers</div><div>139</div></div>
</div>
<div class="inline-block" style="background-color: #00FF66; vertical-align: middle;">
Follow
Message
Report
</div>
</div>
I had Changed Your structure to make Right Div at center
<table class="clearfix" style="background-color: #CCCCCC; width: 100%;text-align: center; ">
<colgroup>
<col style="width: 19%"/>
<col style="width: 75%"/>
</colgroup>
<tr>
<td>
<div style="padding: 10px; background-color: #0099FF;" class="inline-block">
<div class="inline-block">
<div>Post</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Following</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Followers</div>
<div>139</div>
</div>
</div>
</td>
<td>
<div style="background-color: #00FF66; vertical-align: middle;">
Follow
Message
Report
</div>
</td>
</tr>
</table>
Here is Working Demo Too.Working Fiddle
In the name of progress (and learning) how can I rid tables from my code and achieve the same layout?
For example, here is my table:
<table cellspacing="0px">
<tr>
<td>
<img src="http://www.poltairhomes.com/images/footerlogo.png" />
</td>
<td id="footertext">
<p>Poltair Homes Plc<br />Registered Office: The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br />Registered in England & Wales: 3955425<br />www.poltairhomes.com<br />info#poltairhomes.com</p>
</td>
<td id="footertext">
<p>Terms and Conditions | Privacy Policy | Sitemap</p>
</td>
<td id="footertext">
<p>SIGN UP FOR OUR NEWSLETTER:</p>
<img src="http://www.poltairhomes.com/images/signup(temp).png" />
</td>
</tr>
</table>
And the relevant CSS:
.footertext {
margin: 0;
padding:0 5px 0 5px;
color: #AAA;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
border-left: 1px solid #CCC;
}
http://jsfiddle.net/userdude/tYjKw/
CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
HTML:
<div class="table">
<div class="table-row">
<div class="table-cell">Table cell 1</div>
<div class="table-cell">Table cell 2</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="cell twocol">
<span>Content1</span>
</div>
<div class="cell twocol">
<span>Content2</span>
</div>
</div>
<div class="row">
<div class="cell onecol">
<span>Content3</span>
</div>
</div>
</div>
And the CSS
.table {width: 100%; height: 100%;}
.row {width: 100%; min-height: 1px; height: auto; margin: 0;}
.cell {float: left; margin: 0; padding: 0;}
.onecol {width: 100%;}
.twocol {width: 50%;}
I suggest you look into some gridsystems, like 960grid (http://960.gs/) or 1140grid (http://cssgrid.net/), will help you a lot.
Create a style as:
.footerItem { float: left; }
<div class="footerItem">
<img src="http://www.poltairhomes.com/images/footerlogo.png" />
</div>
<div class="footerItem">
<p>Poltair Homes Plc<br />Registered Office: The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br />Registered in England & Wales: 3955425<br />www.poltairhomes.com<br />info#poltairhomes.com</p>
</div>
<div class="footerItem">
<p>Terms and Conditions | Privacy Policy | Sitemap</p>
</div>
<div class="footerItem">
<p>SIGN UP FOR OUR NEWSLETTER:</p><img src="http://www.poltairhomes.com/images/signup(temp).png" />
</div>
and then create your body using DIVs to separate the blocks and apply the class to each one: