I'm having some issues with item alignment in IE and Safari and I'm not that good on cross-browser compatibility so would appreciate it if someone could suggest what I'm doing wrong with the following or what may be a good general fix.
Codepen: http://codepen.io/nickwcook/pen/vxjavM?editors=0110.
EDIT: Home image alignment sorted, but still having issues with the following:
The text in the About section of the page is fine in other browsers, but in IE its not taking into account the horizontal padding (30px) of the parent, and is actually overflowing past the sides of the viewport.
HTML:
<body ng-app="portfolioApp" data-spy="scroll" data-target="#navbar">
<div id="borderTop"></div>
<div id="borderRight"></div>
<div id="borderBottom"></div>
<div id="borderLeft"></div>
<div id="logo">
<img src="img/logo-basic-dark.png" alt="Logo">
</div>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav pull-right">
<li class="navLink">Home</li>
<li class="navLink">About</li>
<li class="navLink">Work</li>
<li class="navLink">Contact</li>
</ul>
</div>
</nav>
</div>
<main>
<section id="home">
<div class="sectionContent">
<div id="homeText">
<h1 id="homePrimary">Home Text Primary</h1>
<h2 id="homeSecondary">Home Text Secondary</h2>
</div>
<div id="homeImageContainer">
<div id="homeImage" class="blend-red-blue">
<div id="homeImageMask"></div>
</div>
</div>
</div>
</section>
<section id="about" ng-controller="skillsController">
<div class="sectionContent">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-push-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="skillsList">
<p>My skills include:</p>
<p ng-repeat="skill in skills" class="skillItem">{{skill.name}}</p>
</div>
</div>
</div>
</div>
</section>
<section id="work" ng-controller="projectsController">
<div class="sectionContent">
<div class="row">
<div class="project col-xs-12 col-md-6 col-lg-3">
<div>
<h2>Project One</h2>
<h4>Project Description</h4>
<a ng-href="#" target="blank_">View Project</a>
</div>
</div>
<div class="project col-xs-12 col-md-6 col-lg-3">
<div>
<h2>Project One</h2>
<h4>Project Description</h4>
<a ng-href="#" target="blank_">View Project</a>
</div>
</div>
<div class="project col-xs-12 col-md-6 col-lg-3">
<div>
<h2>Project One</h2>
<h4>Project Description</h4>
<a ng-href="#" target="blank_">View Project</a>
</div>
</div>
<div class="project col-xs-12 col-md-6 col-lg-3">
<div>
<h2>Project One</h2>
<h4>Project Description</h4>
<a ng-href="#" target="blank_">View Project</a>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="sectionContent">
</div>
</section>
</main>
</body>
CSS:
/* GENERAL LAYOUT */
html, body
{
padding: 0;
margin: 0;
background-color: #fefefe;
overflow-x: hidden;
}
/* SECTIONS */
section
{
display: block;
margin: 0;
background: transparent;
z-index: 90;
}
.sectionContent
{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 100px 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* HOME SECTION */
#home #homeImageContainer
{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#home #homeImage
{
position: absolute;
height: 30vw;
width: 30vw;
background-image: url('../img/laptop-hands.png');
background-position: center center;
background-size: cover;
z-index: 90;
-webkit-box-shadow: 3px 3px 100px 4px rgba(153,153,153,1);
-moz-box-shadow: 3px 3px 100px 4px rgba(153,153,153,1);
box-shadow: 3px 3px 100px 4px rgba(153,153,153,1);
}
#home #homeImage > #homeImageMask
{
height: 100%;
width: 100%;
background-color: rgba(84, 17, 200, 0.6);
z-index: 91;
}
#home #homeText
{
z-index: 95;
}
#homeText h1#homePrimary,
#homeText h2#homeSecondary
{
color: #000;
text-align: center;
}
#homeText h1#homePrimary
{
font-size: 30px;
font-weight: 600;
margin-bottom: 10px;
}
#homeText h2#homeSecondary
{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 600;
}
/* ABOUT SECTION */
#about p
{
line-height: 26px;
text-align: center;
}
#about #skillsList
{
width: 100%;
text-align: center;
margin-top: 50px;
}
#about #skillsList p:first-of-type
{
margin-bottom: 10px;
}
#about #skillsList p.skillItem
{
display: inline;
margin: 0 15px;
}
what about simplifying like this:
body, h1, h2 {
margin: 0;
}
.box-content {
width: 30vw;
height: 30vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 100px 30px;
box-sizing: border-box;
background: rgba(84, 17, 200, 0.6);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
box-shadow: 3px 3px 100px 4px rgba(153, 153, 153, 1);
text-align: center;
}
<div class="sectionContent">
<div id="homeText" class="box-content">
<h1 id="homePrimary">Home Text Primary</h1>
<h2 id="homeSecondary">Home Text Secondary</h2>
</div>
</div>
You can remove absolute css property from selector '#home #homeImage' issue is fixed at my end
Related
How do I make the pictures expand inside the class without being distorted and without edges or spaces between each other?
is there any other way to do this with Flexbox? there does not have to be a scrollbar and the .portof {class should not be too big in terms of height
How do I make the pictures expand inside the class without being distorted and without edges or spaces between each other?
is there any other way to do this with Flexbox? there does not have to be a scrollbar and the .portof {class should not be too big in terms of height
<pre>
<section class="Gallery">
<h1>Unsere Praxis</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus tempora accusantium provident ipsum placeat dolorem, dolores tempore optio, dignissimos eaque similique vel ea ullam nobis quas quae fugit laudantium sed!</p>
</section>
<!-- Portofolie -->
<section class="portof">
<div class="row">
<div class="wrapper">
<div class="container"> <img src="https://picsum.photos/350/250/?random=71" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=41" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=51" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=14" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=1" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=9" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=5" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=2" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=11" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=10" alt="?"></div>
</div>
<!-- <div class="gallery-row2">
sssdsd
</div>
--> </div>
</section>
</pre>
.Gallery{
width: 80%;
padding: 2% 0 0 0;
text-align: center;
margin: auto;
}
.Gallery h1{
font-size: 30px;
font-weight: 800;
color: #87CEEB;
}
.Gallery p{
padding-top: 10px;
font-family: 'Poppins', sans-serif;
font-weight: 30;
color: #000;
line-height: 30px;
font-size: 20px;
}
.portof{
width: 100%;
text-align: center;
background-color: royalblue;
background-image: url(img/slider_2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: rgba(0, 0, 0, 0.8);
background-blend-mode: multiply;
clip-path: polygon(51% 19%, 100% 13%, 100% 85%, 51% 94%, 0 85%, 0 13%);
}
.wrapper {
padding: 2% 0 0 0;
font-size: 0;
display: block;
}
.container {
display: inline-block;
width: 20%;
}
img {
display: inline-block;
max-width: 100%;
}
.container:hover{
background-color: rosybrown;
}
Just update CSS class .wrapper display property to be flex and give the container zero padding as following
.wrapper {
padding: 2% 0 0 0;
font-size: 0;
display: flex;
}
.container {
display: inline-block;
width: 20%;
padding: 0;
}
I'm trying to implement list/grid toggle. I have the grid and I'm trying to toggle to list, so I'd like to show the images on the left side and the content on the right side.
HTML code:
<div class="card infinite-item">
<div class="img-dimension">
<img class="card-img-top" src="/media/category/img.jpeg" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">idea 01</h5>
<div class="card-text">
<p>Phasellus a est. Nam eget dui. Pellentesque ut neque. Nunc sed turpis. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi.</p>
</div>
<div class="text-left pb-2 pt-2">
<a id="idea_detail_1" href="/idea/1/">Details...</a>
</div>
<div class="text-right card-icons">
<span class="badge badge-secondary">Discussion</span>
<a class="like badge">
like button
</a>
<a class="dislike badge">
dislike button
</a>
<a href="#" class="badge comments">
comments
</a>
</div>
</div>
<div class="card-footer">
footer
</div>
</div>
I didn't change the CSS, so it's the bootstrap default CSS code:
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}
.card-img-top {
width: 100%;
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
}
.card-body {
flex: 1 1 auto;
padding: 1.25rem;
}
.card-title {
margin-bottom: .75rem;
}
.card {
display: flex;
flex-direction: row;
align-items: center; /* optional */
}
You can change flex-direction: column to flex-direction: row in order to achieve your question.
.card-img-top {
width: 100%;
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
position: relative;
left: 0;
display: inline-block
}
.card-body {
flex: 1 1 auto;
padding: 1.25rem;
position: relative;
right: 0;
display: inline-block;
}
use column for this,for example:
<div class="row">
<div class="col-md-8">
------------your content here-------------
</div>
<div class="col-md-4">
------------your Image here---------------
</div>
</div>
I have columns on the home page of a website I am building, each containing an icon and text. On mobile, however, the columns stack on top of each other and have inconsistent vertical spacing, due to the inconsistent length of the text. Is there any way to force the columns to have consistent spacing in mobile view?
(If you run the below code snippet, press full page to see the spacing issue I am referring to)
.info-blocks {
margin-bottom: 15px;
/* background: #efefef; */
}
.info-blocks i.icon-info-blocks {
float: left;
color: #FFEB3B;
font-size: 30px;
min-width: 50px;
margin-top: 7px;
text-align: center;
background: #002e5b;
width: 72px;
height: 72px;
padding-top: 7px;
border: 1px solid #002e5b;
border-radius: 50%;
}
.info-blocks .info-blocks-in {
padding: 0 10px;
overflow: hidden;
}
.info-blocks .info-blocks-in h3 {
color: #002e5b;
font-size: 18px;
line-height: 28px;
margin: 0px;
margin-bottom: 8px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.info-blocks .info-blocks-in p {
font-size: 14px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
<br>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut magna eleifend, fermentum arcu et, euismod neque. Sed ante elit.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</body>
You can assign a fixed height to .info-blocks .info-blocks-in
See snippet below (test it at different screen width):
.info-blocks {
margin-bottom: 15px;
/* background: #efefef; */
}
.info-blocks i.icon-info-blocks {
float: left;
color: #FFEB3B;
font-size: 30px;
min-width: 50px;
margin-top: 7px;
text-align: center;
background: #002e5b;
width: 72px;
height: 72px;
padding-top: 7px;
border: 1px solid #002e5b;
border-radius: 50%;
}
.info-blocks .info-blocks-in {
padding: 0 10px;
height:80px;
overflow: hidden;
}
.info-blocks .info-blocks-in h3 {
color: #002e5b;
font-size: 18px;
line-height: 28px;
margin: 0px;
margin-bottom: 8px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.info-blocks .info-blocks-in p {
font-size: 14px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
<br>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut magna eleifend, fermentum arcu et, euismod neque. Sed ante elit.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</body>
I would like the overlay content to come from bottom of the image when hovered, but for some reason it's always visible, am I missing something with positioning? Here's the pen: http://codepen.io/anon/pen/PbjVgy
* {
background-color: grey;
color: white;
}
.about__images {
max-width: 800px;
margin: 0 auto;
}
.about__inner {
margin-top: 60px;
}
.about__inner img {
max-width: 100%;
margin-right: 20px;
}
/**/
.about .about__inner {
position: relative;
}
.about .about__inner .about__inner--overlay {
position: absolute;
top: 100%;
left: 15px;
text-align: center;
background: rgba(0, 0, 0, 0.8);
width: 89%;
height: 100%;
transition: all 0.1s ease-in;
}
p {
margin-top: 60px;
}
.about .about__inner:hover .about__inner--overlay {
top: 0;
}
<section class="about">
<h5 class="small__title">Lorem ipsum</h5>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae commodi nisi aut animi, excepturi impedit dicta natus culpa. Veniam atque sapiente assumenda fugiat tempore ipsam eos quae</p>
<div class="container">
<div class="about__images">
<div class="row">
<div class="about__inner col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=37&txt=390%C3%97259&w=390&h=259" alt="">
<div class="about__inner--overlay">
<p>overlay content</p>
</div>
</div>
<div class="about__inner col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=37&txt=390%C3%97259&w=390&h=259" alt="">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>overlay content</p>
</div>
</div>
<div class="about__inner col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=37&txt=390%C3%97259&w=390&h=259" alt="">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>overlay content</p>
</div>
</div>
</div>
</div>
</div>
</section>
Add overflow: hidden to .about__inner
.about__inner {
margin-top: 60px;
overflow: hidden;
}
http://codepen.io/anon/pen/ENXMxW
I don't know if it would be hard to explain but here it goes.. I have a number of divs on my page and I want them to come in a column layout. The page has a nav bar, a logo, some profile data and 3 more divs. Those 3 divs are not getting aligned correctly. I want those all three of them #content-1, #content-2, #content-3 in a horizontal manner in a straight line.
See this fiddle. Better to look here at the result.
CSS:
#CHARSET"ISO-8859-1";
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#container {
width: 100%;
}
#content {
margin-left: 10%;
}
#content-1, #content-2, #content-3 {
display: inline-block;
}
#content-1 {
width: 25%;
height: 100%;
}
#content-2 {
width: 50%;
height: 100%;
}
#content-3 {
width: 20%;
height: 100%;
}
.user_small_card p.name {
font-weight: bold;
}
.user_small_card p.profession {
margin-top: -10px;
}
.userWrap {
margin-bottom: 20px;
}
.user_card {
width: 77% !important;
margin-bottom: 10px;
}
.major_data {
width: 80%;
}
.major_data .profile_box p:first-child {
border-bottom: 0px;
text-align: center;
font-size: 20px;
background-color: #eee;
font-weight: bold;
}
.major_data .profile_box p:nth-child(2) {
text-align: justify;
padding-left: 5px;
padding-right: 5px;
margin-top: -20px;
}
.major_data .profile_box p {
border: 1px solid #bbb;
}
.commitment_box {
text-align: center;
height: 390px;
overflow: hidden;
background-color: lightblue;
color: white;
font-size: 20px;
width: 100%;
margin-right: 2%;
padding: 5px;
overflow-y: scroll;
}
.commitment_box .commitment p {
display: inline-block;
width: 100%;
}
.commitment_box .commitment p:first-child {
font-weight: bold;
}
#CHARSET"ISO-8859-1";
.userWrap {
position: relative;
width: 250px;
height: 50px;
overflow: visible;
z-index: 1;
}
.userWrap:hover {
z-index: 2;
}
.user {
position: absolute;
display: inline-block;
width: 200px;
height: 50px;
margin-bottom: 5px;
background: #fff;
transition: width 0.3s, height 0.3s, background-color 1s;
}
.user:hover {
width: 350px;
height: 200px;
transition: width 0.3s ease 0.5s, height 0.3s ease 0.5s, background-color 2.3s;
background: #eee;
}
.user img {
float: left;
}
.user .name, .skills {
margin-left: 5px;
}
.user .name {
font-size: 21px;
font-weight: bold;
}
.user_card {
background-color: #eee;
width: 38%;
padding: 10px;
display:table;
}
.user_card p {
display: table-cell;
vertical-align:top;
line-height:30px;
padding:2px 10px 2px 2px;
color: #aaa;
}
.user_card div {
display:table-row;
padding:2px;
}
.user_card div div {
display:table-cell;
}
.user_card div div.progress_wrap {
background-color: white;
width: 100%;
border: 1px solid #bbb;
}
.user_card div div.progress {
height: 30px;
background-color: #ddd;
}
HTML:
<div id="container">
<div id="content">
<div id="content-1">
<div id="content-1-1">
<div class="user_small_card">
<img src="img/user.png" width="150" height="150" />
<p class="name">Arkam Gadet</p>
<p class="profession">Photographer</p>
</div>
</div>
<div id="content-1-2">
<div id="people_worked_with">
<h2>People worked with</h2>
<div class="userWrap">
<div class="user">
<img src="img/user.png" width="50" height="50" /> <span class="name">Danish</span>
<br/> <span class="skills">Coder, Programmer</span>
</div>
</div>
<div class="userWrap">
<div class="user">
<img src="img/user.png" width="50" height="50" /> <span class="name">Danish</span>
<br/> <span class="skills">Coder, Programmer</span>
</div>
</div>
<div class="userWrap">
<div class="user">
<img src="img/user.png" width="50" height="50" /> <span class="name">Danish</span>
<br/> <span class="skills">Coder, Programmer</span>
</div>
</div>
<div class="userWrap">
<div class="user">
<img src="img/user.png" width="50" height="50" /> <span class="name">Danish</span>
<br/> <span class="skills">Coder, Programmer</span>
</div>
</div>
</div>
</div>
</div>
<div id="content-2">
<div id="content-2-1">
<div class="user_card">
<div class="skills">
<p>Skills</p>
<div class="progress_wrap">
<div class="progress" style="width:95%"></div>
</div>
</div>
<div class="commitment">
<p>Commitment</p>
<div class="progress_wrap">
<div class="progress" style="width:4%;"></div>
</div>
</div>
<div class="reputation">
<p>Reputation</p>
<div class="progress_wrap">
<div class="progress" style="width:5%;"></div>
</div>
</div>
</div>
</div>
<div id="content-2-2">
<div class="major_data">
<div class="profile_box">
<p>About</p>
<p>This is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about me</p>
</div>
<div class="profile_box">
<p>About</p>
<p>This is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about me</p>
</div>
<div class="profile_box">
<p>About</p>
<p>This is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about me</p>
</div>
</div>
</div>
</div>
<div id="content-3">
<div id="content-3-1">
<div class="commitment_box">
<div class="commitment">
<p>Alex:</p>
<p>Lorizzle ipsum away fo shizzle daahng dawg, consectetizzle adipiscing elit. Nullam sapien velizzle, bow wow wow volutpizzle, crunk gizzle, gravida vizzle, arcu. Dope check it out for sure. Sed erizzle. Gangsta izzle dolor dapibizzle nizzle tempus black. Fo shizzle pellentesque nibh izzle dizzle. Crazy izzle tortizzle.</p>
</div>
<div class="commitment">
<p>Alex 1:</p>
<p>Vivamizzle nec we gonna chung egizzle nisi izzle pretium. Daahng dawg sizzle amet lacus. Uhuh ... yih! eu nizzle eget lacizzle auctizzle yo. Praesent gizzle viverra crunk. Curabitizzle ghetto arcu. Vestibulizzle enim uhuh ... yih!, the bizzle pimpin', congue , sheezy nizzle, libero. Nullam vitae pede rizzle</p>
</div>
<div class="commitment">
<p>Alex 2:</p>
<p>In sagittis leo stuff nisi. Shizzlin dizzle rhoncizzle, arcu check out this malesuada facilisizzle, dizzle nulla uhuh ... yih! shut the shizzle up, da bomb auctizzle cool felizzle a break yo neck, yall. Check out this volutpizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle augue. I saw beyonces tizzles and my pizzle went</p>
</div>
<div class="commitment">
<p>Alex 3:</p>
<p>crizzle yippiyo. Maecenizzle tortor vel fo. Phasellus lobortizzle. Shizzle my nizzle crocodizzle things gizzle, shiznit nec, mah nizzle sure amizzle, pulvinar egestizzle, crazy. Vivamus mofo. Vestibulizzle ante doggy primizzle izzle own yo' break yo neck, yall luctizzle yo mamma ghetto posuere that's the shizzle</p>
</div>
<div class="commitment">
<p>Alex 4:</p>
<p>Vestibulizzle shiznit ipsizzle primizzle black mofo orci its fo rizzle izzle ultricizzle posuere cool Curae; Sed vitae nulla quizzle ma nizzle ornare shiz. Phasellizzle get down get down da bomb. Praesent volutpizzle accumsan velizzle. Mammasay mammasa mamma oo sa mammasay mammasa m</p>
</div>
</div>
</div>
</div>
</div>
The problems:
First column is coming down a bit
Third column is coming down a bit
How can bring the first and third in a line with the second one?
make change into this line into css
#content-1, #content-2, #content-3 {
vertical-align: top;
}
Try adding float: left to #content-1 and float: right to #content-3
Add the following CSS:
#content-1 {
width: 25%;
height: 100%;
float: left;
}
#content-2 {
width: 50%;
height: 100%;
}
#content-3 {
width: 20%;
height: 100%;
float: right;
}
Update fiddle
i hope you are looking like this :- http://jsfiddle.net/wJ2ef/4/
With the using of float you can proper align your Div Elements
Or you can do it like this:
#content-1, #content-2, #content-3 {
display: table-cell;
vertical-align: top;
}
Change "display: inline-block;" to:
#content-1, #content-2, #content-3 {
float: left;
}
#content-1, #content-2, #content-3 {
display: table-cell;
}