I have border-radius and overflow: hidden on the parent element to hide anything overflowing inner.
It should looks like this:
It works everywhere except IE and Edge. In these browsers, it looks like this:
HTML:
<div class="table">
<div class="col1"></div>
<div class="col2"></div>
</div>
CSS:
.table {
border-radius: 10px;
border: 1px solid black;
overflow: hidden;
display: table;
width: 100%;
}
.col1 {
background: pink;
display: table-cell;
width:50px;
}
.col2 {
background: orange;
display: table-cell;
height: 200px;
}
Over flow has some issues non-block elements. So try adding a wrapping div for ".table" ans apply overflow: hidden for that wrapper. See the sample. below
.table-wrapper{
border-radius: 30px;
background: #ccc;
overflow: hidden;
display: block;
width: 200px;
}
.table {
display: table;
width: 200px;
}
.col1 {
background: rgba(255,0,0,.3);
display: table-cell;
width:50px;
}
.col2 {
background: rgba(0,255,0,.2);
display: table-cell;
height: 200px;
}
<div class="table-wrapper">
<div class="table">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
Just set border-radius on the .col1 and .col2
.table {
border-radius: 10px;
border: 1px solid black;
overflow: hidden;
display: table;
width: 100%;
}
.col1 {
background: pink;
display: table-cell;
width:50px;
border-radius: 10px 0px 0px 10px;
}
.col2 {
background: orange;
display: table-cell;
height: 200px;
border-radius: 0px 10px 10px 0px;
}
<div class="table">
<div class="col1"></div>
<div class="col2"></div>
</div>
Related
I would like the button to be positioned at the bottom right of the red colored div. I used padding-bottom and margin-bottom properties but that does not seem to work. Could anyone please help?
.container {
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
border: 1px solid blue;
padding: 8px;
}
.box {
width: 300px;
height: 150px;
border: 1px solid red;
}
.button {
float: right;
}
<div class="container">
<div class="box">
</div>
<div>
<button class="button">Click</button>
</div>
</div>
.button {
float: right;
position:relative;
transform:translate(-5px,-25px); //x and y controls
}
I have just answered the same thing to other question. ... Use position:relative. I see the point why people refrain from using it. But really ain't no shame. Especially when there isn't a parent-child relation between the elements.
.container {
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
border: 1px solid blue;
padding: 8px;
}
.box {
width: 300px;
height: 150px;
border: 1px solid red;
}
.button {
float: right;
position:relative;
top: -22px;
}
<div class="container">
<div class="box">
</div>
<div>
<button class="button">Click</button>
</div>
</div>
An alternative to the other answers using display: grid instead. This is easier for the browser than using position absolute or float!!
/* ignore */ body { margin: 0 } * { box-sizing: border-box } /* ignore */
.container {
display: grid;
width: 50vw;
height: 100vh;
border: 1px solid blue;
padding: 8px;
}
.box, .button { grid-area: 1/1/-1/-1 }
.box { border: 1px solid red }
.button { margin: auto 0 0 auto }
<div class="container">
<div class="box">
</div>
<div class="button">
<button>Click</button>
</div>
</div>
I'm using display:table and display:table-cell to display a div as if it were a table. I want the contents of one div (.cellcontents) to be vertically centered as if it were in a table cell, the problem is that I have another div (.cellhead) with the same parent that I want to have vertically aligned to the top.
So what I want is something like this
| |length|
| | |
|[img]| 120m |
| | |
What's the best way to accomplish this? Am I going about this the wrong way entirely? Current html:
<div class="table">
<div class="film row">
<div class="poster cell">[IMG]</div>
<div class="detail cell last">
<div class="cellhead">length</div>
<div class="cellcontents">120 minutes</div>
</div>
</div>
</div>
css is here
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid lightgrey;
border-right: none;
}
.film .cell.poster {
text-align: center;
vertical-align: middle;
width: 140px;
height: 5em;
}
.film .cell.detail {
vertical-align: top;
text-align: center;
width: 200px;
}
.film .cell div.cellhead {
background-color: #e5e5e5;
}
.film .cell.last {
border-right: 1px solid lightgrey;
}
Here is a solution, but it requires different markup.
.table {
display: table;
text-align: center;
border-left: 1px solid lightgrey;
}
.table .table {
width: 100%;
height: 100%;
border: none;
}
.row, .cell {
vertical-align: middle;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid lightgrey;
border-width: 1px 1px 1px 0;
height: 5em;
}
.cell .cell {
border: none;
}
.row.head {
background-color: #e5e5e5;
}
.cell.detail {
height: 100%;
width: 200px;
}
.cell.poster {
height: 5em;
width: 140px;
}
<div class="table">
<div class="cell poster">[IMG]</div>
<div class="cell">
<div class="table">
<div class="row head">length</div>
<div class="cell detail">120 minutes</div>
</div>
</div>
</div>
Setting .cell.detail height to 100% allows it to take up the most space.
See the differences here
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid lightgrey;
border-right: none;
}
.film .cell.poster {
text-align: center;
vertical-align: middle;
width: 140px;
height: 5em;
}
.film .cell.detail {
vertical-align: top;
text-align: center;
width: 200px;
}
.film .cell div.cellhead {
background-color: #e5e5e5;
height: 20%;
}
.film .cell.last {
border-right: 1px solid lightgrey;
}
.film .cell.last .cellcontents{
position: relative;
top: 50%;
transform: translateY(70%);
}
<div class="table">
<div class="film row">
<div class="poster cell">[IMG]</div>
<div class="detail cell last">
<div class="cellhead">length</div>
<div class="cellcontents">120 minutes</div>
</div>
</div>
</div>
Here a simplified version with an absolute positioned div.
Hope it helps.
.table {
display: table;
}
.cell {
border: 1px solid lightgrey;
border-right: none;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.table, .cell {
height: 5em;
}
.cell:first-child {
width: 140px;
}
.cell:last-child {
position: relative;
border-right: 1px solid lightgrey;
width: 200px;
}
.cell > div.heading {
background-color: #e5e5e5;
position: absolute;
top: 0;
width: 100%;
}
<div class="table">
<div class="cell">
[IMG]
</div>
<div class="cell">
120 minutes
<div class="heading">length</div>
</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;
}
I have a parent div with variable width and height and overflow auto, then I have two or more children div with 100% with of parent.
I would like that all the children div have the same width, but when the parent has horizontal scroll, each children have different width.
See the example:
#container {
width: 175px;
background: red;
overflow: auto;
}
.block {
height: 20px;
background: aqua;
display: inline-block;
white-space: nowrap;
border: 1px solid yellow;
width: 100%;
}
<div id="container">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
Try this
#container {
width: 175px;
background: red;
overflow: auto;
border-collapse:collapse;
}
.table {
width:100%;
display:table;
}
.block {
height: 20px;
background: aqua;
display: table-row;
white-space: nowrap;
border: 1px solid yellow;
}
<div id="container">
<div class="table">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
</div>
Please note that I changed display to table-row which automatically removes the border, but in order to preserve it I added border-collapse:collapse; to #container.
Edit: Added a div with a class "table" + relevant CSS
The solution is:
#container {
width: 175px;
background: red;
overflow: auto;
}
.block {
background: none repeat scroll 0 0 aqua;
border: 1px solid yellow;
float: left;
height: 50px;
padding: 10px;
width: 175px;
word-break: break-all;
}
<div id="container">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
How can I make this html structure
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
be displayed like this while div#1 and #2 have css float:left
( id names are integers only for demonstration purposes )
First of all, you will need to change the id's of your <div>'s to start with an alphabet rather than just one single digit since you won't be able to style your <div>'s using CSS then. Moreover, to achieve the sort of a layout which you're trying to create, you will need to wrap your two floated <div>'s inside a <div> and set the display property of that <div> to inline-block.
Here's a demo:
#one,
#two {
float: left;
}
#one {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#two {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#three {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#one {
background: pink;
}
#two {
background: brown;
}
#three {
background: gray;
}
div#row-left {
display: inline-block;
width: 200px;
overflow: hidden;
vertical-align: top;
}
div#row-right {
display: inline-block;
width: 200px;
vertical-align: top;
}
<div id="row-left">
<div id="one">One</div>
<div id="two">Two</div>
</div>
<div id="row-right">
<div id="three">Three</div>
</div>
Edit: If you want to align the three boxes to the right side of the page then you will need to wrap your HTML inside another <div> and set the text-align property of that <div> to right, like this:
#wrapper {
text-align: right;
}
#one,
#two {
float: left;
}
#one {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#two {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#three {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#one {
background: pink;
}
#two {
background: brown;
}
#three {
background: gray;
}
div#row-left {
display: inline-block;
width: 200px;
overflow: hidden;
vertical-align: top;
}
div#row-right {
display: inline-block;
width: 200px;
vertical-align: top;
}
<div id="wrapper">
<div id="row-left">
<div id="one">One</div>
<div id="two">Two</div>
</div>
<div id="row-right">
<div id="three">Three</div>
</div>
</div>
If you want to keep the given HTML structure, here's two different methods. One is working around the floats, the other is simply using absolute or relative positioning to force the third div into place.
HTML
<div id="d1">One</div>
<div id="d2">Two</div>
<div id="d3">Three</div>
CSS using inline-block (jsfiddle):
div {
width: 200px;
height: 200px;
margin: 10px;
}
#d1 {
float: left;
background-color: rgba(255,0,0,0.3);
}
#d2 {
float: left;
clear: left;
background-color: rgba(0,255,0,0.3);
}
#d3 {
background-color: rgba(0,0,255,0.3);
display: inline-block;
}
CSS using relative positioning (jsfiddle):
div {
width: 200px;
height: 200px;
margin: 10px;
}
#d1 {
float: left;
background-color: rgba(255,0,0,0.3);
}
#d2 {
float: left;
clear: left;
background-color: rgba(0,255,0,0.3);
}
#d3 {
background-color: rgba(0,0,255,0.3);
clear: both;
position: relative;
left: 220px;
top: -430px;
}
Fixed here - http://jsfiddle.net/3147og96/1/
html:
<div class="parent">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</div>
css:
.parent {
height: auto;
width: 120px;
padding: 5px;
padding-left: 110px;
border: 1px solid red;
}
.parent div {
height: 50px;
width: 50px;
border: 1px solid red;
display: inline-block;
}
#one, #two {
float: left;
}