I need the three div in the section to be centered - html

I need the three div in the section to be centered in the middle of the section; they are off too the left too far right now.
<section class="support-feat clearfix">
<div class="container-fluid">
<div class="row box">
<div class="block about-feature-1 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".3s">
<h2>
text, Lorem ipsum dolor
</h2>
<p>
sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque<br>sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque
</p>
</div>
<div class="block about-feature-2 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".5s">
<h2 class="item_title">
text, Lorem ipsum dolor
</h2>
<p>
sit amet, quam donec libero suspendisse vel, neque nunc vel,
donec massa turpis rutrum mauris, quam enim in dui sit
penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque<br>sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit
penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque<br>
penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque
</p>
</div>
<div class="block about-feature-3 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".7s">
<h2 class="item_title">
text, Lorem ipsum dolor
</h2>
<p>
sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque<br>
sit amet, quam donec libero suspendisse vel, neque nunc vel, donec massa turpis rutrum mauris, quam enim in dui sit penatibus ipsum, ut lacus lobortis. Vestibulum phasellus metus pellentesque
</p>
</div>
</div>
</div>
</section>
.support-feat {
text-align: center;
margin: 2%
}
.support-feat .block {
color: #1c1c1c;
flex: 2;
min-width: 340px;
max-width: 400px;
box-sizing: border-box;
}
.support-feat .block p {
font-weight: 300;
font-size: 140%
}
.support-feat h2 {
font-size: 200%
}
.support-feat .about-feature-1 {
padding: 20px;
background: #fff;
border: solid;
border-color: #17b6ea;
margin: 2%
}
.support-feat .about-feature-2 {
padding: 20px;
background: #fff;
border: solid;
border-color: #17b6ea;
margin: 2%
}
.support-feat .about-feature-3 {
padding: 20px;
background: #fff;
border: solid;
border-color: #17b6ea;
margin: 2%
}
Here's an image to explain what's going on and what I'm trying to do;
basically I'm trying to do what this does: https://www.tvlift.com/support/technical-support/

You can utilize bootstraps 12-column grid system to accomplish this... check out my jsfiddle below https://jsfiddle.net/gumctejp/
Basically you will format your page component to fit within the context of bootstraps grid system.
A really simple example would look like:
<div class="row text-center">
<div class="col-sm-3">
</div>
<div class="col-sm-2 box">
one box
</div>
<div class="col-sm-2 box">
two box
</div>
<div class="col-sm-2 box">
three box
</div>
<div class="col-sm-3">
</div>
</div>
See http://getbootstrap.com/css/ for the official documentation on boostraps grid system

As far as I understood, you wish to have centered floating items. This can be realized with some basic css:
HTML:
<div class="row">
<div class="col-xs-12 text-center">
<div class="floating-center">
Whatever content in here
</div>
</div>
</div>
Be sure to have all required elements in place when working with the bootstrap grid system (in your code, the column element was missing, leading to glitches sometimes).
CSS for the floating elements:
.text-center {
text-align: center;
}
.floating-center {
position: relative;
width: 500px;
height: auto;
margin: 5px; /*Whatever margin each element should have*/
display: inline-block; /*This is mainly doing the magic */
}
EDIT:
Added a plunker to show the effect: https://plnkr.co/edit/vGKHW8Pa1tw2RLlmj4BI?p=preview
Note: This is how to center the divs. Device dependant widths can be realized with css #media attribute.

Related

Image and text columns, grow image up to text column height

