Problem and question
When using display: table and display: table-cell to vertical align a element, Firefox overflow the parent container width. See live demo to inspect code.
HTML
<div class="hew storeloader" href="/stores/arti-zen-eskilstuna-city">
<div class="holder hp100" style="height: 325px;">
<div class="storecontent">
<img alt="" src="/img/logo-white.svg">
<p>Arti.Zen Eskilstuna City</p>
</div>
</div>
</div>
CSS
section.stores .storeloader {
width: 47.82609%;
float: left;
margin-right: 4.34783%;
display: inline;
overflow: hidden;
background: #000;
color: #FFF;
text-align: center;
margin: 10px 0;
position: relative;
cursor: pointer;
section.stores .storeloader .holder {
width: 100%;
display: table;
}
section.stores .storeloader .holder .storecontent {
display: table-cell;
padding: 0 10px;
text-align: center;
vertical-align: middle;
text-transform: capitalize;
font-size: 20px;
}
Solved by table-layout: fixed; on the container using display: table
Related
I'm trying to create a responsive website (not using flex). I need to create a title over two display:table cells, and I'd like it to be centered. The main div holding the table is text-align:justify. Nothing I seem to do fixes it!
I've tried nearly everything I can find on the subject:
text-align:center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
just plain margin: 0 auto;
and numerous combinations of the above. The text remains stubbornly in the right corner.
HTML
<div class="row">
<div class="novel novelleft">
<div class="noveltitle">TITLE</div>
stuff
</div>
<div class="novel novelright">
more stuff
</div>
</div>
CSS
.novel {
display: table;
width: 100%;
padding: 10px;
text-align: justify;
text-align-last:left;
background-color: #fff;
}
.novelleft {
width: 40%;
display: table-cell;
vertical-align: top;
padding-left: 13%;
background-color: #fff;
}
.novelright {
width: 60%;
display: table-cell;
vertical-align: middle;
padding-right: 13%;
background-color: #fff;
}
.noveltitle {
font-family: 'Cinzel', serif;
text-align: center;
}
My apologies if that's not right, I'm new here. Thanks for any help!
EDIT
Here's what it's doing
What I want it to do
If you want use divs to simulate a table, then go all the way with it.
Use table-caption for your table's title
The left and right cells are a group, so surround both cells in a table-row and that table-row with a table-row-group
.novel {
display: table;
width: 100%;
}
.novel-caption {
display: table-caption;
caption-side: top;
text-align: center;
font-family: 'Cinzel', serif;
}
.novel-row-group {
display: table-row-group;
}
.novel-row {
display: table-row;
}
.cell {
display: table-cell;
padding: 15px;
}
.novel-row-group {
display: table-row-group;
}
.novelleft {
background-color: #bfbfbf;
width: 50%;
}
.novelright {
background-color: #404040;
color: #fff;
}
* {
box-sizing: border-box;
}
<div class="novel">
<div class="novel-caption">
TITLE
</div>
<div class="novel-row-group">
<div class="novel-row">
<div class="novelleft cell">stuff</div>
<div class="novelright cell">more stuff</div>
</div>
</div>
</div>
If you want a table with a centered caption, just use a table with a centered caption.
.novel {
width: 100%;
padding: 10px;
background-color: #fff;
}
.novelleft {
width: 40%;
vertical-align: top;
padding-left: 13%;
background-color: #fff;
}
.novelright {
width: 60%;
vertical-align: middle;
padding-right: 13%;
background-color: #fff;
}
.noveltitle {
font-family: 'Cinzel', serif;
text-align: center;
}
<table class="novel">
<caption class="noveltitle">TITLE</caption>
<tr>
<td class="novelleft">stuff</td>
<td class="novelright">more stuff</td>
</tr>
</table>
Or if you prefer not to use <table> elements, you can use use divs, but you need to keep the proper table structure:
.novel {
display: table;
width: 100%;
padding: 10px;
background-color: #fff;
}
.novelrow {
display: table-row;
}
.novelleft {
display: table-cell;
width: 40%;
vertical-align: top;
padding-left: 13%;
background-color: #fff;
}
.novelright {
display: table-cell;
width: 60%;
vertical-align: middle;
padding-right: 13%;
background-color: #fff;
}
.noveltitle {
display: table-caption;
font-family: 'Cinzel', serif;
text-align: center;
}
<div class="novel">
<div class="noveltitle">TITLE</div>
<div class="novelrow">
<div class="novelleft">stuff</div>
<div class="novelright">more stuff</div>
</div>
</div>
Though there are couple of answers that will obviously work I'd assume. I still think you should be open to using flex and then providing backward compatibility to IE with rather simpler CSS.
<div class="container">
<div class="title">
Centered Title Goal
</div>
<div class="items">
<div class="novel">
.novelLeft
</div>
<div class="novel">
.novelRight
<div>
.novelRight
</div>
</div>
</div>
</div>
CSS -
* {
box-sizing: border-box;
}
.container {
width: 100%;
border: solid 1px black;
}
.title {
width: 100%;
text-align: center;
}
.items {
width: 100%;
display: flex;
flex-direction: row;
}
.novel {
flex: 1;
display: inline-block;
width: 50%;
}
.novel:nth-child(1){
background:#404040;
}
.novel:nth-child(2){
background: #bfbfbf;
}
This will create a flexbox and as a fallback to IE where flex property doesn't work, the novelLeft and novelRight will be set to inline-block of width:50%. It's way more cleaner than doing the ancient table outlines. And as you can see, extra content on novelRight doesn't matter either.
https://jsfiddle.net/4q6f9zy7/3/
Center element vertically and new element should be added in the next line (without using <br/>)
.parent {
position: relative;
background: #FF0000;
text-align: left;
width: 100%;
height: 200px;
text-align: center;
vertical-align: middle;
}
.children {
background: #000;
width: 10%;
height: 200px;
display: inline-block;
position: relative;
vertical-align: middle;
}
Jsfiddle is in here: http://jsfiddle.net/richersoon/m8kp92yL/5/
Result should be something like this
You need to modify .parent to have a height:auto; to accommodate the height of each .children element and padding:20px 0; was added to show 20px worth of red background above the first child.
In your .children css display:inline-block was removed and margin: 0 auto allows each child to center within .parent element, after each child element margin-bottom:5px; displays the 5px gap.
.parent {
position: relative;
background: #FF0000;
text-align: left;
width: 100%;
height: auto;
text-align: center;
vertical-align: middle;
padding:20px 0px;
}
.children {
background: #000;
width: 200px;
height: 200px;
position: relative;
vertical-align: middle;
display:flex;
margin: 0 auto;
margin-bottom:5px;
}
<div class="parent">
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
</div>
I would make things easy by changing the boxes to display: flex; and making the .parent class height: auto; then adding the appropriate margins and padding like so.
.parent {
position: relative;
background: #FF0000;
text-align: left;
width: 100%;
height: auto;
text-align: center;
vertical-align: middle;
padding: 5px;
}
.children {
background: #000;
width: 200px;
height: 200px;
display: flex;
position: relative;
vertical-align: middle;
margin: auto;
margin-top: 3px;
}
<div class="parent">
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
</div>
I'm attempting to vertically align 2 divs with different heights and widths, which I've horizontally centered on the page. Text-align doesn't appear to do anything, and I was hoping that there was a solution that I'm missing.
CSS
.center {
text-align: center;
}
div#map {
background: blue;
display: inline-block;
height: 250px;
margin: 10px 15px;
width: 300px;
}
div.contact {
display: inline-block;
margin: 10px 15px;
overflow: auto;
text-align: center;
width: 350px;
}
HTML
<div class="center">
<div id="map">...</div>
<div class="contact">...</div>
</div>
Just add vertical-align: middle:
div#map,
div.contact {
vertical-align: middle;
display: inline-block;
}
.center {
text-align: center;
}
div#map {
vertical-align: middle;
background: blue;
display: inline-block;
height: 250px;
margin: 10px 15px;
width: 300px;
}
div.contact {
vertical-align: middle;
display: inline-block;
background: green;
margin: 10px 15px;
overflow: auto;
text-align: center;
width: 350px;
}
<div class="center">
<div id="map">...</div>
<div class="contact">...</div>
</div>
I'd set text-align: left for the .contact div and vertical-align: middle for both (since they are inline-blocks)
http://codepen.io/anon/pen/QdNaoJ
You can use flexbox
.center {
align-items: center;
}
You can find the flexbox documentation here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
User this in your css
div#map,div.contact {
display: inline-block;
vertical-align:middle;
}
vertical-align:middle; will aling the data in middle between your div
I have 6 divs that each contain a <p> and a link, and I want them to both be centered, with the <p> at the top and the link at the bottom. This is my html (it's basically the same for all 6):
<div id="home">
<p>P</p>
<a class="nav" href="index.html">home</a>
</div>
(all 6 are wrapped in a <header>)
This is my css:
header div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
header div a {
text-decoration: none;
color: #474747;
vertical-align: bottom;
text-align: center;
display: table-cell;
}
header div p {
font-size: 60px;
padding: 0;
text-align: center;
vertical-align: top;
display: table-cell;
}
I can't get the text-align: center to work at the same time as the vertical-align. Is there anyway to get the top/bottom positioning without using vertical-align, or to get the text-align to work?
Here's the code you're looking for, I hope: (These are not the droids you're looking for)
.wrapper {
text-align: center;
height: 200px;
width: 200px;
border: 1px solid black;
display: table;
}
.container {
display: table-cell;
vertical-align: bottom;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
I am a Link!
</div>
</div>
following Alohci's comment, if you'd like the <p> tags at the top and <a> tags at the bottom you should use the position property as follows:
.wrapper {
position: relative;
text-align: center;
height: 200px;
max-height: 200px;
width: 200px;
max-width: 200px;
border: 1px solid black;
display: table;
}
.container p {
display: inline;
vertical-align: top;
}
.container a {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
I am a Link!
</div>
</div>
Use Following CSS,
You Can Get a <p> and a link both be at centered,
div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
div a {
text-decoration: none;
color: #474747;
vertical-align: middle;
display: table-cell;
}
div p {
font-size: 60px;
padding: 0;
text-align: center;
}
Here is the Jsfiddle solution link.
http://jsfiddle.net/rbdqtxyf/
I asked this SO question yesterday to get the ellipsis working in my test form.
However, I now have another issue that I cannot solve, that relates to the answer I put in place.
When I have the users data displayed in a small preview, the ellipsis takes effect and is displayed to the user. This is done by using display: table-cell in the HTML. As shown below:
When the user views the same code in a larger modal window, the ellipsis is no longer in effect as there is room to display the users data. However, this makes the Data di completamento (resumeStyleFinishDateLabel25) too wide, as shown below:
How do I change the CSS so that the div of the Data di completamento is only as wide as the text Data di completamento and is positioned next to the start date - 01/2009? The text in the div can be different languages, meaning different text lengths, so I cannot use a fixed width to the div.
I have tried changing the CSS display from table to inline-block, but this disables the effect of the ellipsis. I have done some reading of CSS forums and SO threads, but I cannot think of a way to solve this myself.
I am hoping that someone can show me.
Here is my HTML:
<div class="resumeStyleStandardTableRow25">
<div class="resumeStyleStandardLabels25">Decorrenza</div>
<div class="resumeStyleStandardLabelContent25">
<div class="table_ellipsis">
<div class="resumeStyleDateStartContent25">01/2009</div>
<div class="resumeStyleFinishDateLabel25">
<div class="ellipsis">Data di completamento</div>
</div>
<div class="resumeStyleDateFinishContent25">
<div class="ellipsis_finishDate">11/2011 (2 anni, 10 mesi)</div>
</div>
</div>
</div>
</div>
Here is my CSS:
.resumeStyleStandardTableRow25 {
display: table-row;
}
.resumeStyleStandardLabels25 {
direction: ltr;
display: table-cell;
font-weight: bold;
height: 100%;
min-height: 25px;
overflow: hidden;
padding: 2px;
padding-right: 10px;
text-align: right;
vertical-align: top;
white-space: nowrap;
}
.resumeStyleStandardLabelContent25 {
direction: ltr;
display: table-cell;
height: 100%;
min-height: 25px;
overflow: hidden;
padding: 2px;
text-align: left;
vertical-align: top;
width: 100%;
}
.table_ellipsis {
display: table;
table-layout: fixed;
width: 100%;
}
.resumeStyleDateStartContent25 {
direction: ltr;
display: table-cell;
padding: 2px;
text-align: left;
vertical-align: top;
width: 75px;
}
.resumeStyleFinishDateLabel25 {
background-color: #fff;
color: #000;
direction: ltr;
display: table-cell;
font-weight: bold;
padding: 2px;
padding-right: 10px;
text-align: right;
vertical-align: top;
background-color: lime;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.resumeStyleDateFinishContent25 {
direction: ltr;
display: table-cell;
padding: 2px;
text-align: left;
vertical-align: top;
}
.ellipsis_finishDate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: yellow;
}
I would suggest to use CSS3 flexbox in this case, it supports ellipsis very well, and makes the markup much simpler too. Browser support IE10+.
DEMO: http://jsfiddle.net/cxpj7zaz/ [resize the output frame and see]
<div class="flexbox">
<div class="item">Decorrenza 01/2009</div>
<div class="item">
<div class="ellipsis">Data di completamento</div>
</div>
<div class="item">
<div class="ellipsis">11/2011 (2 anni, 10 mesi)</div>
</div>
</div>
.flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.item {
min-width: 0;
margin: 5px;
border: 1px solid grey;
}
.item:nth-child(1) { /*DO NOT SHRINK*/
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: yellow;
}
Instead of width: 100%; for .table_ellipsis you should use width: auto;.
Working example here:
.resumeStyleStandardTableRow25 {
display: table-row;
}
.resumeStyleStandardLabels25 {
direction: ltr;
display: table-cell;
font-weight: bold;
height: 100%;
min-height: 25px;
overflow: hidden;
padding: 2px;
padding-right: 10px;
text-align: right;
vertical-align: top;
white-space: nowrap;
}
.resumeStyleStandardLabelContent25 {
direction: ltr;
display: table-cell;
height: 100%;
min-height: 25px;
overflow: hidden;
padding: 2px;
text-align: left;
vertical-align: top;
width: 100%;
}
.table_ellipsis {
display: table;
table-layout: fixed;
width: auto;
}
.resumeStyleDateStartContent25 {
direction: ltr;
display: table-cell;
padding: 2px;
text-align: left;
vertical-align: top;
width: 75px;
}
.resumeStyleFinishDateLabel25 {
background-color: #fff;
color: #000;
direction: ltr;
display: table-cell;
font-weight: bold;
padding: 2px;
padding-right: 10px;
text-align: right;
vertical-align: top;
background-color: lime;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.resumeStyleDateFinishContent25 {
direction: ltr;
display: table-cell;
padding: 2px;
text-align: left;
vertical-align: top;
}
.ellipsis_finishDate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: yellow;
}
<div class="resumeStyleStandardTableRow25">
<div class="resumeStyleStandardLabels25">Decorrenza</div>
<div class="resumeStyleStandardLabelContent25">
<div class="table_ellipsis">
<div class="resumeStyleDateStartContent25">01/2009</div>
<div class="resumeStyleFinishDateLabel25">
<div class="ellipsis">Data di completamento</div>
</div>
<div class="resumeStyleDateFinishContent25">
<div class="ellipsis_finishDate">11/2011 (2 anni, 10 mesi)</div>
</div>
</div>
</div>