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;
}
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>
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
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>
What I'm trying to achieve:
I'm trying to position three elements alongside each other. Two content boxes with a dividing div in between. I am getting overflow problems with the right content box. It always appears below the two other divs.
It may be a problem with how the centre divider is positioned but I can't think of a better method of positioning it.
Codepen of what I currently have:
http://codepen.io/anon/pen/vNNKpB?editors=110
Here's my CSS:
.contact {
height: 300px;
}
.container {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 0.1%;
margin-left: 49.95%;
margin-right: 49.95%;
height: 300px;
background-color: darkgray;
}
.left-contact {
width: 500px;
float: left;
height: 300px;
background-color: lightgray;
}
.right-contact {
float: right;
width: 500px;
height: 300px;
background-color: lightgrey;
}
If you use width in % for .container you should use width in % for the child elements. Otherwise, you always will have errors on the different screen size.
The new way of the positioning you want is to use flexbox without floats:
.container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
/* ... another styles here */
}
Demo: http://codepen.io/anon/pen/RWWROr
But if you use flexbox don't forget about browser prefixes, you can get them here http://autoprefixer.github.io/
You can add another div inside the .centre-divider div which will be the vertical line, then just set a display: inline-block; on .centre-divider:
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 50%;
display: inline-block;
height: 300px;
}
.centre-divider > div {
width: 1px;
height: inherit;
background: gray;
margin: 0 auto;
}
.left-box {
width: 25%;
float: left;
height: 300px;
background-color: lightgray;
}
.right-box {
float: right;
width: 25%;
height: 300px;
background-color: lightgrey;
}
<body>
<header>
<h1>Heading</h1>
</header>
<div class="contact">
<div class="container">
<div class="left-box">
</div>
<div class="centre-divider">
<div></div>
</div>
<div class="right-box">
</div>
</div>
</div>
</body>
You will have to adjust the widths but you get the idea.
Just Add this CSS:
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
width: 70%;
float:left;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 0.1%;
float:left;
margin-left: 5%;
margin-right: 4%;
height: 300px;
background-color: darkgray;
}
.left-box {
width: 400px;
float: left;
height: 300px;
background-color: lightgray;
}
.right-box {
float: left;
width: 400px;
height: 300px;
background-color: lightgrey;
}
you can use display: inline-block; instead of floating the elements. when you text-align: center on the .contact div, then the .left-box, .right-box, and .centre-divider are automatically centered in spacing (so you dont have to calculate it yourself, and it still is responsive to the width of the screen.
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
text-align: center;
}
.centre-divider {
width: 2px;;
display: inline-block;
margin-left: 50px;
margin-right: 50px;
height: 300px;
background-color: darkgray;
}
.left-box {
width: 200px;
display: inline-block;
height: 300px;
background-color: lightgray;
}
.right-box {
display: inline-block;
width: 200px;
height: 300px;
background-color: lightgrey;
}
<body>
<header>
<h1>Heading</h1>
</header>
<div class="contact">
<div class="container">
<div class="left-box">
</div>
<div class="centre-divider"></div>
<div class="right-box">
</div>
</div>
</div>
</body>
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;
}