Is there any way in pure CSS to ensure that another one of the divisions in flex container never exceeds height of another division?
For situations, when images are high, I don't want them to make vertically centered text next to them be pushed down so far that reader scrolling down would see top of the image and empty column next to it, scroll down more and more, for text only to appear there.
What are your suggestions how to solve this issue with other means?
This is my attempt so far. This is to build a responsive layout for various situations, without knowing height of text or window width.
https://jsfiddle.net/Deele/khj9n42g/
.row {
display: flex;
align-items: stretch;
margin-top: 1rem;
}
.col {
flex: 1 0 0%;
flex-basis: 50%;
display: flex;
justify-content: center;
flex-direction: column;
padding: 1rem;
}
.container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.col_image {
text-align: center;
overflow: hidden;
}
figure {
height: 100%;
margin: 0;
}
figure img {
height: 100%;
width: auto;
}
/* for debug only */
.col_text {
background-color: rgba(255, 0, 0, 0.1)
}
.col_image {
background-color: rgba(0, 255, 0, 0.1)
}
<div class="container">
<div class="row">
<div class="col col_text">
<h3>This text is higher than image, image should scale up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat sapien a imperdiet congue. Vestibulum non nulla aliquam, varius massa euismod, faucibus lacus. Quisque scelerisque facilisis rutrum. Nulla eu eros efficitur, aliquam libero nec, suscipit dolor. Morbi eleifend luctus orci, id condimentum felis luctus in. Sed accumsan mi in leo varius venenatis. Morbi et venenatis ex.</p>
</div>
<div class="col col_image">
<figure><img src="https://via.placeholder.com/200x100" /></figure>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col col_text">
<h3>This text is longer than image, image should scale up</h3>
<h4>Image is wider than column, it should be cut off to fill height</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat sapien a imperdiet congue. Vestibulum non nulla aliquam, varius massa euismod, faucibus lacus. Quisque scelerisque facilisis rutrum. Nulla eu eros efficitur, aliquam libero nec, suscipit dolor. Morbi eleifend luctus orci, id condimentum felis luctus in. Sed accumsan mi in leo varius venenatis. Morbi et venenatis ex.</p>
</div>
<div class="col col_image">
<figure><img src="https://via.placeholder.com/500x100" /></figure>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col col_text">
<h3>This text is shorter than image, image should scale down</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat sapien a imperdiet congue. Vestibulum non nulla aliquam, varius massa euismod, faucibus lacus. Quisque scelerisque facilisis rutrum. Nulla eu eros efficitur, aliquam libero nec, suscipit dolor. Morbi eleifend luctus orci, id condimentum felis luctus in. Sed accumsan mi in leo varius venenatis. Morbi et venenatis ex.</p>
</div>
<div class="col col_image">
<figure><img src="https://via.placeholder.com/720x490" /></figure>
</div>
</div>
</div>
This looks more like an overall grid than a series of flexboxes.
We don't want the dimensions of the images to influence the height of each row so this snippet makes just one container which has the grid setting for columns, but leaves the height of the rows to be decided by content.
It puts the images in as backgrounds so their dimensions have no influence on the row height which is now determined solely by the text in the first column.
.container {
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.container>* {
background: cyan;
}
.col_image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
}
<div class="container">
<div class="col col_text">
<h3>This text is higher than image, image should scale up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat sapien a imperdiet congue. Vestibulum non nulla aliquam, varius massa euismod, faucibus lacus. Quisque scelerisque facilisis rutrum. Nulla eu eros efficitur, aliquam libero nec,
suscipit dolor. Morbi eleifend luctus orci, id condimentum felis luctus in. Sed accumsan mi in leo varius venenatis. Morbi et venenatis ex.</p>
</div>
<div class="col col_image" style="background-image: url(https://via.placeholder.com/200x100);" />
</div>
<div class="col col_text">
<h3>This text is longer than image, image should scale up</h3>
<h4>Image is wider than column, it should be cut off to fill height</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat sapien a imperdiet congue. Vestibulum non nulla aliquam, varius massa euismod, faucibus lacus. Quisque scelerisque facilisis rutrum. Nulla eu eros efficitur, aliquam libero nec,
suscipit dolor. Morbi eleifend luctus orci, id condimentum felis luctus in. Sed accumsan mi in leo varius venenatis. Morbi et venenatis ex.</p>
</div>
<div class="col col_image" style="background-image: url(https://via.placeholder.com/500x100);">
</div>
<div class="col col_text">
<h3>This text is shorter than image, image should scale down</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat sapien a imperdiet congue. Vestibulum non nulla aliquam, varius massa euismod, faucibus lacus. Quisque scelerisque facilisis rutrum. Nulla eu eros efficitur, aliquam libero nec,
suscipit dolor. Morbi eleifend luctus orci, id condimentum felis luctus in. Sed accumsan mi in leo varius venenatis. Morbi et venenatis ex.</p>
</div>
<div class="col col_image" style="background-image: url(https://via.placeholder.com/720x490);">
</div>
</div>
Note: obviously you will want to add any dimensions required for the overall container, padding etc. Also the snippet centers the images on the cells, by using position center and size cover. Alter this if you really do want the images to sit to the top/left and be cut off on the bottom/right.

Maintain same height in elements inside columns located side by side with CSS

