I'm making a DIV table but the last two rows which contain colums don't show a border.
Does somebody know a workarround?
Here is my code:
CSS
.contentwrap { width: 300px; display: table; }
.contentwrap .box-row {display: table-row;}
.contentwrap .box { padding: 15px; display: table-cell; border: 1px solid #e5e5e5; }
.contentwrap .box-column { display: table-row; }
.contentwrap .column { padding: 15px; display: table-cell; width: 10%; border-color: #e5e5e5; }
HTML
<div class="contentwrap">
<div class="box-row">
<div class="box">row 1</div>
</div>
<div class="box-row">
<div class="box">row 2</div>
</div>
<div class="box-row">
<div class="box">rpw 3</div>
</div>
<div class="box-row">
<div class="box">row 4</div>
</div>
<div class="box-row">
<div class="box-column">
<div class="col">column1</div>
<div class="col">column2</div>
<div class="col">column3</div>
<div class="col">column4</div>
</div>
<div class="box-column">
<div class="col">column1</div>
<div class="col">column2</div>
<div class="col">column3</div>
<div class="col">column4</div>
</div>
</div>
</div>
I'm not sure if this is the effect you want, but I just changed
border-color: #e5e5e5; in .contentwrap .column to border: 1px solid #e5e5e5;
Like this
.contentwrap .col
{
padding: 15px;
display: table-cell;
width: 10%;
border: 1px solid #e5e5e5
}
Also you might want to check your namings, in your html you are using col but your css is using column. I changed it to col for you here.
From what I can understand, the following modifications to your CSS should do the trick.
.box-column { display: table-row; }
.col{ padding: 15px; display: table-cell; width: 10%; border-color: #e5e5e5; border: 1px solid #e5e5e5; }
Related
I have replaced an old table with a new one made out of Divs and everything works fine except for one thing.
I want to have a header that is Spanning over the hole width of the Table but not as in the table-heading css clas where you have multiple cells in the heading.
I just cant get it to work I tried colspan but since this isnt a thing for divtables this did not work.
Here is a small example of my table.
.divTableCell{
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
background-color: #ffffff;
width: 50%;
}
.divTableRow {
display: table-row;
width: 100%;
}
<div class="divTableRow">
<div class="divTableCell">1</div>
<div class="divTableCell">2</div>
<div class="divTableCell">3</div>
</div>
Everytime I tried to create the Header with the Talbe-heading class it only would fit over the Left Tablecell.
Thanks for helping.
You can try to make the header a table-caption. See example below:
.divTableCell{
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
background-color: #ffffff;
width: 50%;
}
.table {
display: table;
}
.divTableRow {
display: table-row;
width: 100%;
}
.header {
display: table-caption;
border: 1px solid #ccc;
}
<div class="table">
<div class="header"> This is a test</div>
<div class="divTableRow">
<div class="divTableCell">1</div>
<div class="divTableCell">2</div>
<div class="divTableCell">3</div>
</div>
</div>
.divTableCell{
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
background-color: #ffffff;
width: 50%;
}
.divTableRow {
display: table-row;
width: 100%;
}
<div style="width:100%;">
<div style="border:1px solid #000;" ><b>header</b></div>
<div class="divTableRow">
<div class="divTableCell">1</div>
<div class="divTableCell">2</div>
<div class="divTableCell">3</div>
</div>
</div>
Have a structure:
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
How can I make div3 floating left to div2, and then make a left shift on div2?
Try This:
#div1 {
float: left;
width: 200px;
height: 30px;
border: 5px solid #ccc;
margin: 5px;
padding: 2px;
text-align: center;
}
#div2 {
float: right;
width: 80px;
text-align: center;
border: 5px solid #000;
}
#div3 {
float: left;
width: 200px;
height: 30px;
border: 5px solid red;
margin: 5px;
padding: 2px;
text-align: center;
}
<div id="div1">
div 1
<div id="div2">div 2</div>
</div>
<div id="div3">div 3</div>
Here is jsfiddle : https://jsfiddle.net/nmsptskp/
Use display:inline-block on all 3 div & float:right on div2
#div1 {
border: 1px solid #f00;
height: 20px;
width: 100px;
display:inline-block;
}
#div2 {
float: right;
border: 1px solid #0f0;
height: 20px;
width: 50px;
display:inline-block;
}
#div3 {
border: 1px solid #00f;
height: 20px;
width: 50px;
display:inline-block;
}
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
My answer is using flexbox css
.container{
display: flex;
}
#div1{
flex-grow: 1;
border:5px solid #ccc;
text-align:center;
display: flex;
justify-content: space-between;
flex-direction: col;
}
#div2{
width: 50%;
text-align:center;
border:5px solid #000;
self-
}
#div3{
flex-grow: 1;
border:5px solid red;
text-align:center;
}
<div class="container">
<div id="div1">
div 1
<div id="div2"> div 2</div>
</div>
<div id="div3"> div 3</div>
</div>
Use float left and right
<style>
#div1{width:300px;height:50px;background:green;margin:10px;float:left;}
#div2{width:100px;height:50px;background:red;float:right;opacity:0.7}
#div3{width:100px;height:50px;background:yellow;margin:10px;float:left;}
</style>
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
How can I make the 3 child divwith class .box have the same width while fluidly occupying the entire parent container div while staying inline.
Here is a fiddle
#container {
width: 20em;
background: red;
text-align: center;
}
.box {
display: inline-block;
margin: 1em;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
use CSS flexbox for that
#container {
width: 20em;
display: flex;
background: red;
text-align: center;
}
.box {
flex: 1;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
OR
use inline-block as you already are using, with a few tweaks.
* {
box-sizing: border-box
}
#container {
width: 20em;
background: red;
text-align:center
}
.box {
font-size: 16px;
display: inline-block;
width: calc(100% / 3);
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div><div class="box">test</div><div class="box">test</div>
</div>
OR
use CSS tables for old browsers support
#container {
width: 20em;
display: table;
background: red;
text-align: center;
}
.box {
display:table-cell;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
display:table version:
#container {
width: 20em;
background: red;
text-align: center;
display: table;
table-layout: fixed;
border-spacing: 1em;
/* instead the margin:1em; you applied to children */
}
.box {
display: table-cell;
;
border: 1px solid #000;
}
.middle{vertical-align:middle;}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
<hr/>
<div id="container">
<div class="box">test
<br/>+ 1line ?</div>
<div class="box">test</div>
<div class="box middle">test</div>
</div>
table-layout:fixed will fix width value you set, for main container and children.
if children(table-cell) have no width set, they will spray evenly
#container {
width: 20em;
background: red;
text-align: center;
display: table;
table-layout: fixed;
border-spacing: 1em;
/* instead the margin:1em; you applied to children */
}
.box {
display: table-cell;
;
border: 1px solid #000;
}
.middle{vertical-align:middle;}
<div id="container">
<div class="box">test test test test </div>
<div class="box">test</div>
<div class="box">test</div>
</div>
<hr/>
<div id="container"class=" bis ">
<div class="box">testtesttesttest testtesttest</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
If you want to do this with display: inline-block you can set equal width of 33.33% on each .box, remove white space from HTML and also add box-sizing: border-box.
* {
box-sizing: border-box;
}
#container {
width: 20em;
background: red;
text-align: center;
}
.box {
display: inline-block;
width: 33.33%;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div><div class="box">test</div><div class="box">test</div>
</div>
If a user is signed up to my site, in their login area I have 3 divs as follows:
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
These divs all have a width of 32% and sit inline with each other.
#psts-cancel-link {
background: white;
border-left: 3px solid #ccc;
padding: 1em;
width: 32%;
min-height: 270px;
float: left;
}
.psts-receipt-link {
background: white;
border-left: 3px solid #ccc;
min-height: 270px;
float: left;
width: 32%;
margin: 0 10px;
padding: 20px;
}
#psts-signup-another {
background: white;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
width: 32%;
min-height: 270px;
float: left;
}
When a user is not signed up, only one of the divs displays:
<div id="psts-signup-another"></div>
Is it possible to change the styling of this so that it's width is 100% when div1 and div2 aren't displayed?
So far I have tried this, but with no success:
#psts-cancel-link ~ .psts-receipt-link ~ #psts_existing_info #psts-signup-another {
width:100%;
}
Table Layout Implementation
Use a table layout. Specify display: table on the parent and display: table-cell on the child elements.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
display: table-cell;
word-wrap: break-word;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.container {
display: table;
width: 100%;
table-layout: fixed;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
Flexbox Layout Implementation
You can also use flexbox which expands and shrinks the child items according to the parent container.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
flex: 1;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
flex: 1;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
flex: 1;
}
.container {
display: flex;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
You could simply use :first-child if it's indeed the only child in the second case.
#psts-signup-another:first-child {}
You can use the adjacent selector. Have a look at the following snippet:
#psts-signup-another {padding: 5px; background: #f99;}
div + div + #psts-signup-another {padding: 5px; background: #99f;}
<h2>Div when three divs are present</h2>
<div class="theDivs">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
<h2>Div when three divs are not present</h2>
<div class="theDivs">
<div id="psts-signup-another"></div>
</div>
i think you should use another container div with a new class when user logout.
Logged:
<div class="container">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logout:
<div class="container logout">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
CSS:
.container.logout > div {
display:none;
}
.container.logout > .psts-signup-another {
display:block;
}
Hi I'm trying to center 3 divs inside of a div.
.outer {
border: 1px solid blue;
width: 80%;
}
.inner {
border: 1px solid red;
float: left;
width: 20px;
height: 20px;
margin-left: 20px;
}
.clear {
clear: both;
}
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="clear"></div>
</div>
Can someone help on this.
Thanks.
If you want to achieve this just:
HTML:
<div class="outer">
<div style="display: inline-block;">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</div>
CSS:
.outer{
border: 1px solid blue;
width: 80%;
text-align: center;
}
.inner:first-of-type{
margin-left: 0px;
}
.inner{
border: 1px solid red;
width: 20px;
height: 20px;
margin-left: 20px;
float: left;
}