I'm not very experienced with css and I encountered the following issue while trying to do a layout with fixed-width left and right columns, and a dynamic middle one.
The only way I was able to accomplish this was using margins on the middle div, to avoid the overlapping with the side columns. I imagine that there's a cleaner way of achieving this, but I haven't been able to find a solution for it yet.
See jsfiddle here with margin left and no margin on the right: http://jsfiddle.net/juansg_eng/BCJ6C/119/
HTML
<div class="left">With margin</div>
<div class="right">No margin</div>
<div class="middle"></div>
css
.left { float: left; width: 134px; height: 191px; background-color:#0000ff; opacity: 0.5}
.middle { height: 50px; background-color: #ff0000; margin-left: 134px}
.right { float: right; width: 183px; height: 191px; background-color:#ffff00; opacity:0.5}
thanks!
flexbox can do that. No floats or margins required.
* {
margin: 0;
padding: 0;
}
.main {
height: 191px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border: 2px solid green;
}
.main > div {
border: 1px solid grey;
}
.left {
-webkit-box-flex: 0;
-webkit-flex: 0 1 134px;
-ms-flex: 0 1 134px;
flex: 0 1 134px;
background-color: #0000ff;
opacity: 0.5
}
.middle {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
height: 50px;
background-color: #ff0000
}
.right {
-webkit-box-flex: 0;
-webkit-flex: 0 0 183px;
-ms-flex: 0 0 183px;
flex: 0 0 183px;
background-color: #00ff00;
opacity: 0.5
}
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
Adding display: flex; to middle container should do the trick.
Do check the browser support.
.left {
float: left;
width: 134px;
height: 191px;
background-color: #0000ff;
opacity: 0.5
}
.middle {
height: 50px;
background-color: #ff0000;
display: flex;
}
.right {
float: right;
width: 183px;
height: 191px;
background-color: #ffff00;
opacity: 0.5
}
<div class="left">With margin</div>
<div class="right">No margin</div>
<div class="middle"></div>
Reference link
.left { float: left; width: 134px; height: 191px; background-color:#0000ff; opacity: 0.5}
.middle { float:left; width: calc(100% - (134px + 183px)); height: 50px; background-color: #ff0000;}
.right { float: right; width: 183px; height: 191px; background-color:#ffff00; opacity:0.5}
Related
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>
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
I am working on a page redesign that contains 3 divs and I want to make it responsive.
The problem I face is that the divs for large screen are arranged in the order 1,2,3. For responsive design however, I want to change the order to 1,3,2:
I tried different approaches like changing position to relative/absolute/static or changing the divs order with alternative CSS code but nothing proved to work so far.
Any ideas how I can achieve this?
.one {
float: left;
width: 150px;
border: solid 2px #eaeaea;
position: relative;
z-index: 0;
margin-bottom: 20px;
height: 100px;
}
.two {
float: left;
margin: 0 0 0 24px;
width: 150px;
border: solid 2px #eaeaea;
height: 100px;
}
.three {
float: left;
width: 900px;
border: solid 2px #eaeaea;
height: 100px;
}
#media only screen and (max-width: 500px) {
.one {
width: 93%;
padding: 3%;
}
.two {
width: 100%;
margin-left: 0px;
}
.three {
width: 100%;
margin: 0px;
}
}
<div class="one">Content1</div>
<div class="two">Content2</div>
<div class="three">Content3</div>
<div class="500markup">This box is 500px</div>
JSFIDDLE HERE
https://jsfiddle.net/fehrda1c/4/
<div class="container">
<div id="one">Content1</div><!--
!--><div id="three">Content3</div>
<div id="two">Content2</div>
</div>
.container {
padding: 5px;
position: relative;
}
#one, #two {
width: 50%;
display: inline-block;
box-sizing: border-box;
}
#two {
position: absolute;
top: 0;
right: 0;
}
#one {
position: absolute;
top: 0;
left: 0;
}
#three {
position: absolute;
top: 200px;
left: 0;
box-sizing: border-box;
}
#one, #two, #three {
margin: 0;
height: 200px;
border: 1px solid black;
}
#three {
width: 100%;
}
#media (max-width: 600px) {
#one, #two, #three {
width: 100%;
position: initial;
top: default;
}
}
This can be achieved using flexbox:
Contain the divs in a #container set to display: flex; this will tell the child divs to use the flexbox model
Add flex: 1; to .one and .two to tell them to grow if required
Add flex-basis: 100%; to .three to ensure it takes up the full width of the container
Add order: *n*; to .one, .two and .three to give them the desired order when they adapt to the smaller screen size
#container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.one {
border: solid 2px #eaeaea;
flex: 1;
height: 100px;
margin-bottom: 20px;
}
.two {
border: solid 2px #eaeaea;
flex: 1;
height: 100px;
margin-bottom: 20px;
}
.three {
border: solid 2px #eaeaea;
flex-basis: 100%;
height: 100px;
margin-bottom: 20px;
}
#media only screen and (max-width: 500px) {
.one {
flex-basis: 100%;
order: 1;
}
.two {
flex-basis: 100%;
order: 3;
}
.three {
flex-basis: 100%;
order: 2;
}
}
<div id="container">
<div class="one">Content1</div>
<div class="two">Content2</div>
<div class="three">Content3</div>
</div>
Flexbox can do this.
JSfiddle Demo
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container div {
height: 150px;
border: 1px solid red;
margin-bottom: 10px;
}
.container {
padding: 5px;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 500px;
border: 1px solid grey;
}
#one,
#two {
width: 220px;
}
#three {
width: 500px;
}
#media (max-width: 600px) {
#one {
order: 1;
width: 500px;
}
#two {
order: 3;
width: 500px;
}
#three {
order: 2;
}
<div class="container">
<div id="one">Content1</div>
<div id="two">Content2</div>
<div id="three">Content3</div>
</div>
You can do like following:
#media only screen and (max-width:500px)
{
.one{width: 93%; padding: 3%;}
.two{width: 100%; margin-left: 0px; margin-bottom: 10px; position:absolute; top:320px;}
.three{width: 100%; margin: 0px;}
}
Check Fiddle Here.
how should I change the following css code to make it monitor flexible with 1% distance with the footer and header.
#main {
margin: 1%;
padding: 0%;
height: 50%;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 3px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 1;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 3px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 2;
order: 2;
}
footer {
margin-top: 1%;
background: #eebb55;
color: #000;
width: 100%;
padding-bottom: 1px;
position: absolute;
text-align: center;
bottom: 0;
left: 0;
}
<header>
<ul>
<li><b>Home</b>
</li>
<li><b>Google</b>
</li>
<li><b>Reserve</b>
</li>
</ul>
</header>
<div id='main'>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>copyright by xxx</footer>
http://www.codeshare.io/fFS2t
Assuming you mean that the main div should have 1% distance to the header and footer you could use this: (Requires CSS3)
body {
margin: 0;
padding: 0;
}
#wrapper {
background: yellow;
height: 300px; /* Can be any value */
width: 100%;
}
header {
background: red;
height: 40px;
width: 100%;
}
#main {
background: green;
height: calc(100% - 80px - 2%); /* 80px = Header and footer height */
margin: 1% 0px;
width: 100%;
}
footer {
background: navy;
height: 40px;
width: 100%;
}
<div id="wrapper">
<header>
Header
</header>
<div id="main">
Main
</div>
<footer>
Footer
</footer>
</div>