I am trying to align my images in the web page's gallery vertically so all the bottoms match up on one line? I am using magnific popup. How can I do this? Currently they are centered vertically like so:
If you are looking for help with HTML and CSS you should post what you have tried so far or something else otherwise. In any case I'm going to assume you want a HTML/CSS based answer and make a suggestion to use flex box layout like so:
.parent {
display: flex;
align-content: flex-end;
align-items: baseline;
}
.red {
height: 100px;
width: 50px;
background: red;
}
.blue {
height: 200px;
width:200px;
background: blue;
}
.green {
height: 50px;
width: 80px;
background: green;
}
<div class="parent">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
Flexbox isn't supported in IE9 or earlier so be careful about that.
Alternatively, you could add display: inline-block and vertical-align: bottom to the images (divs in the example)
.parent > div {
display: inline-block;
vertical-align: bottom;
}
.red {
height: 100px;
width: 50px;
background: red;
}
.blue {
height: 200px;
width:200px;
background: blue;
}
.green {
height: 50px;
width: 80px;
background: green;
}
<div class="parent">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
Related
I have to create a layout which looks like:
I've prepared code like:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
justify-self: end;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>
But this blue div don't want to align to the right side:
Here you can a have a preview of that:
https://jsfiddle.net/ncszob80/17/
I know that I can fix it with margin-left: auto css style for blue div.
But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
So:
we can use only flex functionalities
there needs to be some margin between red div and yellow one
blue div needs to be at the very right
How to achieve that?
You wrote:
I know that I can fix it with margin-left: auto css style for blue div. But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
Actually, margin-left: auto is flex functionality. It's a feature of flex layout.
From the flexbox specification:
ยง 8.1. Aligning with auto
margins
Also see:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In summary, just use the auto margin. It's the cleanest, simplest and most efficient solution.
My best solution for you would be to change your DOM structure a little bit - but it accomplishes what you're looking for:
.left {
display: flex;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
justify-content: space-between;
}
<div class="wrapper">
<div class="left">
<div class="red"> </div>
<div class="yellow"> </div>
</div>
<div class="right">
<div class="blue"> </div>
</div>
</div>
Basically, I wrapped your boxes in .left and .right, and then changed the .wrapper to justify-content: space-between so that the .right box is shoved to the right. Then, we make .left { display: flex; } to fix the issue with those boxes stacking without doing this, or changing the elements inside to display: inline; or display: inline-block;.
You can use nested flex boxes. Make the flex wrapper for your blue item and justify that to the end:
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blueWrap {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-end;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}
<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blueWrap">
<div class="blue"></div>
</div>
</div>
Aside from changing your DOM structure or using the margin-left: auto fix CSS Grid is fantastic for this type of layout. I know you said only Flexbox but if you don't want any of the other solutions Grid might be a nice alternative. You can mix Flex functionality within the grid as well for finer control. I do this regularly to achieve the layout I'm in need of and it works well!
Happy coding!
Here is another idea if you don't want to consider margin:auto and without changing your html but like said in the accepted answer, margin is a feature of flexbox:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
order:1; /*make the blue the last element*/
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.wrapper:after {
content:"";
flex-grow:1; /*make this hidden element to take all the space and push the blue*/
}
<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>
I would like to create the following responsive grid structure, taking in mind that element 3 and 5 are not always present and they have variable height.:
grid image
I've tried with floating elements, but element 2 get's into the second column:
https://jsfiddle.net/a2tbbs2b/2/
CSS:
.panel{
background: white;
box-sizing: border-box;
overflow: auto;
}
.panel::after {
content: "";
clear: both;
display: table;
}
.section{
width: 60%;
float: right;
text-align: center;
}
.section.left{
float: left;
width: 40%;
}
.one{
background: green;
height: 80px;
}
.two{
background: blue;
height: 70px;
}
.three{
background: red;
height: 20px;
}
.four{
background: brown;
height: 20px;
}
.five{
background: yellow;
height: 50px;
}
HTML:
<div class="panel">
<div class="section three">3</div>
<div class="section left one">1</div>
<div class="section four">4</div>
<div class="section left two">2</div>
<div class="section five">5</div>
</div>
I'm trying not to duplicate HTML to create this layout.
Any help is welcome. Thank you for your time!
#main {
width: 98vw;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
#main div{ margin:5px;}
.flex-1{flex:1;}
.flex-2{flex:2;}
.flex-3{flex:3;}
<div id="main">
<div class='flex-2' style="background-color:coral;">RED</div>
<div class='flex-3' style="background-color:lightblue;">BLUE</div>
<div class='flex-1'></div>
<div class='flex-1' style="background-color:lightgreen;">Green div with more content.
</div>
you can add the content in their specific containers .I am unable to understand your numbering scheme , but you can add content likewise.
Read More
Consider the following HTML structure,
<div class='floated' id='div1'></div>
<div class='floated' id='div2'></div>
<div class='floated' id='div3'></div>
with the following CSS:
.floated {
width: 50%;
float: left;
}
#div1 {
height: 300px;
background-color:red;
}
#div2 {
height: 30px;
background-color: green;
}
#div3 {
height: 30px;
background-color: yellow;
}
This way, #div1 will take up a 300px tall part of the left side of the page, while #div2 and #div3 will get floated to the right side of the page. How could I set up my CSS, so #div1 and #div2 takes up a single row(of height 300px, the maximum height of the two), and #div3 will be placed right below #div1?
I am not controling the height of these divs, this is dynamic, it is possible that sometimes the first one will be only 20 pixels, and the second one will be 1000 pixels, and the other way around is also a possibility
Here's a fiddle: https://jsfiddle.net/1u55fukj/
You can use Flexbox on parent element (body in this case) and use flex-wrap: wrap. This will always make both div's in same row equal height or equal to height of taller one DEMO
body {
display: flex;
flex-wrap: wrap;
}
.floated {
flex: 0 0 50%;
}
#div1 {
height: 300px;
background-color: red;
}
#div2 {
background-color: green;
}
#div3 {
height: 30px;
background-color: yellow;
}
<div class='floated' id='div1'></div>
<div class='floated' id='div2'></div>
<div class='floated' id='div3'></div>
If there will be only 2 divs in row, then you can try to give clear:left to odd child.
.floated {
width: 50%;
float: left;
}
#div1 {
height: 300px;
background-color: red;
}
#div2 {
height: 30px;
background-color: green;
}
#div3 {
height: 30px;
background-color: yellow;
}
div.floated:nth-child(odd) {
clear: left
}
<div class='floated' id='div1'>
</div>
<div class='floated' id='div2'>
</div>
<div class='floated' id='div3'>
</div>
flexbox is your best option i think.
you could use a div container and then use display flex
.container{
height: 500px;
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.floated {
width: 50%;
}
#div1 {
height: 30%;
background-color:red;
}
#div2 {
height: 60%;
background-color: green;
}
#div3 {
height: 40%;
background-color: yellow;
}
<div class="container">
<div class="floated" id="div1"></div>
<div class="floated" id="div2"></div>
<div class="floated" id="div3"></div>
</div>
you can also center the 3rd div and a lot more :D. Flexbox have a good crossbrowsing support using -moz-, -webkit- etc,
I am a new learner in web designing and practicing websites. I want to align 2 divs in one line without using float. I have a parent div with width 1400px. I want 2 child divs of width 600px each to align next to each other and have equal margin from both sides. Below is my code. Please suggest.
Also, what changes does float make to DOM? I observed that if I use float I need to specify the height as well? Is it the case or I was making some mistake in understanding the role of float?
<html>
<head>
<title>
My Page
</title>
</head>
<body>
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
</body>
</html>
.main{
width:1400px;
background-color:#c3c3c3;
position: relative;
display: inline-block;
}
.child1{
background-color:#666;
width: 600px;
margin:auto;
}
.child2{
background-color:#888;
width : 600px;
margin:auto;
}
you can do like this.
.main {
width: 1400px;
background-color: #c3c3c3;
position: relative;
text-align: center;
}
.child1 {
background-color: #666;
width: 600px;
margin: auto;
display: inline-block;
}
.child2 {
background-color: #888;
width: 600px;
margin: auto;
display: inline-block;
}
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
Or you can Improve you css to this.
.main {
width: 1400px;
background-color: #c3c3c3;
position: relative;
text-align: center;
}
.main div {
display: inline-block;
width: 600px;
margin: auto;
}
.main div.child1 {
background-color: #666;
}
.main div.child2 {
background-color: #888;
}
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
You can use flexbox like this:
.main {
display: flex;
justify-content: space-between;
}
Can be done with:
.main div { display: inline-block; }
Expect a whitespace between the divs.
This should do the trick (at least roughly):
.main{
width:1400px;
background-color:#c3c3c3;
position: relative;
display: table-row;
}
.child1{
background-color:#666;
width: 600px;
margin:auto;
display: table-cell;
}
.child2{
background-color:#888;
width : 600px;
margin:auto;
display: table-cell;
}
Float is really intended to put a picture (or a similar element) on one side of the page and have the text flow around it. It's often "abused" to pack elements next to each other horizontally, but that creates its own problems.
A lot of the answers you've been given are good, and people have been doing this since CSS became a thing. Another way you can do it, and really whichever method you'd like depends solely on your circumstances is by using position:relative on the parent wrapper, and position:absolute any the child elements.
.wrapper {
border: 1px solid red;
min-height: 50vh;
min-width: 100vw;
position: relative;
}
.wrapper > div {
position: absolute;
}
.wrapper .first {
top: 0;
left: 0;
width: 48vw;
border:1px dotted green;
height:100%;
}
.wrapper .second {
top: 0;
right: 0;
width: 48vw;
border:1px dashed orange;
height:100%;
}
<div class="wrapper">
<div class="first">
This is content number 1
</div>
<div class="second">
This is content number two.
</div>
</div>
Another way is by setting the container div to display as a row, and then have the two child elements be displayed as table cells. Tables were kind of the old-go-to back before CSS became extensive (can you believe there was a time before border-radius?)
.wrapper {
display: table-row;
background-color: red;
width: 100%;
height: 50vh;
}
.wrapper > div {
display: table-cell;
width: 48%;
}
.first {
border: 1px solid orange;
}
.second {
border: 1px dotted green;
}
<div class="wrapper">
<div class="first">
First Child
</div>
<div class="second">
Second Child
</div>
</div>
Really there's a bunch, you just need to figure out which one works best for you.
So I'm trying to accomplish the following:
I've got a fullwidth/set-height toolbar along top, with flex-grow: 0 and a second container below with flex-grow: 1. This seems to work until I throw in the two scrollable containers that stick to the right of the application.
I can't seem to get the two "Scrollable" areas to do something similar to height: 50%; overflow: hidden; overflow-y: scroll.
Any ideas on how to accomplish this layout with Flexbox?
Here is an example
JS Fiddle
And here is the example of html and css
HTML
<div class="wrapper">
<header> This is my header</header>
<div class="boxMain">main</div>
<div class="side">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
</div>
</div>
CSS
header {
min-height: 40px;
background: pink;
}
.wrapper {
width: 100%;
background: black;
}
.side {
width: 30%;
height: 375px;
float: right;
}
.boxMain {
width: 70%;
height: 300px;
background: red;
display: inline-block;
}
.box1 {
width: 100%;
background: yellow;
height: 40%;
}
.box2 {
width: 100%;
background: blue;
height: 40%;
}
And a picture for reference