http://jsfiddle.net/yr15y98e/
How would I go about centering the "CENTER"(yellow) div in the fiddle.
<div id="container">
<div id="leftdiv">left</div>
<div id="middlediv">middle</div>
<div id="rightdiv">right</div>
</div>
add a float:left to your left div, then center by applying text-align:center to your container:
#container {
height: 100px;
width: 200px;
background-color: grey;
text-align:center; /* ADD THIS */
}
#container div {
display: inline-block;
}
#rightdiv {
background-color: blue;
float: right;
}
#middlediv {
background-color: yellow;
}
#leftdiv {
background-color: red;
float:left; /* ADD THIS */
}
http://jsfiddle.net/yr15y98e/1/
You can also use display: flex and justify-content: space-between;
*{
padding: 0;
margin: 0;
}
#container {
height: 100px;
width: 100%;
background-color: grey;
display: flex;
justify-content: space-between;
}
#rightdiv {background-color: blue;}
#middlediv {background-color: yellow;}
#leftdiv {background-color: red;}
<div id="container">
<div id="leftdiv">left</div>
<div id="middlediv">middle</div>
<div id="rightdiv">right</div>
</div>
You need to change the order of html like below:
<div id="container">
<div id="leftdiv">left</div>
<div id="rightdiv">right</div>
<div id="middlediv">middle</div>
</div>
And apply margin auto on middlediv like this:
#container {
height: 100px;
width: 200px;
background-color: grey;
}
#container div {
display: inline-block;
}
#rightdiv {
background-color: blue;
float: right;
}
#middlediv {
background-color: yellow;
margin: 0 auto;/*center the div*/
}
#leftdiv {
background-color: red;
float: left;
}
Related
So because of design reasons I had to use flexbox here and I needed the btn p elements to act like display block, which I managed to through another stack post, but now when I make the "other divs" class 100%, it goes out of the main parent, I cannot figure out why?
#outterWrapper {
display: inline-block;
height: 200px;
border: 1px solid red;
}
#container {
display: flex;
height: 200px;
flex-wrap: wrap;
}
#menu {
display: flex;
flex-basis: 100%;
}
#menu p {
margin: 0;
padding: 8px;
padding-bottom: 0;
}
.otherDivs {
height: 100%;
width: 25%;
background-color: grey;
margin-right: 5px;
}
<div id="outterWrapper">
<div id="container">
<div id="menu">
<p>Btn</p>
<p>Btn</p>
<p>Btn</p>
</div>
<div class="otherDivs"></div>
</div>
</div>
As from the example above the grey box goes outside of the red border?
You can switch to column direction and have something like this :
#outterWrapper {
display: inline-block;
height: 200px;
border: 1px solid red;
}
#container {
display: flex;
height: 200px;
flex-direction:column;
}
#menu {
display: flex;
}
#menu p {
margin: 0;
padding: 8px;
padding-bottom: 0;
}
.otherDivs {
height: 100%;
width: 25%;
background-color: grey;
margin-right: 5px;
}
<div id="outterWrapper">
<div id="container">
<div id="menu">
<p>Btn</p>
<p>Btn</p>
<p>Btn</p>
</div>
<div class="otherDivs"></div>
</div>
</div>
I'm trying to display to some boxes next to each other side-by-side using display:inline-block.
Unfortunately, the alignment is messed up. Why is this so?
CODE:
.leftBox {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
.rightBox {
display: inline-block;
}
.topBox {
width: 100px;
height: 50px;
background-color: yellow;
}
.bottomBox {
width: 100px;
height: 50px;
background-color: orange;
}
<div>
<div class='leftBox'>d1</div>
<div class='rightBox'>
<div class='topBox'>d2</div>
<div class='bottomBox'>d3</div>
</div>
</div>
Here's the plunker
inline-block is vertical-align:baseline by default, so set it vertical-align:top
I improved your CSS, take a look:
.box {
font-size: 0
/*fix inline-block gap */
}
.leftBox,
.rightBox {
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
font-size: 16px;
/* reset font */
}
.rightBox > div {
height: 50px
}
.leftBox {
background-color: green;
}
.topBox {
background-color: yellow;
}
.bottomBox {
background-color: orange;
}
<div class='box'>
<div class='leftBox'>d1</div>
<div class='rightBox'>
<div class='topBox'>d2</div>
<div class='bottomBox'>d3</div>
</div>
</div>
Or add this to your parent div
.parent{
display: flex;
}
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 6 years ago.
I have a site with two columns, a content one and a menu one. The menu is fairly large and will sometimes be taller than the content pane. I basically have the following setup at the moment:
.container {
width: 300px;
margin: auto;
background: red;
}
#first {
width: 75%;
float: left;
background-color: blue;
}
#second {
width: 25%;
float: left;
background-color: green;
color: white;
}
#clear {
clear: both;
}
a {
color: white;
}
* {
color: white;
}
<div class='container'>
<div id="first">Some content</div>
<div id="second">Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu</div>
<div id="clear"></div>
</div>
The #first div doesn't reach the bottom of the container, even when I add height: 100%;. How can I fix this?
You can use flexbox
.container {
width: 300px;
margin: auto;
background: red;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#first {
width: 75%;
float: left;
background-color: blue;
}
#second {
width: 25%;
float: left;
background-color: green;
color: white;
}
#clear {
clear: both;
}
a {
color: white;
}
* {
color: white;
}
<div class='container'>
<div id="first">Some content</div>
<div id="second">Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu</div>
<div id="clear"></div>
</div>
You need a height on its parents all the way to the html/body tags
.container {
display: flex;
width: 300px;
margin: auto;
background: red;
}
#first {
flex: 1;
width: 75%;
background-color: blue;
}
#second {
flex: 1;
width: 25%;
height: 300px;
background-color: green;
color: white;
}
a {
color: white;
}
* {
color: white;
}
<div class='container'>
<div id="first">Some content</div>
<div id="second">Menu</div>
</div>
For older browsers...display: table
.container {
display: table;
width: 300px;
margin: auto;
background: red;
}
#first {
display: table-cell;
width: 75%;
background-color: blue;
}
#second {
display: table-cell;
width: 25%;
height: 300px;
background-color: green;
color: white;
}
a {
color: white;
}
* {
color: white;
}
<div class='container'>
<div id="first">Some content</div>
<div id="second">Menu</div>
</div>
you have to give the container an height because if not #first will be 100% of how what if the parent don't have a height the child can not be 100% of it!!
Maybe you give him 300px like the #second or less and then you give #first 100% and it will work
Please, I am learning CSS by my self and have 2 questions:
I have 3 DIV inside a "top" DIV, and I need the second (in the center) to fill all the remaining space.
Where is what I got: https://fiddle.jshell.net/3j838det/
Here is the HTML code:
<div class="main">
<div class="top">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
<div class="bottom">bottom</div>
</div>
Here is the CSS code:
.main {
width: 500px;
margin: 10px auto 0 auto;
border: 1px solid #000000;
}
.main .top {
border-bottom: 1px solid #000000;
background-color: #CDCDCD;
}
.main .top .first {
width: 140px;
padding: 4px;
display: inline-block;
background-color: #FFCC66;
}
.main .top .second {
width:auto;
padding: 4px;
display: inline-block;
background-color: #FF9966;
}
.main .top .third {
width: 100px;
padding: 4px;
display: inline-block;
background-color: #FF6666;
}
.main .bottom{
height:60px;
padding: 4px;
}
My questions are:
How can I make second DIV to fill all the remaining space?
Why there is a space between first and second DIV, and between second and third DIV, if I did not define any margin?
Thank you!!
How can I make second DIV to fill all the remaining space?
A job for Flexbox! :D
Add the following CSS:
.main .top {
display: -webkit-flex;
display: flex;
}
.main .top .second {
-webkit-flex: 1;
flex: 1;
}
Why there is a space between first and second DIV, and between second and third DIV, if I did not define any margin?
Because there are spaces between the divs in the markup (line break + indentation), and because you display the divs as inline-blocks.
See also How to remove the space between inline-block elements?.
Flexbox eliminates this problem though, so you can remove display: inline-block at once.
[ Updated fiddle ]
Use the table-cell layout.
.main {
width: 500px;
margin: 10px auto 0 auto;
border: 1px solid #000000;
}
.main .top {
width: 100%;
border-bottom: 1px solid #000000;
background-color: #CDCDCD;
display: table;
table-layout: fixed;
}
.main .top .first {
display: table-cell;
width: 140px;
padding: 4px;
background-color: #FFCC66;
}
.main .top .second {
display: table-cell;
padding: 4px;
background-color: #FF9966;
}
.main .top .third {
display: table-cell;
width: 100px;
padding: 4px;
background-color: #FF6666;
}
.main .bottom {
height:60px;
padding: 4px;
}
How can I make second DIV to fill all the remaining space?
You can calculate the width of the .second class by calculating the remaining width available with calc. Like so:
width: calc(100% - 264px);
The 264 above was calculated from the total width from first and third divs (140px + 100px = 240px) plus the total padding for all elements (24px), which is = 264px.
Why there is a space between first and second DIV, and between second and third DIV, if I did not define any margin?
You're having gaps because of how inline-block works. It's like the spaces between between words. There are a few ways to solve this, but float: left should do here. Like so:
float: left;
Also add width: 100% to your top element and set it to display: inline-block.
Try this Demo
.main {
width: 500px;
margin: 10px auto 0 auto;
border: 1px solid #000000;
}
.main .top {
border-bottom: 1px solid #000000;
background-color: #CDCDCD;
display: inline-block;
width: 100%;
}
.main .top > div {
padding: 4px;
float: left;
}
.main .top .first {
width: 140px;
background-color: #FFCC66;
}
.main .top .second {
width: calc(100% - 264px);
background-color: #FF9966;
}
.main .top .third {
width: 100px;
background-color: #FF6666;
}
.main .bottom{
clear: both;
height:60px;
padding: 4px;
}
<div class="main">
<div class="top">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
<div class="bottom">bottom</div>
</div>
There are two standard ways to achieve this.
display: table;
* {
box-sizing: border-box;
}
.main {
width: 500px;
margin: 10px auto 0 auto;
border: 1px solid #000000;
}
.top {
display: table;
width: 100%;
border-bottom: 1px solid #000000;
background-color: #CDCDCD;
}
.cell {
display: table-cell;
width: 60px;
padding: 4px;
}
.first {
background-color: #FFCC66;
}
.second {
width: 100%;
background-color: #FF9966;
}
.third {
background-color: #FF6666;
}
.bottom {
height: 60px;
padding: 4px;
}
<div class="main">
<div class="top">
<div class="cell first">1</div>
<div class="cell second">2</div>
<div class="cell third">3</div>
</div>
<div class="bottom">bottom</div>
</div>
overflow: hidden;
* {
box-sizing: border-box;
}
.main {
width: 500px;
margin: 10px auto 0 auto;
border: 1px solid #000000;
}
.top {
border-bottom: 1px solid #000000;
background-color: #CDCDCD;
}
.top:after {
content: '';
clear: both;
display: block;
}
.top .first {
float: left;
width: 140px;
padding: 4px;
background-color: #FFCC66;
}
.top .second {
overflow: hidden;
padding: 4px;
background-color: #FF9966;
}
.top .third {
float: right;
width: 100px;
padding: 4px;
background-color: #FF6666;
}
.main .bottom {
height: 60px;
padding: 4px;
}
<div class="main">
<div class="top">
<div class="first">1</div>
<div class="third">3</div>
<div class="second">2</div>
</div>
<div class="bottom">bottom</div>
</div>
Inline-block elements alway take some space (depend on it's font size) to it's right side. So better way to use flex. But you can use this css below to solve them right now.
.main .top>div{
margin-right: -4px;
}
I have to design a 3 columns layout with these conditions:
I don't want to use percentages
I don't care if left or right columns are made with pixels
center column has to take the remaining width
elements have to be aligned vertically
I need the spans to be 100% height of their parent, to make the hover work with a full background-color
I tried using display:flex on the main container, it works well but I can't align the elements vertically. I tried using display-table: cell and vertical-align: middle but it doesn't seem to work with flex.
I developed a jsfiddle to show you what I tried: http://jsfiddle.net/v13yy2v3/4/
html, body {
height:100%;
}
#mainPercent {
background-color: red;
width: 100%;
height: 20%;
color: white;
}
#leftPercent {
background-color: green;
float: left;
width: 5%;
height:100%;
}
#centerPercent {
background-color: blue;
text-align: center;
float: left;
width: 90%;
/* percent isn't wanted */
height:100%;
display:table;
}
#centerPercent span {
display:table-cell;
vertical-align : middle;
}
#rightPercent {
background-color: purple;
float: right;
height:100%;
width: 5%;
}
#mainFlex {
background-color: red;
width: 100%;
height: 20%;
color: white;
display:flex;
/* align-items: center;
justify-content: center; items are not 100% height */
}
#leftFlex {
background-color: green;
}
#centerFlex {
background-color: blue;
text-align: center;
flex:1;
/*display:table;*/
}
#rightFlex {
background-color: purple;
}
#mainPx {
background-color: red;
width: 100%;
height: 20%;
color: white;
}
#leftPx {
width:128px;
float:left;
background-color: green;
}
#centerPx {
background-color: blue;
text-align: center;
width:100%;
}
#rightPx {
float:right;
width : 128px;
background-color: purple;
}
<br/>
<div id="mainPercent">
<div id="leftPercent"><span>left</span>
</div>
<div id="centerPercent"><span>center</span>
</div>
<div id="rightPercent"><span>right</span>
</div>
</div>
<br/>
<br/>
<div id="mainFlex">
<div id="leftFlex"><span>left</span>
</div>
<div id="centerFlex"><span>center</span>
</div>
<div id="rightFlex"><span>right</span>
</div>
</div>
<br/>
<br/>
<div id="mainPx">
<div id="leftPx"><span>left</span>
</div>
<div id="centerPx"><span>center</span>
</div>
<div id="rightPx"><span>right</span>
</div>
</div>
You'd have to keep extending the flexbox to the child items and the spans.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
#mainFlex {
background-color: red;
width: 100%;
height: 20%;
color: white;
display: flex;
justify-content: center;
}
.left {
background-color: green;
}
.center {
background-color: blue;
text-align: center;
flex: 1;
}
.right {
background-color: purple;
}
.child {
display: flex;
flex-direction: column;
}
span {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: 0.25em;
flex: 1;
}
span:hover {
background: #bada55;
}
<div id="mainFlex">
<div class=" left child"><span>left</span>
</div>
<div class="center child"><span>center</span>
</div>
<div class="right child"><span>right</span>
</div>
</div>