I have a template like this:
I want to maintain the same height between each item of both columns, depending on the one that has the biggest height, but only when they are side by side. In smaller screens, when they have width: 100%, each div has its own height depending of its own content height.
It should look like this:
I think that what I want is something like display: table, but I need both columns to be responsive.
All the questions I´have found are about maintaining the same height in both columns, but I´m already using flexbox to achieve this.
Is it possible to achieve what I vant with css only?
EDIT: Added code snippet. I forgot to mention that it needs to be supported by Chrome 36 (Android L WebView).
This question´s first answer shows what I wanted to achieve, but display:subgrid is not supported by any version Chrome at present:
Align child elements of different blocks
.title {
background: #b6fac0;
}
.content {
background: #b6b6fa;
}
.footer {
background: #f7f5b5;
}
.col-50 {
border: 1px solid red;
}
<link href="http://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet" />
<ion-content>
<div class="row responsive-sm">
<div class="col-50">
<div class="padding title">
Veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery loooooooooooong title </div>
<div class="padding content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra
</div>
<div class="padding footer">
Footer
</div>
</div>
<div class="col-50">
<div class="padding title">
Title </div>
<div class="padding content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra. Phasellus tortor tortor, luctus
in dapibus sed, ultrices eget lorem. Morbi vehicula fermentum arcu, nec egestas augue. Fusce orci ex, sodales ut tellus sit amet, pretium pulvinar odio. Suspendisse potenti. Phasellus convallis metus sed erat rhoncus, eu tristique lacus fermentum.
</div>
<div class="padding footer">
Footer
</div>
</div>
</div>
</ion-content>
you may take a look at #supports to filter possible display:option or subgrid .
example with display:contents
.title {
background: #b6fac0;
}
.content {
background: #b6b6fa;
}
.footer {
background: #f7f5b5;
}
.col-50 {
border: 1px solid red;
}
#supports (display: contents) {
.row.responsive-sm {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1em;
}
.col-50 {
display: contents
}
.title {
grid-row: 1
}
.content {
grid-row: 2;
}
#media screen and (max-width:500px) {
/* set the break point to the right value */
.row.responsive-sm,
.col-50 {
display: block;
}
}
}
<link href="http://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet" />
<ion-content>
<div class="row responsive-sm">
<div class="col-50">
<div class="padding title">
Veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery loooooooooooong title </div>
<div class="padding content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra
</div>
<div class="padding footer">
Footer a
</div>
</div>
<div class="col-50">
<div class="padding title">
Title </div>
<div class="padding content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra. Phasellus tortor tortor, luctus
in dapibus sed, ultrices eget lorem. Morbi vehicula fermentum arcu, nec egestas augue. Fusce orci ex, sodales ut tellus sit amet, pretium pulvinar odio. Suspendisse potenti. Phasellus convallis metus sed erat rhoncus, eu tristique lacus fermentum.
</div>
<div class="padding footer">
Footer
</div>
</div>
</div>
</ion-content>
usefull for a fast check on supports on properties: https://caniuse.com/

Make divs same size as the biggest one inside the parent

