How can I align two div's with different classes together above another?
If I have the following code:
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
how can I align div1 and div3 next to each other? and above the div1? Is it possible only with html and css?
thanks in advance
Wrap them with a flexbox container, and change the order of the elements:
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
line-height: 40px;
text-align: center;
}
.div1 {
order: 1;
width: 50%;
background: red;
}
.div2 {
order: 3;
width: 100%;
background: blue;
}
.div3 {
order: 2;
width: 50%;
background: yellow;
}
<div class="container">
<div class="div1">
1
</div>
<div class="div2">
2
</div>
<div class="div3">
3
</div>
</div>
Can't you just place all the div's in a container that is 100% width and do a text-align: center?
Simple jFiddle for you.
.container {
width:100%;
text-align:center;
}
Related
How I can make responsive flexbox?
So I use flexbox and two divs, one for leftside and one for right side.
Screen is like splitted, left side is image and right side info and inputs.
But left side isn't responsive if ajax loads more data, then white space is coming under the image.
My HTML:
<div class="forny-container">
<div class="forny-inner">
<div class="forny-two-pane">
<div></div> <!-- form div -->
<div></div> <!-- image div -->
</div>
</div>
</div>
My CSS:
.fo-container {
display: block;
align-items: center;
height:100%;
}
.fo-inner {
display: block;
height: 100%;
width: 100%;
}
.fo-two-pane {
height: 100%;
display: flex;
flex-direction: row-reverse;
}
.fo-two-pane > div {
flex: 1;
}
.fo-two-pane > div:first-child {
display: flex;
align-items: center;
background: white;
}
.fo-two-pane > div:last-child {
background: url('http://getwallpapers.com/wallpaper/full/9/9/0/722477-best-barber-wallpapers-1920x1080-samsung-galaxy.jpg') center center no-repeat
hsla(31, 80%, 93%, 1);
display: none;
}
If ajax loads more data or error messages into form div then white space is coming under the image:
What is going wrong?
I guess this should solve your problem. Here the working code.
.flex-container {
display: flex;
}
.image-selector {
width: 50%;
}
.left {
flex: 1;
background: lightblue;
text-align: center;
}
.right {
flex: 1;
background: lightpink;
}
.right h1 {
text-align: center;
}
.content {
margin-left: 20px;
}
<div class="flex-container">
<div class="left">
<h1>Left</h1>
<img class="image-selector" src="https://agentpekka.com/wp-content/uploads/2018/11/AP_MVM_Apple_2x-640x854.jpg" alt="image">
</div>
<div class="right">
<h1>Right</h1>
<div class="content">
<h2>Heading</h2>
<h3>Subheading</h3>
<h4>Somecontent</h4>
<lable>Name:</lable>
<input type="text" placeholder="name">
<p>description goes here, some more content</p>
</div>
</div>
</div>
Click for Codepen link
Additionally, you will need to use Media Queries for handling different screen sizes and different view ports.
I have a flex container, and some divs inside of it. Each div has some content inside of it, that set the width of this div. between each of the divs, I want to put a responsive separator-div.
I've tried to give the max-width property for each of the responsive class in the code below, but it not rendering.
I cannot give the inner-wrapper's a fixed width, because it depends on the width of the inner{#}.
<div class='main'>
<div class='item-wrapper'>
<div class='inner1'></div>
<div class='responsive'></div>
</div>
<div class='item-wrapper'>
<div class='inner2'></div>
<div class='responsive'></div>
</div>
<div class='item-wrapper'>
<div class='inner3'></div>
<div class='responsive'></div>
</div>
</div>
.main{
width:100%;
display:flex;
height:40px;
background:yellow;
}
.responsive{
max-width:200px;
}
.item-wrapper{
display:flex;
height:100%;
background:green;
}
to summarize, i expect:
div1 -------------- div2 --------------- div3
such that only the width of the '------' will increase/decrease if i resizing my screen
You can do it like this by adding a rule to your flexbox container:
myContainer{
//other properties
justify-content:space-between;
}
You do need that much of markup
example
.main {
width: 100%;
display: flex;
height: 40px;
background: yellow;
justify-content: space-between;
/* new */
}
.responsive {
flex: 1;
/* new */
max-width: 200px;
margin: auto;
/* new */
border-top: dotted;
/* new */
}
.main>div:not([class]) {
background: green;
display: flex;
align-items: center;
/* new */
}
<div class='main'>
<div>inner 1</div>
<div class='responsive'></div>
<div>inner 2</div>
<div class='responsive'></div>
<div>inner 3</div>
</div>
If you have a only 3 elements, then 2 pseudos can become the seperator via order:
.main {
width: 100%;
display: flex;
height: 40px;
background: yellow;
justify-content: space-between;
}
.main::before,
.main::after {
content: '';
flex: 1;
max-width: 200px;
margin: auto;
border-top: dotted;
}
.main>div:not([class]) {
background: green;
display: flex;
align-items: center;
}
.main>div:first-child {
order: -1
}
.main>div:last-child {
order: 1
}
<div class='main'>
<div>inner 1</div>
<div>inner 2</div>
<div>inner 3</div>
</div>
more about flex : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have a vertically central adaptable scrollable flexbox element, which itself should have two columns (I solved this with two child-divs). The central flexbox should have a frame and a central divider line.
I can't get the central divider line to run all the way to the bottom of the scrollable flexbox. I tried it with a third child div element but the line only appears for the vertical extent of the flexbox.
How can I make two columns in a scrollable flexbox with a frame and central divider line running all the way to the bottom?
Thank you for your help.
Here is the example:
https://jsfiddle.net/soliman/0d0tn22x/2/
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="leftContent"> Column 1
With a lot of lines.
</div>
<div class="divider"></div>
<div class="rightContent"> Column 2
With fewer lines
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
background: black;
color: red;
}
.wrapper {
display: flex;
/* use the flex model */
height: 100%;
flex-direction: column;
}
.header {
margin: 1em 1em 0 1em;
}
.content {
flex: 1 1 auto;
display: flex;
overflow-y: auto;
position: relative;
min-height: 100px;
margin: 0 1em 0 1em;
border: 6px double red;
}
.content > div {
width: 50%;
padding: 3%;
}
.content > div:first-child {
margin-right: 10px;
}
.footer {
margin: 0 1em 1em 1em;
}
.divider {
position: absolute;
left: 50%;
top: 0%;
bottom: 0%;
border-left: 6px double red;
}
Try this mixed flexbox and CSS table layout. You can set the content area as a table, and the three columns as table cells, so they always be equal height.
There is one issue with the approach is - it only works properly if the content is taller than the container, otherwise the vertical line will stop in the middle. See the other approach at the bottom.
jsFiddle
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
overflow-y: auto;
min-height: 100px;
border: 1px solid;
}
.wrapContent {
display: table;
width: 100%;
}
.wrapContent > div {
display: table-cell;
}
.leftContent,
.rightContent {
width: 50%;
}
.divider {
border-left: 1px solid;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="wrapContent">
<div class="leftContent">
<div style="height:500px;">Left</div>
</div>
<div class="divider"></div>
<div class="rightContent">
<div style="height:auto;">Right</div>
</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
Another way would be using background image for the vertical line, set that to the center of the content container, with repeat-y, the image can be just a square dot. It works well even if the content is shorter than the container.
jsFiddle
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
overflow-y: auto;
min-height: 100px;
border: 1px solid;
background: url("http://i.imgur.com/oyQ4xsL.png") center top repeat-y;
background-size: 1px;
}
.leftContent,
.rightContent {
width: 50%;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="leftContent">
<div style="height:500px;">left</div>
</div>
<div class="rightContent">
<div style="height:auto;">right</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
How to center the text inside that box?
Here's how I want elements sorted out:
In a smaller screen, elements stack on top of each other, and the .text-box div, that contains the text I want to center, has a fixed height. For larger widths, the .text-box div should have a height igual to larger image's height minus shorter image's height
See the Fiddle here
HTML
<div id="wrapper">
<div class="box">
<img class="img-large" src="http://placekitten.com/900/800" alt=""/>
</div>
<div class="box">
<img src="http://placekitten.com/900/400" alt=""/>
</div>
<div class="box-text">
<div class="vcenter-outer">
<div class="vcenter-inner">
<p>center this text vertically</p>
</div>
</div>
</div>
</div>
CSS
#wrapper {
background: #ffeaea;
height: 100vh;
}
img {
width: 100%;
display: block;
}
.img-large {
height: 100vh;
width: auto;
}
.box {
position: relative;
width: 100%;
overflow: hidden;
}
.box-text {
text-align: center;
background: yellow;
height: 100%;
}
#media only screen and (min-width: 768px) {
.box {
float: left;
width: 50%;
}
}
.vcenter-outer {
background: yellow;
display: table;
}
.vcenter-inner {
background: lightblue;
display: table-cell;
vertical-align: middle;
}
Why does the .text-box div span through the whole wrapper?
Basicly You could use display:flex and float together
.trio {
height:100vh;
width:100vh;
}
.trio>div {
float:left;
display:flex;
align-items:center;
justify-content:center;
width:50vh;
height:50vh;
box-shadow:inset 0 0 0 2px;
}
.trio .first {
height:100vh;
}
<div class="trio">
<div class="first">
<p>Center</p>
</div>
<div class="next">
<p>Center</p>
</div>
<div class="next">
<p>Center</p>
</div>
</div>
display:table works too with an extra level of div inbricated as you did , same idea: float + vh
codepen to play with
I have 4 divs
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
and I need to align them in a "square" order:
I've tried to float-left only 2°div and 4°div, but it does not work.
Unfortunately I can't use
a container with a defined width and all divs left-floated
<div id="container" style="width: 250px">
<div id="first" style="float: left"></div>
<div id="second" style="float: left"></div>
<div id="third" style="float: left"></div>
<div id="fourth" style="float: left"></div>
</div>
or position absolute/relative left, top etc. in my actual project...
So I hope that there is some float trick to solve my problem..
<style>
.divSquare{
width:48%; height:200px; margin:4px; border:1px solid black; float: left
}
</style>
<div class="divSquare">1</div>
<div class="divSquare">2</div>
<div style='clear:both'></div>
<div class="divSquare">3</div>
<div class="divSquare">4</div>
I assume you can define the Height explicitly, and you CAN set a percentage Width.
The divSquare's Width is set to 48% (less than 50%) because the 4px margin and 1px border occupy room either.
JSFiddle to see this in action.
Have you tried using clear? Check this example:
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
div { height: 100px; float: left; width: 100px; }
#a { background: blue; }
#b { background: red; }
#c { background: green; clear: left; }
#d { background: black; }
http://jsfiddle.net/T5X9A/
I'm faking a square with the height: 0; & padding-bottom: 50% - but besides that - the floating part should be clear. Here is a jsFiddle too. I also didn't prefix the box-sizing... - you can google it. Good luck!
HTML
<div class="block one">1</div>
<div class="block two">2</div>
<div class="block three">3</div>
<div class="block four">4</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.block {
width: 50%;
float: left;
height: 0;
padding-bottom: 50%;
}
.one {
background: yellow;
}
.two {
background: lightblue;
}
.three {
background: orange;
}
.four {
background: red;
}
Does a simple clear float work? This HTML appears to do what you want:
<html>
<style>
div {
float: left;
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 8px;
}
#third {
clear: left;
}
</style>
<body>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
</body>
</html>
It really is based on the width of the four divs. The container has a width of 250px so if the first two divs are 125px in width then they'll fill up the first row pushing all the remain divs down. If the divs were all width: 50% that'll have the same effect. If the div's widths were anything less than 33.3333% then the at least three divs will pile up in the first row. Float left allows the boxes to go side by side until it hits the parent's width limit. What you can do is control the width by:
#container > div {
width: 50%;
}
Or you can clear the floats every third div.
#container > div:nth-of-type(3n + 3) {
clear: both;
}
http://jsfiddle.net/3ssKK/1/