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
Related
I have two child divs inside a parent div. The first child div is 32% of the width, and the second child div is 68% of the width. If the first child div is set to display: none;, how do I make it so that the second child div goes from 68% of the width to 100% of the width? Thanks
.parent {
width: 400px;
height: 200px;
position: relative;
float: left;
display: inline-block;
}
.child1 {
width: 32%;
height: 100%;
float: left;
background-color: green;
}
.child2 {
width: 68%;
height: 100%;
float: left;
background-color: red;
}
<div class='parent'>
<div class='child1'></div>
<div class='child2'></div>
</div>
I would leverage the magic of flex!
flex: 0 0 32%; On child1 sets the width to 32%.
flex: 1; to the child2 means: Fill all the available space. So if the child1 disappears, child 2 will fill all the remaining space.
.parent {
width: 400px;
height: 200px;
display: flex;
}
.child1 {
flex: 0 0 32%;
background-color: green;
}
.child2 {
flex: 1;
background-color: red;
}
<div class='parent'>
<div class='child1'></div>
<div class='child2'></div>
</div>
If you use flex instead of float, setting display: none on one will adapt the other for you:
document.querySelector('button').addEventListener('click', () => {
document.querySelector('.child1').classList.toggle('hidden');
})
.parent {
width: 400px;
height: 200px;
position: relative;
display: flex;
}
.child1 {
flex: 0 0 32%;
background-color: green;
}
.child2 {
flex: 1 1 auto;
background-color: red;
}
.hidden {
display: none;
}
button {
margin-bottom: 1em;
}
<button>Toggle child1 visibility</button>
<div class='parent'>
<div class='child1'></div>
<div class='child2'></div>
</div>
Here instead of using float property you can use Flexbox. for more understanding follow this link.
so in flexbox you can achieve it by following the below code :-
.parent {
width: 400px;
height: 200px;
display: flex;
}
.child1 {
height: 100%;
background-color: green;
flex:1;
}
.child2 {
// display:none;
height: 100%;
flex:2;
background-color: red;
}
<div class='parent'>
<div class='child1'></div>
<div class='child2'></div>
</div>
here's how you can achieve that using your approach.
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
.parent {
width: 400px;
height: 200px;
font-size: 20px;
font-weight: bold;
color: white;
}
.child1 {
width: 32%;
height: 100%;
float: left;
background-color: green;
}
.child2 {
width: 100%;
height: 100%;
background-color: blue;
}
i've making a layout using flexbox of a how a typical website looks like ,but i've got a few questions and a couple problems . My first question is that how can i improve this layout? and the problem I'm having is that i cant put the main__content in color black in between aside..
*{
margin: 0;
padding:0;
line-height: 1.3em;
color: black;
font-size: 40px;
}
body{
background: lightslategray;
}
.header{
display: flex;
}
.zero{
height: 100vh;
width: 200px;
background: violet;
}
.one{
height: 200px;
width: 200px;
background: blue;
flex-grow: 2;}
.two{
height: 200px;
width: 200px;
background: red;
flex-grow: 2;
}
.aside {
display: flex;
}
.three{
height: 200px;
width: 200px;
background: green;
}
.four{
height: 100vh;
width: 200px;
background: yellow;
margin-left: auto;
}
.main .content{
height: 50vh;
width: 40vh;
background-color: black;
}
<body>
<div class="header">
<div class="one">content</div>
<div class="two">content</div>
<div class="three">content</div>
</div>
<div class="aside">
<div class="zero">sidebar</div>
<div class="four">sidebar</div>
</div>
<div class="main">
<div class="content">Main__content</div>
</div>
</body>
Here your are trying to apply styles to both the main and content
.main .content{
height: 50vh;
width: 40vh;
background-color: black;
}
so the child div (content) has height and width same as its parent div(main)
Try to apply:
.main {
height: 50vh;
width: 40vh;
background-color: black;
}
.content {
color: brown;
height: 100px;
font-size: 20px;
}
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;
}
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>
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;
}