how can I make all divs get on the same line and fill div#2 the space between the left floated div#1 and right floated div#3?
Maybe flex will help you, here is an JSFiddle.
HTML
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
CSS
.parent {
display: -webkit-flex;
display: flex;
}
.div1 {
width: 30px;
height: 30px;
background: #FFCC99;
}
.div3 {
width: 30px;
height: 30px;
background: #FCF305;
}
.div2 {
-webkit-flex: auto;
flex: auto;
height: 30px;
background: #CCFFCC;
}
You could use display: table for this kind of implementation (note this is not using tables for layout):
html,
body {
margin: 0;
padding: 0;
}
.wrap {
display: table;
width: 100vw;
}
.one {
display: table-cell;
height: 50px;
width: 20%;
background: red;
}
.two {
display: table-cell;
height: 50%;
width: 60%;
background: cornflowerblue;
}
.three {
display: table-cell;
background: lime;
height: 50px;
}
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
Notice how I haven't set a width on the last element, yet it's filling the rest of the space available?
Here's a dummy implementation:
<div id="l"></div>
<div id="r"></div>
<div id="c"></div>
<style>
#l {
float: left;
width:30%;
}
#r {
float: right;
width: 30%;
}
#c {
margin: 0 auto;
width: 40%;
}
</style>
Related
Let's say I have a parent <div> with a fixed height and with flex item children.
Is there a way to have its children height not fixed but extending depending on their content ?
.main-container {
height: 250px;
background-color: green;
display: flex;
flex: 0 1 auto;
overflow: auto;
}
.div1 {
width: 100%;
height: 100%;
background-color: lightcoral;
}
.div2 {
width: 100%;
background-color: lightgrey;
}
.div3 {
width: 100%;
background-color: lightpink;
}
div p {
font-size: 10em;
}
<div class="main-container">
<div class="div1">
<p>a</p>
</div>
<div class="div2">q</div>
<div class="div3">s</div>
</div>
Wanted result :
You don't need to use fit-content (which is not supported in Firefox: https://caniuse.com/#feat=mdn-css_properties_height_fit-content), you simply need to disable the stertch effect by adding align-self:flex-start; to the needed element
.main-container {
height: 250px;
background-color: green;
display: flex;
flex: 0 1 auto;
overflow: auto;
}
.div1 {
width: 100%;
align-self:flex-start;
background-color: lightcoral;
}
.div2 {
width: 100%;
background-color: lightgrey;
}
.div3 {
width: 100%;
background-color: lightpink;
}
div p {
font-size: 10em;
}
<div class="main-container">
<div class="div1">
<p>a</p>
</div>
<div class="div2">q</div>
<div class="div3">s</div>
</div>
Is there a way to have its children height not fixed but extending depending on their content ?
If you want a div to be as high as it content needs, you can apply height: fit-content; on that div.
Example in the snippet below (for the left column):
.main-container {
height: 250px;
background-color: green;
display: flex;
flex: 0 1 auto;
overflow: auto;
}
.div1 {
width: 100%;
height: fit-content;
background-color: lightcoral;
}
.div2 {
width: 100%;
background-color: lightgrey;
}
.div3 {
width: 100%;
background-color: lightpink;
}
div p {
font-size: 10em;
}
<div class="main-container">
<div class="div1">
<p>a</p>
</div>
<div class="div2">q</div>
<div class="div3">s</div>
</div>
I have a section inside width: 1180px; i want to extend this green color div I want to make width: 100% I have tried using vw but not getting but some extra space is coming. can anyone suggest me? Is there any other way to do using CSS.
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
width: 100vw;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You need to reset the margin using media query. Initially you have a negative margin but after 1180px it will be a positive one creating the unwanted space. You also don't need to set width using vw unit. Keeping the default width is enough:
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
}
#media all and (max-width:1180px) {
.box2 {
margin:0;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You could use negative margin - the only problem with this approach is that if the page gets a vertical scroll, this will add a horizontal scroll as 100vw doesn't take into account the 20px caused by the vertical scroll:
body {
margin: 0;
}
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
#media screen and (min-width:1180px) {
.box2 {
margin: 0 calc(((100vw - 1180px) / 2) * -1);
width: auto;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
As I say in my comments, it would be better to just move the green div outside your wrapper
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
Try this:
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
I have 3 divs (colored squares) and a button.
How can I center the button under the divs?
With my current code the button appears in the same line as #squares and it's floating to the left. Thanks for your answers.
#div1 {
background-color: red;
width: 100px;
height: 100px;
margin-right: 10px;
}
#div2 {
background-color: green;
width: 100px;
height: 100px;
margin-right: 10px;
}
#div3 {
background-color: blue;
width: 100px;
height: 100px;
}
#squares {
display: flex;
position: absolute;
margin-left: 35%;
}
#button {
width: 100px;
height: 50px;
clear: both;
}
<div id="squares">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="button">
<button>Click me!</button>
</div>
Since you're already using flexbox, there are multiple solutions, all of them relatively simple.
Here's one:
Wrap both containers in a parent container.
Add display: flex and flex-direction: column to this new container.
Now you can easily align the squares and the button both vertically and horizontally.
#container {
display: flex;
flex-direction: column;
}
#div1 {
background-color: red;
width: 100px;
height: 100px;
}
#div2 {
background-color: green;
width: 100px;
height: 100px;
margin: 0 10px;
}
#div3 {
background-color: blue;
width: 100px;
height: 100px;
}
#squares {
display: flex;
align-self: center;
margin-bottom: 10px;
}
#button {
align-self: center;
text-align: center;
width: 100px;
height: 50px;
}
<div id="container">
<div id="squares">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="button">
<button>Click me!</button>
</div>
</div>
Is there a specific reason you are using position: absolute for the square-container?
If not, you can just make the position relative, recenter the content and center the button.
Important code changes:
#squares {
position: relative;
justify-content: center;
}
#button {
margin: 0 auto;
}
Fiddle: https://jsfiddle.net/q17fa25w/
Other way to solve it, you can set padding left and top for #button div like this:
#button {
width: 100px;
height: 50px;
clear: both;
padding: 120px 35%;
}
I'm trying to put 3 divs(with different widths respectively : 10%,70% & 20%) in the same row but the middle one always go full width of the page.
Here is my code:
#left-bar {
width: 10%;
background-color: #FF0000;
}
#middle-bar {
width: 70%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
By default div is a block level element that's why they aren't in the same row.
You have a few options to fix this:
option with CSS flexbox:
.row {
display: flex;
width: 100%
}
.row>div {
/*demo purposes */
height: 30px;
}
#left-bar {
flex: 0 10%;
background-color: #F00;
}
#middle-bar {
flex: 1;
background-color: #60F;
}
#right-bar {
flex: 0 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
(old options)
option with display:inline-block
.row {
/*fix inline-block gap*/
font-size: 0;
}
.row>div {
display: inline-block;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
option with display:table-[cell]
.row {
display: table;
width: 100%
}
.row>div {
display: table-cell;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
The table-cell option actually doesn't work in some internet explorer versions. But the same result can be achieved with the property float:
#left-bar{
width:10%;
background-color: #FF0000;
}
#middle-bar{
width:70%;
background-color: #6600FF;
}
#right-bar{
width:20%;
background-color: #99FF99;
}
.row > div {float:left;}
<div class="row">
<div id="left-bar">a</div>
<div id="middle-bar">b</div>
<div id="right-bar">c</div>
</div>
#left-bar{
width:10%;
background-color: #FF0000;
float:left;
}
#middle-bar{
width:70%;
background-color: #6600FF;
float:left;
}
#right-bar{
width:20%;
background-color: #99FF99;
float:left;
}
If that doesn't work, please provide more html and css because the problem will be somewhere else. Also, verify that you have heights set for your divs.
I'm trying to put 3 divs in the same row as the following code.
My CSS and HTML:
.row {
display: table;
width: 100%
}
.row > div {
display: table-cell;
height:30px; /*demo purposes */
}
#left-bar {
width: 10%;
background-color: #FF0000;
}
#middle-bar {
width: 70%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"> here I have an accordion </div>
<div id="middle-bar"> heve a have my canvas </div>
<div id="right-bar"> and here I have an editor</div>
</div>
Somehow the content of the middle-bar(my canvas) is positioned in the correct place, but the other two divs contents are in the bottom of the page as you can see here see photo. Do you guys know why this is happening?
After discussing the project further with you in the comments, and in chat, I think you should take an approach that uses flexbox instead. The code is fairly straight forward:
.container {
display: flex;
}
.left { flex-basis: 10%; background: #F99; }
.right { flex-basis: 20%; background: #99F; }
.middle { flex-basis: 70%; background: #9F9; }
<div class="container">
<div class="left">L</div>
<div class="middle">C</div>
<div class="right">R</div>
</div>
I only managed width.
There's nothing problematic see this.
.row {
display: table;
width: 100%
}
.row > div {
display: table-cell;
height:30px; /*demo purposes */
}
#left-bar {
width: 20%;
background-color: #FF0000;
}
#middle-bar {
width: 60%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"> here I have an accordion </div>
<div id="middle-bar"> heve a have my canvas </div>
<div id="right-bar"> and here I have an editor</div>
</div>