Take this web example into account (it seems to have the same issue) I have the following CSS on my website (note the space between the #head and #body <div>'s):
#body {
display: table;
border-spacing: 0;
border-collapse: collapse;
}
#body-row {
display: table-row;
margin: 0;
padding: 0;
}
.column-left, .column, .column-right {
display: table-cell;
padding: 0px;
border: dotted 2px #89E;
}
.column-left, .column-right {
width: 190px;
font-size: .95em;
}
However, this still adds a space between the very top and bottom of the table-cell. Padding and margin do no seem to do anything for this. Advice?
.column-left, .column, .column-right {
vertical-align: top; /* add vertical align top to fix this issue */
display: table-cell;
padding: 0px;
border: dotted 2px #89E;
}
Related
I just can't realize why first child has white space right after parent's "border". What is my mistake?
.content {
font-size: 22px;
}
.content__row {
height: 150px;
}
.content__column_half {
width: 49%;
height: 100%;
display: inline-block;
box-sizing: border-box;
padding-top: 30px;
padding-bottom: 30px;
border-bottom: 1px dotted #000000;
background-color: graytext;
}
https://jsfiddle.net/x8ant22n/
Add this to .content__column_half:
display: block;
float: left;
margin: 0 .5%;
And remove: display: inline-block.
Fiddle: https://jsfiddle.net/x8ant22n/2/
Flex Alternative:
Add display: flex to .content__row and add flex-grow: 1 to .content__column_half`.
Remove display: inline-block
Fiddle: https://jsfiddle.net/x8ant22n/3/
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';
}
So I have created an example in JSFiddle which is layered out similar to a table, row and cells however which I'm trying to make so the columns are all equal height but as you can see from the white background on each column this is not really working out.
I want to avoid a JS solution and know its possible in CSS but I think I'm just missing something.
JSFIDDLE: https://jsfiddle.net/6swpqhuf/1/
CSS:
body {
background: black;
}
div.table {
display: table;
}
div.row {
display: table-row;
clear: both;
}
div.col {
display: table-cell;
background: white;
width: 30%;
float: left;
margin: 0 20px 20px 0;
}
Following on from my comment. As you can see in your code you have float: left; why is this here? display: table-cell; is already putting them in the same row for you.
Just remove this and it will fix your layout.
div.col {
display: table-cell;
background: white;
width: 30%;
margin: 0 20px 20px 0;
}
DEMO
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
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;
}