CODEWITHSUNDEEP
zurb-foundation
Tirso
Tirso

Reputation: 13

In Foundation 5, how do you place three images side by side without spaces?

I've been using Foundation 5 for about a month, but I'm having trouble placing three images side by side without spaces. Any ideas please?

Here's the code prior to adding Foundation 5:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
margin: 0;
border: 0;
padding: 0;
}
.left {
float:left;
width: 15%;
}
.center {
float: left;
background:white;
width: 70%;


}
.main {
float:left;
width:70%;
}
aside {
float:left;
width:30%;
}
.right {
float: left;
width: 15%;
}
</style>
</head>
<body>
<div class="left"><img src="_images/topo_l.jpg" alt="topo map" /></div>
<div class="center">
<div class="header">
<h1>Header H1</h1>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. </p>
</div>
<aside>
<ul>
  <li>Aside li items here</li>
  <li>Aside li items here</li>
  <li>Aside li items here</li>
  <li>Aside li items here</li>
  <li>Aside li items here</li>
  <li>Aside li items here</li>
</ul>
</aside>
</div>
<div class="right"><img src="_images/topo_r.jpg" alt="topo map" /></div>
</body>
</html>

It looks okay at this point, but after I include Foundation (foundation.css, etc.) the code breaks.

Upvotes: 1

Views: 483

Answers (1)

Waterpile
Waterpile

Reputation: 121

I believe you're looking for Foundation's Block Grid feature. http://foundation.zurb.com/docs/components/block_grid.html

You could also use the regular grid, and in the class="row", modify to something like class="row small-collapse". Example below.

<!-- BEGIN BLOCK GRID EXAMPLE -->
    <div class="row">
    <ul class="small-block-grid-3">
        <li style="background-color:blue;height:100px;"></li>
        <li style="background-color:red;height:100px;"></li>
        <li style="background-color:green;height:100px;"></li>
    </ul>
    </div>
<!-- END BLOCK GRID EXAMPLE -->

<!-- BEGIN REGULAR GRID EXAMPLE -->
    <div class="row small-collapse">
        <div class="small-4 columns" style="background-color:blue;height:100px;"></div>
        <div class="small-4 columns" style="background-color:red;height:100px;"></div>
        <div class="small-4 columns" style="background-color:green;height:100px;"></div>
    </div>
<!-- END REGULAR GRID EXAMPLE -->

The block grid uses ul and li tags, while the regular grid uses the traditional row and columns classes inside div.

Upvotes: 2

Related Questions