This is my html5 code:
<header id="header">
<img src="img/logo.png" alt="logo" id="logo">
<h1>The Articles</h1>
</header>
<section id="section">
<article class="article">
<img src="img/articles.png" alt="articles" />
<p class="comments">
by<span class="woo"> JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date>
</p>
<h1 class="issue">Issue No 376</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
<div class="border-bottom"></div>
<div class="article1">
<img src="img/cat.png" alt="" />
<p class="comments">
by <span class="woo">JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date>
</p>
<h1 class="issue">Issue No 375</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
</div>
</article>
</section>
This is my JSfiddle:
http://jsfiddle.net/y3x8zqav/
Now my web-page look like this:
http://imgur.com/GmNAWpx
In my page i marked, that header title and aside bar navigation need to place same line.
Is this correct format for located navigation in aside?
or may i know css property to fix this?
Any help would be highly appreciated..
Thanks in advance.
After reviewing your web site, you need add a couple of changes. Here's the css code to add:
.aside {
margin-top: -80px;
}
.aside > img {
margin-top: 25px;
}
That's it;
Related
I am trying to achieve the following layout:
I have been able to do this more or less with two issues:
The columns overlap with the image
The circles are not centered. Moreover when I see this on the mobile, amongst other issues, the two circles stack on top of each other.
Here's my HTML:
<div class="container"> <!-- can't change this -->
<div class="col-md-8 column"> <!-- can't change this -->
<!-- can change anything below this -->
<div class="row">
<div class="col-md-3">
<img alt="Some Image" src="http://lorempixel.com/340/340/" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="circle">450
<br> reviews </div>
<div class="circle">4.2 million
<br> readers </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
</div>
</div>
</div>
Live Demo
Please help resolve these issues.
It doesn't necessarily overlaps, in this particular case, simply give the image img-responsive class so the width of the image is always at max 100%.
To solve the circle issues, you can put them inside a col-xs-6 so they don't stack on top of each other.
Here is a demo: https://codepen.io/anon/pen/WMEMbW
<div class="container">
<!-- can't change this -->
<div class="col-md-8 column">
<!-- can't change this -->
<!-- can change anything below this -->
<div class="row">
<div class="col-md-3">
<img alt="Some Image" src="http://lorempixel.com/340/340/" class="img-responsive" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="center-block">
<div class="col-xs-6">
<div class="circle">450
<br> reviews
</div>
</div>
<div class="col-xs-6">
<div class="circle">4.2 million
<br> readers
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</div>
I guess you should be using the help of some media queries as well.
Have made some changes to the demo you shared.
Updated Demo
CSS
.circle {
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
margin-right: 10px;
width: 200px;
height: 200px;
font-size: 35px;
border-radius: 50%;
color: #fef;
background: #000
}
.img-left {
max-width: 100%;
}
.circle-wrapper {
text-align: center;
}
#media (max-width:500px) {
.circle-wrapper .circle{
width: 150px;
height: 150px;
font-size: 25px;
}
}
HTML:
<div class="container"> <!-- can't change this -->
<div class="col-md-8 column"> <!-- can't change this -->
<!-- can change anything below this -->
<div class="row">
<div class="col-md-3">
<img class="img-left" alt="Some Image" src="http://lorempixel.com/340/340/" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row circle-wrapper">
<div class="circle">450
<br> reviews </div>
<div class="circle">4.2 million
<br> readers </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</div>
I'm using Bulma 0.4.0, though the answer may not be associated with Bulma itself.
How can I set column height equal to others? (see screenshots below)
Edit: codepen with more text that presents actual behavior: https://codepen.io/anon/pen/vmKVbx
Expected behavior:
Actual behavior:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div class="columns">
<div class="column">
<p class="notification is-info">First column</p>
</div>
<div class="column">
<p class="notification is-success">Second column</p>
</div>
<div class="column">
<p class="notification is-warning">Third column</p>
</div>
<div class="column">
<p class="notification is-danger">Fourth</p>
</div>
</div>
Here is a simple solution, by adding this CSS rule, and make sure it load after the Bulma CSS
.column {
display: flex;
}
Updated codepen
Stack snippet
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<style>
.column {
display: flex;
}
</style>
</head>
<body>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.</p>
</div>
<div class="column">
<p class="notification is-success">Nulla a mauris vel erat elementum scelerisque. Cras mollis consequat neque, vitae sagittis nisl dapibus porttitor. Donec et rutrum ligula. Donec luctus iaculis orci, nec imperdiet felis semper quis. Nulla a convallis eros, facilisis hendrerit risus. Nulla sit amet porta quam. Nullam maximus tempus sem, dapibus dapibus purus sollicitudin vel. Phasellus at rhoncus odio. Quisque sit amet ornare dolor. Maecenas accumsan viverra tristique. Etiam vulputate nibh ipsum, at rutrum lacus hendrerit ut. Nunc sodales diam purus, in ultricies nulla consectetur sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut tincidunt mauris.</p>
</div>
<div class="column">
<p class="notification is-warning">Pellentesque eros tortor, pharetra in lorem quis, maximus hendrerit ex. Praesent nunc ante, elementum at congue ut, ultricies quis lectus. Aenean vel elementum risus. Vestibulum aliquet justo in ligula dictum commodo. Nullam condimentum ante vitae nulla dignissim, vitae interdum neque dapibus. Aenean nec quam egestas, viverra ex vel, tempus lectus. Quisque eu euismod neque. Mauris aliquam neque a porta condimentum. Cras eget nisi turpis. Aenean lacus velit, dapibus eu aliquam eget, aliquet id quam. Integer ultricies est quis erat facilisis congue vel efficitur ipsum. Nunc id varius orci, consequat vehicula libero. Morbi maximus, orci in efficitur feugiat, quam lacus lobortis elit, in blandit mauris dolor sit amet mauris.
</p>
</div>
<div class="column">
<p class="notification is-danger">Morbi turpis nunc, porttitor ut bibendum et, tincidunt vel nisi. Ut magna massa, placerat id nunc at, venenatis sodales leo. Nunc dapibus, lacus ac molestie vestibulum, tortor mauris posuere turpis, at pretium orci orci in justo.</p>
</div>
</div>
</body>
</html>
In Bulma, you have got the class .is-flex to achieve the same.
I know it's a bit late, but maybe someone who looks for similar solution will find my answer helpful.
You can use Bulma's Tile system to get something that will behave like equal height columns.
<div class="tile is-ancestor">
<div class="tile is-horizontal">
<div class="tile is-parent">
<div class="tile is-child">
<!--Content here-->
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<!--Content here-->
</div>
</div>
</div>
</div>
No additional css needed. You can also specify horizontal size of columns using is-1 - is-12 classes.
Check this pen to see this in action
This did the trick for me.
<div class="column">
<section class="section1">
...
</section>
</div>
.section1 {
height: 100%;
}
This works fine for me with this code:
<div class="columns">
<div class="column my-class">
one thing
</div>
<div class="column my-class">
many other <br><br><br> etc. things
</div>
</div>
<style>
.column.my-class {
display: inline-flex;
}
.column.my-class > div {
width: 100%; // only Edge needed this nonsense
}
</style>
Worked in Chrome 61.0.3163.100 (of course), Edge 40.15063.674.0, Firefox 57.0.
align-items: stretch http://cssreference.io/flexbox/
.columns {
flex-wrap: wrap;
align-items: stretch;
}
Ref: https://github.com/jgthms/bulma/issues/696
I noticed that making .column as flex broke the layout.
I solved with the following CSS rule, this way I can use the class .is-equal-height if I want aligned columns.
.columns.is-equal-height > .column > * {
height: 100% !important;
}
I'm trying to set a bottom margin to the div with the class "thisrow" but couldn't get it working. Basically, i want that row to be at the bottom (footer) of the card.
here's the code:
<div class="leftbar" style="margin-top:10px;">
<div class="row">
<div class="col-md-4">
<div style="background:#ffc016; height:150px;">
<div class="text-center">
Company Name
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-10">
<h4>Summer Communication Intern</h4>
</div>
<div class="col-md-2 text-right heart"><span class="glyphicon glyphicon-heart-empty"></span></div>
</div>
<div class="row">
<div class="col-md-3"><small>Nike Inc</small></div>
<div class="col-md-3"><small>England</small></div>
<div class="col-md-3"><small>Internship</small></div>
<div class="col-md-3"><small> </small></div>
</div>
<div class="row thisrow">
<div class="col-md-2"> </div>
<div class="col-md-10 text-right heart">
<div class="btn-group" role="group" aria-label="...">
<span class="btn btn-default monthly"><small>Save</small></span>
<a class="btn btn-default applynow">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
http://i.stack.imgur.com/6KEpg.png
In my experience, positioning something at the bottom right is best done by postioning it absolute. This is by far the easiest and most 'dynamic' way of doing this. The css is not that hard:
.leftbar {
position: relative;
}
.bottom-right {
position: absolute;
bottom: 0;
right: 15px; /* == padding of .row in TB3 */
}
This does require you to move that button group directly into the .leftbar, so it uses the correct element to position against. This is nessecary since a .col gets postion relative by default in TB3.
I went ahead and cleaned up your HTML while I was at it. There where a lot of elemnts in there that are not required, as you can see. The result of the markup below should be the same as your code,and is a lot cleanier and easier to understand imo:
<div class="leftbar row" style="margin-top:10px;">
<div class="col-xs-4 text-center" style="background:#ffc016; height:150px;">
Company Name
</div>
<div class="col-xs-8">
<a href="#" class='pull-right'>
<i class="glyphicon glyphicon-heart-empty"></i>
</a>
<h4>Summer Communication Intern</h4>
<ul class="row">
<li class="col-xs-3">
<small>Nike Inc</small>
</li>
<li class="col-xs-3">
<small>England</small>
</li>
<li class="col-xs-3">
<small>Internship</small>
</li>
</ul>
</div>
<div class="btn-group bottom-right" role="group" aria-label="...">
<span class="btn btn-default monthly">
<small>Save</small>
</span>
<a class="btn btn-default applynow">
View
</a>
</div>
</div>
and a demo: http://jsfiddle.net/2tg55z5n/
(note that I changed your col classes to xs just so they would show up in that small fiddle panel, you can just as easy change them back to md of course)
Try setting margin to the button division
<div class="btn-group" role="group" aria-label="..." style="margin-top:_px">
<span class="btn btn-default monthly"><small>Save</small></span>
<a class="btn btn-default applynow">View</a>
</div>
I think you should use an additional container to get your buttons together with the bottom part.
see here for an example of working with containers
Containers example
Bootstrap 3 Container Examples and Common Misuse
View in Desktop mode
Demo by scotch.io
Rows are orange
Toggle Padding to help visualize even more
<main>
<section id="with-container-example">
<h2>With Container</h2>
<div class="container">
<div class="row">
<p class="absolute-example">
This is positioned-absolute, relative to the row to help visualize
</p>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div>
</div>
</section>
<section id="with-no-container">
<h2>With No Container</h2>
<div class="row">
<p class="absolute-example">
This is positioned-absolute, relative to the row to help visualize
</p>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div>
</section>
<section id="with-container-fluid">
<h2>With Container-Fluid</h2>
<div class="container-fluid">
<div class="row">
<p class="absolute-example">
This is positioned-absolute, relative to the row to help visualize
</p>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div>
</div>
</section>
</main>
http://jsfiddle.net/dq5T5/
The fiddle above shows the problem.
Since the row has a white background, there ends up being empty space under the image when the browser window is resized.
I just want the image to fill the entire height of the left column, but I also need it to stack vertically as it currently does (responsive).
<body>
<div class="widereport">
<div class="col-md-4 no-gutters">
<figure class="animated-overlay overlay-alt">
<img class="img-responsive" width="640" height="400" alt="img alt" src="http://placehold.it/600x450" itemprop="image">
<a title="image" href="/"></a>
<figcaption>
<div class="thumb-info thumb-info-alt">
<i class="ss-navigateright"></i>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-8">
<h5 class="portfolio-subtitle" itemprop="alternativeHeadline">mini menta | March 2014</h5>
<h3 class="portfolio-item-title mt0" itemprop="name headline">
Title here
</h3>
<p class="itemdeets">85 Pages</p>
<div class="portfolio-item-excerpt" itemprop="description">
<p class="mb9">Sed non orci sed ante dignissim aliquam. Fusce in sapien leo. Praesent justo nibh, dapibus eu fermentum sit amet, rutrum sit amet nunc. Aliquam augue. Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend. Sed non orci sed ante dignissim aliquam. Fusce in sapien leo. Praesent justo nibh, dapibus eu fermentum sit amet, rutrum sit amet nunc. Aliquam augue. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend.</p>
</div>
<p>
<span class="text pull-right mb9">More Information</span>
</p>
</div>
</div>
</body>
Try adding the below in the class for img-responsive in the CSS:
.img-responsive {
height: 100%;
width: 100%;
}
Fiddle
recently downloaded the 960 grid system to play around with.
Now the problem im having is that the image is not coming across to the left after the singer songwriter tag is closed off. Both columns before the image add up to 12 exactly
The following code should display a logo image up top, singer songwriter description to the right of it. Then on a new line i should see image placeholder in gray and a paragraph of text to the write of that. However it is currently mixed up
Can anybody advise me if i need to change anything to accommodate images
heres a link to the page http://digitalgenesis.com.au/sites/alice
and heres a link to how i basically want it to flow http://digitalgenesis.com.au/sites/alice/img/960img.gif
Page code
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<title></title>
</head>
<body>
<div class="container_12">
<div class="grid_5"> <img src="img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
<div class="grid_5"> <img src="img/img.jpg" alt="#" /></div>
<div class="grid_7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div>
</div>
</body>
</html>
the second grid 5 should be seperated on a new row
Try this:
Put your reset before 960.css and then add a clear after the first line.
click here to See example jsfiddle
Here's my code:
<div class="grid_5"> <img src="http://digitalgenesis.com.au/sites/alice/img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
<div class="clear"></div>
<div class="grid_5"> <img src="http://digitalgenesis.com.au/sites/alice/img/img.jpg" alt="#" /></div>
<div class="grid_7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div>
You're looking for clearfix class to drop the next set of divs down
<div class="container_12">
<div class="grid_5"> <img src="img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
<div class="clearfix"></div>
<div class="grid_5"> <img src="img/img.jpg" alt="#" /></div>
<div class="grid_7"> Lorem ipsum dolor sit amet,.... </div>
</div>