So I have this div with 3 childs, but one of them has less text than the others, so the image and the button move, I want the position of the image not to be dependent of the size of the text, so it can stay in the same position as the biggest child image.
Parent position: relative; and child position: absolute; doesn't work, because the image and the button traslape
HTML:
<div id="child">
<h5>About us</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. .</p>
<img class="img-responsive" src="http://www.marijazaric.com/minimalism_responsive/images/picture1.jpg" alt=""/>
<button>Read More</button>
</div>
SASS:
.parent
display: flex
flex-wrap: wrap
justify-content: center
#child
border-style: solid
margin-left: 25px
margin-right: 25px
If you also declare each of the "child" elements as a flex container, you can get the layout you want.
This quick example assumes a parent element with three elements where "child" is a class value instead of an id value. In each "child" the p element is allowed to grow to take all of the available vertical space. The third "child" includes a half-height image to show how the img and button stay pinned to the bottom.
.parent {
display: flex;
flex-direction: row;
justify-content: center;
}
.child {
border: 1px solid #000;
display: flex;
flex-direction: column;
width: 30%;
margin: 1em;
padding: 1em;
}
.child h5 {
}
/* should probably be replaced with a class selector */
.child p {
flex-grow: 1;
}
.child img {
}
.child button {
}
<div class="parent">
<div class="child">
<h5>About us</h5>
<p> Maecenas aliquet enim ut mi lobortis, a faucibus orci interdum. Suspendisse potenti. Ut lobortis varius fringilla. Nunc nec urna metus. Ut vel ligula rhoncus nulla ultrices egestas ac ut arcu. Cras eu odio est. In quis bibendum arcu. </p>
<img src="http://placehold.it/326x290">
<button>Read More</button>
</div>
<div class="child">
<h5>Services</h5>
<p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut dui risus, placerat non lorem vitae, laoreet imperdiet mauris. Aenean eleifend augue vel purus tincidunt egestas. Morbi sagittis neque efficitur posuere fermentum. Fusce non lectus at enim sodales dapibus. Nam congue neque nunc, ut accumsan mauris ornare sit amet. Nulla quis quam ut urna ullamcorper commodo. Curabitur ac elit at urna molestie pulvinar id at nisi. Cras in quam at magna hendrerit fermentum. Vestibulum vel nulla aliquet, molestie ante eu, laoreet quam. </p>
<img src="http://placehold.it/326x290">
<button>Read More</button>
</div>
<div class="child">
<h5>Latest news</h5>
<p> Maecenas a dolor pretium, maximus mi eu, molestie ligula. Donec aliquam mollis eros at sodales. Pellentesque vitae dui feugiat, tempor eros eu, bibendum massa. Nulla accumsan finibus leo, et pellentesque urna vestibulum ut. Nullam arcu lectus, consectetur a varius sed, finibus nec metus. Morbi lorem nulla, maximus vitae mi in, efficitur elementum mi. Praesent sit amet risus est. </p>
<img src="http://placehold.it/326x145">
<button>Read More</button>
</div>
</div>
SASS version of the code snippet's CSS:
.parent
display: flex
flex-direction: row
justify-content: center
.child
border: 1px solid #000
display: flex
flex-direction: column
width: 30%
margin: 1em
padding: 1em
h5
p
flex-grow: 1
img, button
You can do it with nested flexbox, and use margin-top:auto to push the images to the bottom and keep them in the same line.
I added a <span> tag around each <img> and <button>.
.container {
display: flex;
justify-content: space-around;
}
.item {
flex: 0 0 20%;
display: flex;
flex-direction: column;
border: 1px solid;
}
.item h5 {
margin: 0;
}
.item .pic {
margin-top: auto;
}
.item .pic img {
display: block;
width: 100%;
}
<div class="container">
<div class="item">
<h5>About us</h5>
<p>Donec molestie.</p>
<span class="pic"><img src="//dummyimage.com/200" alt="" /></span>
<span class="btn"><button>Read More</button></span>
</div>
<div class="item">
<h5>About us</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<span class="pic"><img src="//dummyimage.com/200" alt="" /></span>
<span class="btn"><button>Read More</button></span>
</div>
<div class="item">
<h5>About us</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. .</p>
<span class="pic"><img src="//dummyimage.com/200" alt="" /></span>
<span class="btn"><button>Read More</button></span>
</div>
</div>
Use something like :
<div id="child">
<ul>
<li><h5>About us</h5></li>
<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. .</p></li>
<li><img class="img-responsive" src="http://www.marijazaric.com/minimalism_responsive/images/picture1.jpg" alt=""/></li>
<li><button>Read More</button></li>
</ul>
</div>
SASS:
.parent
display: flex
flex-wrap: wrap
justify-content: center
#child
border-style: solid
margin-left: 25px
margin-right: 25px
#child li {display:block};
#child ul {display:inline-table;}

How to clear float only in curent div?

I have the followin g HTML:
<div class="wrapper">
<div class="left-block">
<p>
some text
</p>
</div>
<div class="right-block">
<p>
some text
</p>
<div class="some-block">654</div>
<div class="some-block">132</div>
<div class="some-block">987</div>
<div class="clear"></div>
<div class="regular-block">10002</div>
</div>
</div>
blocks with class left-block and some-block have property float:left
This looks like http://jsfiddle.net/5k5v67jj/
block with class clear has clear:left;
How can I make block regular-block to like on this screenshot:
You have to contain the float and the clear in a block formatting context. To set up such a context, a common practice is to use overflow:auto or overflow:hidden. You'd add this to the styling of the div with the "right-block" class.
See http://jsfiddle.net/5k5v67jj/1/
I would change .some-block from float:left; to display:inline;. That way, a standard div like .regular-block will automatically show underneath and you don't need a clear between them.
Then you can put the clear div at the bottom to fix the block heights:
.wrapper{
border: 1px solid brown;
}
.left-block{
float:left;
width:100px;
padding:5px;
border: 1px solid red;
}
.right-block{
margin-left: 112px;
border: 1px solid green;
padding:5px;
padding-bottom:0;
}
.some-block{
display:inline;
border: 1px solid yellow;
}
.regular-block{
margin-top:10px;
border: 1px solid violet;
}
.clear{
clear:left;
}
<div class="wrapper">
<div class="left-block">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique, lorem dapibus tristique rhoncus, justo erat volutpat erat, in malesuada enim libero quis metus. Nunc tristique maximus efficitur. Sed nec dolor ut quam consequat molestie id quis justo.
</p>
</div>
<div class="right-block">
<p>
Nunc a lectus enim. Quisque sit amet iaculis turpis, a auctor tortor. Mauris aliquet sapien non odio tempor, auctor gravida nunc commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum eu tellus vel volutpat. Cras sed neque egestas, ullamcorper purus id, viverra odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce et malesuada est, et bibendum lectus.
</p>
<div class="some-block">654</div>
<div class="some-block">132</div>
<div class="some-block">987</div>
<div class="regular-block">10002</div>
<div class="clear"></div>
</div>
</div

