I have a problem while using display: table; and display: table-cell; in CSS.
When the content of my left div is too big i made it so the content in the right div would adjust to the new size, only now it leaves big spots of whitespace where they do not belong.
JSFiddle example
Screenshots:
Correct whitespace:
Incorrect whitespace:
My CSS:
.module{
width: 400px;
display: table;
}
.module-info {
display: table-cell;
border: medium dashed #03F;
}
.module-controls-wrapper {
display: table-cell;
border: medium solid #C00;
text-align: center;
}
.module-controls{
position: relative;
margin: 0 auto;
max-width: 256px;
display: inline-block;
}
.controls-group{
position: relative;
width: 124px;
display: inline-block;
}
.module-button{
width: 60px;
}
If anyone could tell me how to fix this it would help so much, thank you
Add vertical-align: top to .module-info
Fiddle
.module-info {
vertical-align: top;
display: table-cell;
border: medium dashed #03F;
}
Add vertical-align:middle; to .module-info and .module-controls-wrapper:
.module-info {
display: table-cell;
vertical-align:middle;
border: medium dashed #03F;
}
.module-controls-wrapper {
display: table-cell;
vertical-align:middle;
border: medium solid #C00;
text-align: center;
}
Demo Fiddle
Related
I have three divs:
.container (display:table),
.left, .right (display:table-cell);
For .left I used 80%, the .right is 20%. In the left div I have many items with percentage width. If I add about 5 items everything work, I can resize the browser window, but when I have about 25 items the right side disappear.
I didn't added the html, because it's too long. Please check the result on JSFiddle. How can I solve this issue?
.container {
border: 1px solid gray;
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 80%;
background: yellow;
}
.right {
display: table-cell;
width: 20%;
background: red;
}
.items {
width: 40%;
height: 100px;
background: blue;
display: inline-block;
margin-right: 15px;
}
.scroll {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
If you change the table-layout property to fixed for the .container element, it resolves the issue:
Updated Example
.container {
border: 1px solid gray;
display: table;
table-layout: fixed;
width: 100%;
}
I am having trouble creating line items with the following requirements:
Line items contain: top/left aligned icon, title, and optional subtitle
Text should be vertical align middle
Width of the container is dynamic
Here is a Fiddle:
http://jsfiddle.net/6ug3314b/
Problem:
I cannot figure out how to get this CSS to work without hard coding the width of something. See the JS Fiddle link above.
I can't figure out how to get the ".licontent" div from wrapping to the next line without knowing the width of the container.
Here is the CSS so far:
.lineItems {
list-style: none;
padding: 0;
}
.lineItems > li {
border: 1px solid #eaeaea;
}
.lineItems .title {
margin: 0;
}
.lineItems .licontent {
display: inline-block;
vertical-align: middle;
padding-left: 10px;
}
.lineItems .icon {
display: inline-block;
vertical-align: middle;
width: 50px;
height: 50px;
border: 1px solid red;
}
.lineItems .icon:after {
content: 'ICON';
}
Straight forward, if I understood correctly. You just need to add a % based width that works and a #media inquiry to reduce the % as needed since the image isn't also percentage based.
JSFIDDLE
.lineItems .licontent {
display: inline-block;
vertical-align: middle;
padding-left: 10px;
width:85%;
word-break: break-word;
}
#media screen and (max-width: 550px) {
.lineItems .licontent {width:73%}
}
Sounds like CSS table and table-cell could be a great solution. It supports both unknown width and vertical-align.
And use table-layout: fixed; + word-wrap: break-word; for wrapping long lines.
DEMO: http://jsfiddle.net/pn5pja7e/
.lineItems {
list-style: none;
padding: 0;
}
.lineItems > li {
display: table;
width: 100%;
table-layout: fixed; /*NEW*/
word-wrap: break-word; /*NEW*/
}
.lineItems .licontent {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
/* word-break: break-all; */
border: 1px solid blue;
}
.lineItems .title {
margin: 0;
}
.lineItems .icon {
display: table-cell;
vertical-align: middle;
width: 50px;
height: 50px;
border: 1px solid red;
}
.lineItems .icon:after {
content: 'ICON';
}
I have a problem that a <div> table that doesn't resize when I change the width of my screen. I know you can do this with flexbox, but I can't figure out how.
This is my current code:
CSS:
.boxer-center {
display: table;
border-collapse: collapse;
margin: auto;
}
.boxer .box-row {
display: table-row;
padding: 5px;
}
.box_pricing{
display: table-cell;
text-align: left;
padding: 5px;
vertical-align: middle;
border: 1px dashed red;
min-width: 300px;
}
HTML:
<div class="boxer-center">
<div class="box-row">
<div class="box_pricing">Hi</div>
<div class="box_pricing">Hi</div>
<div class="box_pricing">Hi</div>
</div>
<div class="box-row">
<div class="box_pricing">asd</div>
<div class="box_pricing">asd</div>
<div class="box_pricing">asd</div>
</div>
</div>
I tried to convert it to flexbox, but it would not work for me. Can anybody help me with it?
.boxer-center {
position: relative;
display: table;
border-collapse: collapse;
width: 100%;
}
.box-row {
display: table-row;
padding: 5px;
}
.box_pricing{
display: table-cell;
text-align: left;
padding: 5px;
vertical-align: middle;
border: 1px dashed red;
}
JSFiddle Example
I had success by:
Setting the display:table element to 100% width.
Changing .boxer to .boxer-center as .boxer doesn't exist.
Changing border to outline so it won't affect the width of cells.
.boxer-center {
display: table;
border-collapse: collapse;
width:100%; /* Set table to 100% width */
/* margin:auto Removed this as it is not necessary */
}
.boxer-center .box-row { /* Changed to .boxer-center, .boxer doesn't exist */
display: table-row;
padding: 5px;
}
.box_pricing {
display: table-cell;
text-align: left;
padding: 5px;
vertical-align: middle;
outline: 1px dashed red; /* Changed border to outline to preserve box model */
min-width:100px; /* No cell will be smaller than 100px */
}
TEST IN JSFIDDLE
html
<div class="main">
<h1>Test</h1>
<span class="details">Jan 21, 2014</span>
</div>
css
.main{
background-color: #666666;
border: 1px solid red;
}
h1{
background-color: #383838;
display: inline-block;
margin: 0;
padding: 0;
}
.main span{
display: inline-block;
vertical-align: middle;
}
jsFiddle
This seems to be really a simple problem, but I'm not able to fix it or I'm being too lazy. Just would like to vertical-align: middle and align it to the right of the div, if I use float: right the element attaches to the bottom of the border above. Don't want to use line-height as well.
If you want a solution that doesn't include line-height, and float, also you want to align the span to the right ....
Then use display: table; for the parent element having nested child elements set to display: table-cell;
Demo
.main{
background-color: #666666;
border: 1px solid red;
display: table;
width: 100%;
}
h1{
background-color: #383838;
display: table-cell;
margin: 0;
padding: 0;
width: 20%;
}
.main span{
display: table-cell;
vertical-align: middle;
text-align: right;
}
You want to add vertical-align: middle; to your h1
Fiddle
I'm trying to make my search bar have a fluid input field width, whilst also having a 'search' button next to it.
It seems that the input field .search is way bigger than the containing element called .navigation-right, and it causes the button .search-submit to be pushed out of the containing div. See images below.
The Issue:
What I'm trying to make it look like:
Here is my code: (for convenience I left out the margin & padding values)
CSS
.navigation-right {
width: 282px; min-width: 282px;
height: 50px;
display: table-cell;
vertical-align: top;
border: 1px solid #920000;
}
.search {
width: 100%;
height: 30px;
display: table;
}
.search-input {
height: 28px;
width: 100%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
}
HTML
<div class="navigation-right">
<form class="search">
<input class="search-input">
<button class="search-submit"></button>
</form>
</div>
Replace below class
.search-input {
height: 28px;
width: 70%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
}
Is there a specific need of using display: table; and display: table-cell;? It reminds me of the days when the only way of coding was using tables...
If I may suggest an alternative way of doing the same thing and arguably doing it better :) - the input element will occupy 100% of its parent with the button having a fixed width (good for fluid or responsive layouts).
You have set your search field (.search-input) to have a 100% width, so that will fill its parent. You need to reduce the width to around 250px
.search-input {
height: 28px;
width: 70%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
float:left;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
float:left;
}
.search-input {
height: 28px;
width: 100%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
position:relative;
float:left;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
position:absolute;
float:left;
}