Is it possible without table tag or display: table?
https://monosnap.com/file/MoxMr7WehKJD4RyKWPTJ7Dyqg8dsez
<div class="wrapper">
<div class="title">Some title</div>
<div class="content">Content</div>
</div>
.wrapper {
border: 3px solid yellow;
width: 250px;
height: 350px;
position: fixed;
top: 10px;
left: 10px;
background: green;
}
.title {
min-height: 30px;
max-height: 80px;
background: blue;
}
.content {
background: red;
height: 100%;
}
http://jsfiddle.net/wqozs28y/
Ill try it with position absolute, but i donw know what will be the height on TITLE div :(
Yes, you can use flexbox depending on what level of browser support you want.
.wrapper {
border: 3px solid yellow;
width: 250px;
height: 350px;
position: fixed;
top: 10px;
left: 10px;
background: green;
display: flex;
flex-direction: column;
}
.title {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
min-height: 30px;
max-height: 80px;
background: blue;
}
.content {
background: red;
flex-grow: 1;
}
<div class="wrapper">
<div class="title">Some title</div>
<div class="content">Content</div>
</div>
JSFiddle Demo
Related
when parent has background-color and border-radius css, there has a 1px gap between hover child. How to let hover child complete cover the parent container.
example Code :
.parent{
position: relative;
background-color: black;
border-radius: 50px;
height: 200px;
width: 200px;
overflow: hidden;
border: none;
}
.child1, .child2 {
width: 100%;
height: 50%;
}
.parent:hover .hover-child{
display: block;
}
.hover-child{
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: white;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="hover-child"></div>
</div>
.child {
background-color: blue;
width: 100%;
height: 100%;
}
.parent{
position: relative;
background-color: black;
border-radius: 50px;
height: 100px;
width: 100px;
overflow: hidden;
border: none;
}
<div class="parent">
<div class="child"></div>
</div>
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 3 years ago.
I need to place a search bar on the bottom left box of the page and it has to take full width with height of 40px. However, when I set a padding to the input to avoid the placeholder to be too close to the border, the search box doesn't respect the width of the parent box and occupies space out of it.
Codepen: https://codepen.io/gabrielmlinassi/pen/gObJQQQ?editors=1100
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.box {
height: 100%;
width: 100%;
}
.box .top {
height: 30%;
width: 100%;
background-color: #cccccc;
}
.box .bottom {
background-color: #ffffff;
height: 70%;
width: 100%;
display: flex;
justify-content: space-between;
}
.box .bottom .left {
background-color: #f7f7f7;
border: solid 1px #cccccc;
border-radius: 8px;
margin-top: -100px;
margin-left: 50px;
width: 59.5%;
height: 100%;
}
.box .bottom .right {
background-color: #f7f7f7;
border: solid 1px #cccccc;
border-radius: 8px;
margin-top: -100px;
margin-left: 15px;
margin-right: 50px;
width: 40%;
height: 100%;
}
.box .bottom .left .search-wrap {
display: flex;
width: 100%;
height: 40px;
}
.box .bottom .left .search-wrap .search-box {
width: 100%;
height: 100%;
margin: 15px;
}
.box .bottom .left .search-box input {
width: 100%;
height: 100%;
padding: 0 15px;
}
<div class="box">
<div class="top"></div>
<div class="bottom">
<div class="left">
<div class="search-wrap">
<div class="search-box">
<input type="text" placeholder="searh" />
</div>
</div>
</div>
<div class="right"></div>
</div>
</div>
How do I solve it?
Add box-sizing: border-box; to include the padding in the 100% width.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.box {
height: 100%;
width: 100%;
}
.box .top {
height: 30%;
width: 100%;
background-color: #cccccc;
}
.box .bottom {
background-color: #ffffff;
height: 70%;
width: 100%;
display: flex;
justify-content: space-between;
}
.box .bottom .left {
background-color: #f7f7f7;
border: solid 1px #cccccc;
border-radius: 8px;
margin-top: -100px;
margin-left: 50px;
width: 59.5%;
height: 100%;
}
.box .bottom .right {
background-color: #f7f7f7;
border: solid 1px #cccccc;
border-radius: 8px;
margin-top: -100px;
margin-left: 15px;
margin-right: 50px;
width: 40%;
height: 100%;
}
.box .bottom .left .search-wrap {
display: flex;
width: 100%;
height: 40px;
}
.box .bottom .left .search-wrap .search-box {
width: 100%;
height: 100%;
margin: 15px;
}
.box .bottom .left .search-box input {
width: 100%;
height: 100%;
padding: 0 15px;
box-sizing: border-box;
}
<div class="box">
<div class="top"></div>
<div class="bottom">
<div class="left">
<div class="search-wrap">
<div class="search-box">
<input type="text" placeholder="searh" />
</div>
</div>
</div>
<div class="right"></div>
</div>
</div>
Note: In most cases, it's useful to include a general rule for all elements with this setting, like this:
* {
box-sizing: border-box;
}
I am trying to make a content slider with a chatbox to the side and a footer stuck to the bottom.
Here is a diagram of what I am trying to achieve:
The problem with below code is that the chatbox is the height of the page. I want the chat box to stop at the footer so that it is the height of the page -60px.
And here is what I have so far:
body {
margin: 0;
}
.wrapper {
background: #95a5a6;
display: table;
height: 100vh;
width: 100%;
}
.wrapper-inner {
display: table-cell;
padding-left: 300px;
padding-bottom: 60px;
vertical-align: middle;
text-align: center;
}
.chatbox {
background: #bdc3c7;
min-height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
width: 300px;
z-index: 2;
}
.footer {
background: #2c3e50;
bottom: 0px;
height: 60px;
position: absolute;
width: 100%;
z-index: 1;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner">Content</div>
</div>
<div class="footer"></div>
https://jsfiddle.net/bjxsyve7/4/
Here's a simplified version using only flex and calc():
body {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.chatbox {
flex: 0 0 300px;
height: calc(100vh - 60px);
overflow-y: auto;
background-color: #bdc3c7;
}
.content {
flex: 1;
background-color: #95a5a6;
}
.footer {
flex-basis: 100%;
height: 60px;
background: #2c3e50;
}
<div class="chatbox"></div>
<div class="content">Content</div>
<div class="footer"></div>
jsFiddle
You can use CSS calc() to achieve this. Add this min-height: calc(100% - 60px) to .chatbox. For more info about calc().
body {
margin: 0;
overflow-x:hidden;
}
.wrapper {
background: #95a5a6;
display: table;
height: 100vh;
width: 100%;
}
.wrapper-inner {
display: table-cell;
min-height: 100%;
padding-left:300px;
padding-bottom: 60px;
}
.chatbox {
background: #bdc3c7;
min-height: calc(100% - 60px);
position: absolute;
overflow-x: hidden;
overflow-y: auto;
top:0;
width: 300px;
z-index: 2;
}
.footer {
background: #2c3e50;
bottom: 0px;
height: 60px;
position: absolute;
width: 100%;
z-index: 1;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner"></div>
</div>
<div class="footer"></div>
You need only adding this:
.wrapper{
position: relative;
}
In your code the chatbox div has height 100% of the body. But if you set position: relative; to it's parent(.wrapper) it will have height 100% of it's parent.
This is an easy way to do this with flex:
body {
display: flex;
flex-direction:column;
min-height: 100vh;
}
.wrapper {
background: #95a5a6;
display: flex;
flex: 1;
}
.chatbox {
background: #bdc3c7;
overflow-x: hidden;
overflow-y: auto;
width: 200px;
}
.footer {
background: #2c3e50;
height: 60px;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner">Content</div>
</div>
<div class="footer"></div>
I'm trying to replicate this, essentially:
So basically two 50% <div>'s side-by-side, with some form of absolute positioning (I assume) to achieve the left box to go over the top of the right box (the red line is just representing the middle of the viewport)
Any hints? Thanks :)
.container {
width: 500px;
height: 300px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box1 {
width: 100%;
height: 100%;
background-color: blue;
transform: skewX(-20deg) translateX(-40%);
position: absolute;
z-index: 10;
}
.box2 {
width: 100%;
height: 100%;
background-color: red;
z-index: 0;
}
Should be pretty simple with CSS3.
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
I offer a version without the transformation, using pseudoelement. It is faster and does not distort the text.
.container {
width: 500px;
height: 300px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box1 {
width: 50%;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
}
.box1::after{
background: linear-gradient(to bottom right, blue 50%, transparent 0);
content: " ";
width: 20%;
height: 100%;
position: absolute;
left: 100%;
z-index: 1;
}
.box2 {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
right: 0;
}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
Try this
.wrapper {
overflow-x: hidden;
}
.outer {
position: absolute;
width: 2000px;
left: 50%;
bottom: 0;
margin-left: -1000px;
display: flex;
justify-content: center;
align-items: center;
}
.left__inner {
background: goldenrod;
padding: 24px 48px;
flex: 1;
transform: skew(45deg);
display: flex;
justify-content: flex-end;
}
.right__inner {
background: #222;
padding: 24px 48px;
flex: 1;
transform: skew(45deg);
}
.left__text,
.right__text {
transform: skew(-45deg);
span {
font-weight: 200;
font-size: 36px;
text-transform: uppercase;
}
}
.left__text {
color: #3c3c3c;
}
.right__text {
color: Goldenrod;
}
<div class="wrapper">
<div class="outer">
<div class="left__inner">
<div class="left__text">
<span> so skewy</span>
</div>
</div>
<div class="right__inner">
<div class="right__text">
<span>span much angle</span>
</div>
</div>
</div>
</div>
I would do it like this
this is just an example, not a ready-made solution ))
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
.container {
display: flex;
}
.container div {
width: 50%;
height: 200px;
position: relative;
}
.container .left:before {
content: '';
position: absolute;
right: 0;
top: 0;
height: 100%;
transform: skewY(-1.5deg);
background: inherit;
}
In this example is it possible to click the blue box without affecting the red box without using js?
http://codepen.io/YikesItsMikes/pen/MaPBJy
HTML
<div id="boxone">
<div id="boxtwo"></div>
</div>
CSS:
#boxone{
width: 200px;
height: 200px;
background: red;
margin: 50px auto;
padding: 10px;
}
#boxtwo{
width: 100px;
height: 200px;
background: blue;
z-index: 999;
}
#boxone:active{
background: yellow;
}
#boxtwo:active{
background: green;
}
Not possible with the current HTML where #boxone wraps #boxtwo.
You could layer the HTML so that #boxtwo is on top of #boxone without nesting it like this;
http://codepen.io/anon/pen/vNVaWV
.wrapper{
width: 200px;
margin: 50px auto;
position: relative;
}
#boxone{
width: 200px;
height: 200px;
background: red;
position: relative;
padding: 10px;
display: inline-block;
}
#boxtwo{
width: 100px;
height: 200px;
background: blue;
z-index: 999;
position: absolute;
top: 10px;
left: 10px;
}
#boxone:active{
background: yellow;
}
#boxtwo:active{
background: green;
}
<div class="wrapper">
<div id="boxone"></div>
<div id="boxtwo"></div>
</div>