CSS Inline-Blocks, remove space beneath each element

I have a website where I am trying to have a series of blocks next to each other and below each other. Currently the blocks are inline, I'd like to stop that and have stacking blocks both next to each other and on top of each other.
The website and page in question: http://cityofguilds.com/profile.php
My CSS:
.profile_containers {
display: inline-block;
vertical-align: top;
margin-right: 5px;
margin-bottom: 5px;
width: 48%;
padding: 5px;
border: 1px solid #222;
}
And the HTML:
<div class="profile_containers">
<h2>User Info</h2>
Text Here
</div>
<div class="profile_containers">
<h2>About Me</h2>
Text Here
</div>
<div class="profile_containers">
<h2>Badges</h2>
Text Here
</div>
<div class="clear"></div>
Thanks guys
I would recommend having two eight columns next to each other..
HTML
<div class="container">
<div class="eight columns">
<div class="profile_containers">
<h2>User Info</h2>
<strong>Name:</strong> Ben<br>
<strong>Level:</strong> 1<br>
<strong>Gender:</strong> Male<br>
<strong>Country:</strong> United Kingdom<br>
<strong>Started Playing:</strong> 21st July 2013<br>
<strong>Interests:</strong> Programming, Magic: The Gathering and gaming.<br>
<strong>Guild:</strong> Shinkaku
</div>
<div class="profile_containers">
<h2>Badges</h2>
Lorem ipsum dolor sit amet and stuff... Lorem ipsum dolor sit amet and stuff... Lorem ipsum dolor sit amet and stuff...
</div>
</div>
<div class="eight columns">
<div class="profile_containers">
<h2>About Me</h2>
Maecenas tincidunt fermentum nisi, sed convallis sapien aliquet a. Proin venenatis pharetra nisi, sit amet ultricies nibh hendrerit in. Donec et metus augue. Praesent fringilla justo non eros accumsan, venenatis posuere justo aliquet. Nullam et tortor fermentum, sollicitudin augue eget, ornare augue. Sed interdum imperdiet ullamcorper. Proin nec mattis velit. Donec sed augue nec mauris commodo lacinia sit amet ac purus. Maecenas faucibus bibendum nisi sit amet fringilla. Donec vel urna nec massa molestie tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut at euismod neque. In venenatis, augue lobortis bibendum pretium, velit est ornare nunc, a blandit lectus velit eu tortor. Quisque consequat odio at arcu accumsan, vel dapibus ipsum aliquam.
</div>
</div>
</div>
CSS
.profile_containers {
margin-right: 5px;
margin-bottom: 5px;
padding: 5px;
border: 1px solid #222;
}
getting them to fit and stack on one another snug is a little tricky to just do with CSS since your blocks are different sizes.
If you can set a height for your blocks thats fixed, then you can float them in css and they will automagically grid out for you.
so your css would look like this :
.profile_containers{
float:left;
margin: 0 5px 5px 0;
width:48%;
padding: 5px;
border: 1px solid #222;
/* consider adding box sizing to keep the integrity of your width because the padding will mess that up*/
box-sizing : border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
if this method will work but will break if the heights of your divs are different. The easiest way to get them snug as I have found is either to break them into separate columns and put your divs in columns ex
<div class="profile_container_column">
<div class="profile_container"></div>
<div class="profile_container"></div>
</div>
<div class="profile_container_column">
<div class="profile_container"></div>
<div class="profile_container"></div>
</div>
and use the css float:left on the columns.
Or use a javascript library like masonry to manage the positioning for you.