Basically, i would like to align these items in the middle. It's three items that i want to align in the middle, vertically. I've tried vertical align: middle, but it didn't work.. I don't prefer position:absolute tho.
HTML
` <div class="info">
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
</div>
CSS
.info{
width:100%;
height:50vw;
background-color: #FFAE00;
margin-top:0;
display: flex;
text-align: center;
}
.box h5{
font-size: 2vw;
}
.box{
width:25%;
height:100%;
display: inline-block;
margin-top:3vw;
}
.box img{
width:7vw;
height:7vw;
}
.box p{
font-size: 6vw;
}
FIDDLE: https://jsfiddle.net/5Lstx44y/
I made a few changes to your CSS, this is using the table/table-cell pattern. It's pretty cool cause it will work with any size content without hacking it with margins/padding. You can adjust <.info>'s height to see what I mean.
Here is the updated version: https://jsfiddle.net/x5rdLgv2/
Main differences are:
.box {
display: table;
}
.cont {
display: table-cell;
vertical-align: middle;
}
I also removed some of your hacked margins!
Change css style for box to
.box {
width: 25%;
height: 100%;
display: inline-block;
vertical-align: middle;
padding-top: 25%; //Increase or Decrease as your need.
}
Use flex-direction:column
for more example use this link
.info{
width:100%;
height:100vh
background-color: #FFAE00;
margin-top:0;
display: flex;
text-align: center;
flex-direction:column;
}
.box h5{
font-size: 2vw;
}
.box{
margin-top:3vw;
}
.box img{
width:7vw;
height:7vw;
}
.box p{
font-size: 6vw;
}
<div class="info">
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
<div class="box">
<div class="cont">
<img src="http://lorempixel.com/400/200/sports/1/">
<h5>lorem lorem</h5>
<p>88</p>
</div>
</div>
</div>
Related
I'm building a website, and I'm trying to get a div element to stick to the right side of the page.
However, when my other divs, that contain blog post data/images scroll over to the next page, the div gets entered down.
How do I prevent the right side column from being entered down, while still allowing my blog post entries to scroll over?
Here is my code, what's relevant anyways. I'm sorry if this is a beginner question (it really is). I appreciate all the help I can get.
Thanks.
.column {
float:left;
}
.column.main {
width:70%;
min-height:1px;
}
.column.side {
width:20%;
min-height:1px;
}
.column.left {
width:10%;
background-color:012C40;
height:85%;
min-width:1px;
}
.column.right {
width:10%;
background-color:012C40;
height:85%;
float:right;
min-height:1px;
}
.postAd {
width:19%;
height:32%;
float:left;
background-color:DAEBF2;
text-align:center;
display:inline-block;
margin:.5%;
overflow: auto;
}
.postAd img {
width:80%;
height:80%;*/
}
<div class="column left">
</div>
<!--middle content-->
<div class="postAd">
<img src="images/Sunset.JPG" alt="sunset">
<p>Text here!</p>
</div>
<div class="postAd">
<img src="images/Sunset.JPG" alt="sunset">
<p>Text here!</p>
</div>
<div class="postAd">
<img src="images/Sunset.JPG" alt="sunset">
<p>Text here!</p>
</div>
<div class="postAd">
<img src="images/Sunset.JPG" alt="sunset">
<p>Text here!</p>
</div>
<div class="postAd">
</div>
<!--right side content-->
<div class="column right">
</div>
First of all, thanks for all of the proposed solutions! However, I've tried each one, and I'm running into problems. I have a navigation bar on top of my website, and each one overwrites that bar. When I try to make adaptations, I get the same problem as before. How do I implement these without completely destroying the layout of my website?
Again, huge thanks to everyone that responded.
You can use flex positioning like below
.parent
{
display:flex;
}
.right
{
flex:1; /*which is equal to 1 portion of width */
}
.left
{
flex:1; /*which is equal to 1 portion of width */
}
.center
{
flex:8; /*which is equal to 8 portion of width */
}
I suggest you to watch this video on youtube .
There are many different methods. One of the simpler ones is to use:
display:table-cell
I added a middle column for the example.
.column {
display:table-cell;
vertical-align:top;
}
.column.left {
width:10%;
background-color:#012C40;
color:#ffffff;
}
.column.right {
width:10%;
background-color:#012C40;
color:#ffffff;
}
.postAd {
min-width:23.5%;
height:32%;
background-color:#DAEBF2;
text-align:center;
display:inline-block;
margin:0.5%;
overflow: auto;
}
.postAd img {
width:80%;
height:80%;
}
<div class="column left">
[column left]
</div><!-- .column.left -->
<div class="column middle">
<div class="postAd">
[image]
<p>Text here!</p>
</div>
<div class="postAd">
[image]
<p>Text here!</p>
</div>
<div class="postAd">
[image]
<p>Text here!</p>
</div>
<div class="postAd">
[image]
<p>Text here!</p>
</div>
<div class="postAd">
[image]
<p>Text here!</p>
</div>
</div><!-- .column.middle -->
<div class="column right">
[column right]
</div><!-- .column.right -->
I think this what you are looking to do
The right-left columns should be position:fixed then I just put width:150px then for the right column width:150px and I set up for the middle content margin-left: 150px and margin-right: 150px; that's all
and I used for items in the middle content to show flex-warp
this code:
flex-wrap: wrap;
padding: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
align-items: left;
justify-content: left;
Here's the code:
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
html {
height: 100%;
}
.column-left {
height: 100%;
width: 15%;
position: fixed;
z-index: 999;
top: 0;
left: 0;
background-color: #d6c4ff;
overflow-x: hidden;
padding-top: 60px;
}
.column-right {
height: 100%;
width: 15%;
position: fixed;
z-index: 999;
top: 0;
right: 0;
background-color: #d6c4ff;
overflow-x: hidden;
padding-top: 60px;
}
.middle-content{
margin-left: 17%;
margin-right: 17%;
height: 100%;
padding: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-wrap: wrap;
align-items: left;
justify-content: left;
}
.postAd {
width:19%;
height:32%;
float:left;
background-color:#DAEBF2;
text-align:center;
display:inline-block;
margin:.5%;
overflow: auto;
}
.postAd img {
width:80%;
height:80%;*/
}
</style>
</head>
<body>
<!--left side content-->
<div class="column-left">
</div>
<!--middle content-->
<div class="middle-content">
<div class="postAd">
<img src="images/Sunset.JPG" alt="sunset">
<p>Text here!</p>
</div>
<div class="postAd">
<img src="images/Sunset.JPG" alt="sunset">
<p>Text here!</p>
</div>
<div class="postAd">
<img src="images/Sunset.JPG" alt="sunset">
<p>Text here!</p>
</div>
<div class="postAd">
<img src="images/Sunset.JPG" alt="sunset">
<p>Text here!</p>
</div>
<div class="postAd">
<img src="images/Sunset.JPG" alt="sunset">
<p>New here!</p>
</div>
<div class="postAd">
<img src="images/Sunset.JPG" alt="sunset">
<p>New here!</p>
</div>
</div>
<!--right side content-->
<div class="column-right">
</div>
</body>
</html>
You should use position: fixed; on the right div.
I would like to create a layout with divs with different height.
Example image:
I would like even that div can change the height based on the content.
In my code, I put a fixed height for the div so I want to modify it but I don't know how.
This is my code:
HTML
<div>
<div class="g-block-1">
<div class="block1"></div> <div class="block2"></div>
</div>
<div class="g-block-2">
<div class="block3"></div>
<div class="block4"></div>
<div class="block5"></div>
</div>
</div>
CSS
.block1 {
width: 100%;
height: 500px;
background-color: red;
}
.block2 {
width: 100%;
height: 350px;
background-color: yellow;
}
.block3 {
width: 100%;
height: 100px;
background-color: blue;
}
.block4{
width: 100%;
height: 350px;
color: black;
}
.block5 {
width: 100%;
height: 400px;
color: pink;
}
.g-block-1 {
width: 50%;
float: left;
}
.g-block-2 {
width: 50%;
float: right;
}
Something like this?
https://jsfiddle.net/scorpio777/wwwLmvfu/
<style>
pre {margin:0 padding:0;}
.block1 {
width: 100%;
height: 100%;
border:1px solid;
border-color:red;
margin:0;
padding:0;
}
.block2 {
width: 100%;
height: 100%;
border:1px solid;
border-color:orange;
margin:0;
padding:0;
}
.block3 {
width: 100%;
height: 100%;
border:1px solid;
border-color:blue;
margin:0;
padding:0;
}
.block4{
width: 100%;
height: 100%;
border:1px solid;
border-color:green;
margin:0;
padding:0;
}
.block5 {
width: 100%;
height: 100%;
border:1px solid;
border-color:pink;
margin:0;
padding:0;
}
.g-block-1 {
width: 50%;
height:100%;
float: left;
display:inline-block;
margin:0;
padding:0;
}
.g-block-2 {
width: 50%;
float: right;
height:100%;
display:inline-block;
margin:0;
padding:0;
}
}
</style>
<div>
<div class="g-block-1">
<div class="block1">
<pre>
some content
some content
some content
some content
some content
some content
some content
some content
</pre>
</div>
<div class="block2">
<pre>
some content
some content
some content
some content
some content
some content
some content
some content
some content
some content
</pre>
</div>
</div>
<div class="g-block-2">
<div class="block3">
<pre>
some content
some content
some content
some content
some content
</pre>
</div>
<div class="block4">
<pre>
some content
some content
some content
some content
some content
</pre>
</div>
<div class="block5">
<pre>
some content
some content
some content
some content
some content
</pre>
</div>
</div>
</div>
You can try this responsive solution:
* {box-sizing: border-box}
body {margin: 0}
#container {
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
.items {
column-count: 3;
column-gap: 10px;
}
.item {
margin-bottom: 10px;
page-break-inside: avoid;
break-inside: avoid-column;
}
img {
display: block;
max-width: 100%;
}
#media (max-width: 1220px) {
.items {padding: 0 10px}
}
#media (max-width: 990px) {
.items {column-count: 2}
}
#media (max-width: 500px) {
.items {column-count: 1}
}
<div id="container">
<section class="items">
<div class="item">
<img src="http://www.nowphuket.com/wp-content/uploads/2014/09/layan-beach-550x400.jpg" alt="">
</div>
<div class="item">
<img src="https://www.globotreks.com/wp-content/uploads/2017/06/Redding-Nature-600x450.jpg" alt="">
</div>
<div class="item">
<img src="http://liveinlosgatosblog.com/wp-content/uploads/2015/08/Shannon-Valley-Ranch-open-space-trail-650x500.jpg" alt="">
</div>
<div class="item">
<img src="http://www.9corerealty.com/wp-content/uploads/2016/03/Collier-County-4-700x550.jpg" alt="">
</div>
<div class="item">
<img src="http://webbox.imgix.net/images/aisrvqxbdirtzdby/c141a47e-bdd2-4687-a795-61141548c195.jpg?auto=enhance,compress&fit=crop&w=750&h=600" alt="">
</div>
<div class="item">
<img src="http://colonialbrickandstone.com/colonialwp/media/manitoulin-island-view-800x650.jpg" alt="">
</div>
<div class="item">
<img src="http://all-that-is-interesting.com/wordpress/wp-content/uploads/2013/08/secret-gardens-kirstenbosch-2.jpg" alt="">
</div>
<div class="item">
<img src="http://www.thinkslovenia.com/upload/area_guides/south_top_10/kolpa.jpg" alt="">
</div>
<div class="item">
<img src="https://www.viaventure.com/wp-content/uploads/450x300-Lamanai03.jpg" alt="">
</div>
<div class="item">
<img src="http://webbox.imgix.net/images/aisrvqxbdirtzdby/c141a47e-bdd2-4687-a795-61141548c195.jpg?auto=enhance,compress&fit=crop&w=750&h=600" alt="">
</div>
<div class="item">
<img src="http://colonialbrickandstone.com/colonialwp/media/manitoulin-island-view-800x650.jpg" alt="">
</div>
<div class="item">
<img src="http://all-that-is-interesting.com/wordpress/wp-content/uploads/2013/08/secret-gardens-kirstenbosch-2.jpg" alt="">
</div>
<div class="item">
<img src="http://www.thinkslovenia.com/upload/area_guides/south_top_10/kolpa.jpg" alt="">
</div>
<div class="item">
<img src="https://www.viaventure.com/wp-content/uploads/450x300-Lamanai03.jpg" alt="">
</div>
<div class="item">
<img src="https://www.fredericanaturereserve.com/wp-content/uploads/2016/08/500x350-px-F1-10.jpg" alt="">
</div>
<div class="item">
<img src="http://www.nowphuket.com/wp-content/uploads/2014/09/layan-beach-550x400.jpg" alt="">
</div>
<div class="item">
<img src="https://www.globotreks.com/wp-content/uploads/2017/06/Redding-Nature-600x450.jpg" alt="">
</div>
<div class="item">
<img src="http://liveinlosgatosblog.com/wp-content/uploads/2015/08/Shannon-Valley-Ranch-open-space-trail-650x500.jpg" alt="">
</div>
<div class="item">
<img src="http://www.9corerealty.com/wp-content/uploads/2016/03/Collier-County-4-700x550.jpg" alt="">
</div>
</section>
</div>
Ok so my project requires my divs to be floated because I would like to place text neatly to the side of them. I can get my divs to float left and right as needed, but as you see from the snippet(even though it's not what you'd get from a browser since the dimensions are off), the two divs at the bottom I need to be near the top in order to make a perfect scquare with the two left-floated divs. Below is what I'm looking for:
.clear {
clear: both;
}
#centerbar {
width: 100%;
height: calc(100vh - 150px);
background-color: black;
float: left;
}
#centerbar h1 {
text-align: center;
color: white;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: courier;
font-size: 19px;
color: white;
}
#container {
min-height: 100%;
margin-bottom: -150px;
width: 100%;
}
#container:after {
content: "";
display: block;
}
#content {
display: flex;
margin: 0 auto;
width: 800px;
flex-wrap: wrap;
justify-content: center;
}
.box {
height: 200px;
}
.fltlt {
float: left;
margin-right: 50px;
}
.fltrt {
float: right;
margin-right: 50px;
}
<div class="container">
<div id="nav">
<ul>
<li>Home
</li>
<li>Works
</li>
<li>About
</li>
</ul>
</div>
<div class="clear"></div>
<div id="centerbar">
<h1>Sample Layout</h1>
<div class="box">
<img src="gold.jpg" alt="The Color Gold" class="fltlt">
<p>This is some sample text</p>
</div>
<div class="clear"></div>
<div class="box">
<img src="grey.jpg" alt="The Color Grey" class="fltlt">
<p>This is some sample text</p>
</div>
<div class="box">
<img src="orange.jpg" alt="The Color Orange" class="fltrt">
<p>This is some sample text</p>
</div>
<div class="box">
<img src="red.png" alt="The Color Red" class="fltrt">
<p>This is some sample text</p>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum</div>
</div>
</div>
I recommend to not use float for layout, and since you started out with flex, use it all the way.
Bonus: A clean, simple and readable structure of both CSS and markup.
.container .row {
display: flex;
flex-wrap: wrap;
}
.row .box {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.box img {
width: 100px;
margin-right: 10px;
}
<div class="container">
<div class="row">
<div class="box">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="">
<p>Some paragraph here</p>
</div>
<div class="box">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="">
<p>Some paragraph here</p>
</div>
<div class="box">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="">
<p>Some paragraph here</p>
</div>
<div class="box">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="">
<p>Some paragraph here</p>
</div>
</div>
</div>
Here is what you are looking for(I made it from the start):
.box {
float: left;
position: relative;
width: 50%;
margin-bottom: 10px;
}
.container .flex {
display: flex;
align-items: center;
}
.container p {
margin-left: 5px;
}
<div class="container">
<div class="row">
<div class="box">
<div class="flex">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="" width="100">
<p>Some paragraph here</p>
</div>
</div>
<div class="box">
<div class="flex">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="" width="100">
<p>Some paragraph here</p>
</div>
</div>
<div class="box">
<div class="flex">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="" width="100">
<p>Some paragraph here</p>
</div>
</div>
<div class="box">
<div class="flex">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="" width="100">
<p>Some paragraph here</p>
</div>
</div>
</div>
</div>
Right now I have this:
But I need something like this:
HTML
<div id="content">
<div class="block" style="height:600px;">
</div>
<div class="block" style="height:500px;">
</div>
<div class="block" style="height:500px;">
</div>
...
</div>
CSS
.block
{
width:350px;
background-color:white;
border-radius:5px;
margin-right:80px;
margin-bottom:80px;
display:inline-block;
}
#content
{
position:relative;
display:inline;
overflow:auto;
}
I tried using columns but that didn't work well, it showed one column only even though the column count was higher than 1.
Here is my solution:
HTML:
<div class="grid-container">
<div class="third">
<div class="grid grid1">
<p>Grid 1</p>
</div>
<div class="grid grid2">
<p>Grid 2</p>
</div>
</div>
<div class="third">
<div class="grid grid3">
<p>Grid 3</p>
</div>
<div class="grid grid4">
<p>Grid 4</p>
</div>
</div>
<div class="third">
<div class="grid grid5">
<p>Grid 5</p>
</div>
<div class="grid grid6">
<p>Grid 6</p>
</div>
</div>
</div>
CSS:
.grid-container {
width: 100%;
text-align: center;
margin-top: 15px;
}
.third {
display: inline-table;
width: 30%;
}
.grid {
border: 1px solid black;
margin: 10px 0;
}
.grid1 {
height: 200px;
}
.grid2 {
height: 100px;
}
.grid3 {
height: 100px;
}
.grid4 {
height: 350px;
}
.grid5 {
height: 200px;
}
.grid6 {
height: 200px;
}
Now i have used lots of css classes here (grid1, grid2 ...), they normally dont have to be used, just set height: auto so it takes the height needed to show all content.
Working example can be found here:
http://cssdeck.com/labs/full/nuauntmo
Depending on what you are trying to achieve, you could put the vertically stacked blocks in separate containers. Something like this:
HTML:
<div id="content">
<div class="col">
<div class="block" style="height:600px;">
</div>
<div class="block" style="height:500px;">
</div>
</div>
<div class="col">
<div class="block" style="height:500px;">
</div>
<div class="block" style="height:500px;">
</div>
</div>
...
CSS:
.col {
display: inline-block;
margin-right:80px;
vertical-align: top;
}
.block {
width:350px;
background-color:#ccc;
border-radius:5px;
margin-bottom:80px;
display:block;
vertical-align: top;
}
#content {
position:relative;
display:inline;
overflow:auto;
}
The columns will wrap if there is not enough horizontal space though, so the container would have to have a fixed width.
try adding vertical-align property in css.
.block
{
width:350px;
background-color:grey;
border-radius:5px;
margin-right:80px;
margin-bottom:80px;
display:inline-block;
vertical-align: top;
}
I have the following HTML:
<p>messy</p>
<div class="row">
<div class="cell">
<div class="one wrapper">1</div>
</div>
<div class="cell">
<div class="two wrapper">2</div>
</div>
<div class="cell">
<div class="three wrapper">
<div class="foo">3</div>
</div>
</div>
</div>
<p>good</p>
<div class="row">
<div class="cell">
<div class="one wrapper">1</div>
</div>
<div class="cell">
<div class="two wrapper">2</div>
</div>
<div class="cell">
<div class="three wrapper">3</div>
</div>
</div>
With this CSS:
.row {
display: table;
table-layout: fixed;
overflow: hidden;
background-color:blue;
width:100%;
}
.cell {
display: table-cell;
overflow: hidden;
padding: 0;
}
.wrapper {
overflow: hidden;
position: relative;
padding:0;
display: block;
height:42px;
background-color:red;
}
.one {
width:100px;
}
.two {
width:40px;
}
.three {
width:100px;
}
.foo {
padding: 10px;
}
You can see the fiddle here.
Why is three messing up the layout in case a child has a padding? I've read various articles about margin collapsing in the past, but I could'nt fix this layout using one of the techniques.
It's simple just add vertical-align: middle; in .cell Class.
jsFiddle