How to center a bootstrap row containing 3 images? - html

I have a container-fluid that contains 3 row
Row 1: 4 images
Row 2: 4 images
Row 3: 3 images
I am trying to center Row 3, I tried adding Row 3 inside another class called "container" and tried the "left, right" in css but did not work, may you please help?
.b3 {
padding-bottom: 20px;
}
.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-responsive {
padding-bottom: 10px;
}
#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
<section class="container-fluid client-section" id="clients">
<div class="row">
<div>
<b class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1 b2 b3">Clients</b>
</div>
</div>
<div class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1">
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
</div>
</section>


Is this your solution
.b3 {
padding-bottom: 20px;
}
.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-responsive {
padding-bottom: 10px;
}
.center .img-responsive{
margin:0 auto;
display:block;
}
#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>


The last row have 9, need to be 12, replace 3 by 4.
<div class="row">
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
And change the css by this:
.img-responsive {
padding-bottom: 10px;
display:block;
margin-left: auto;
margin-right: auto
}


you can use bootstrap class text-center
or you can just add this css
.center{
text-align: center;
}
.b3 {
padding-bottom: 20px;
}
.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-responsive {
padding-bottom: 10px;
}
#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
.center{
text-align: center;
}
<section class="container-fluid client-section" id="clients">
<div class="row">
<div>
<b class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1 b2 b3">Clients</b>
</div>
</div>
<div class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1">
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
</div>
</section>

Related

Bootstrap: responsive image alignment

I have a code like below - columns with full-width images.
<div class="col-3">
<img src="..." class="w-100" />
<div>Name</div>
</div>
As images can be of different size, it's not guaranteed that content below images will be displayed in one line (image's height is supposed to differ, depending on image's width).
In other words, when an image within .col is 200 px width, should be 200 px height, etc. (width = height).

Example 1 with css:
#import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
.img-prev {
height: 200px;
overflow: hidden;
}
.img-prev img {
max-height: 100%;
width: auto;
max-width: inherit;
margin: auto;
display: block;
}
<div class="container">
<div class="row">
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
Example 2 html:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
</div>
</div>
</div>
</div>
Example 3 with jq:
var imgs = $('.img-prev>img');
imgs.each(function(){
var item = $(this).closest('.img-prev');
item.css({
'background-image': 'url(' + $(this).attr('src') + ')',
'background-position': 'center center',
'-webkit-background-size': 'cover',
'background-size': 'cover',
});
$(this).hide();
});
.img-prev {
height: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="container">
<div class="row img-list">
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
</div>
</div>

try this one,
<div class="container">
<img src="loginBackground.jpg" class="img-fluid" alt="Cinque Terre" width="200" height="200">
</div>

Align images like Bootstrap

I want to align my images like bootstrap, I can't do it with bootstrap because user have the option to resize the images and using Bootstrap class "col-md, col-xs, etc." user can't resize the image width, I tried creating a div with width:100% and then I add width:25% to each image (I want 4 images per row), and the image is in the correct size but not in the correct position.
This is what I have at the moment:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<h2>Without Bootstrap</h2>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
</div>
Here is an example of what I want vs what I have
Code
Thanks in advance.

If you add a class to your divs that contain the images, you can use:
display: inline-block;
I added CSS to your file:
.blockRow {
display: inline-block;
padding-right: 2.2em;
}
and HTML:
<div class="container">
<h2>With Bootstrap</h2>
<div class="row">
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
<hr />
<h2>Without Bootstrap</h2>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
You'll have to play around with the padding to get it how you want it to look: http://codepen.io/anon/pen/pEobEg

Centering two rows of images

I recently inherited some (messy) code and want to center two rows of images, each row with three images each. I have been trying to figure out why I can't get them to center.
Here's my HTML
<div class="top1">
<div class="container" style="background-color:#fff; padding-top:10%; padding-bottom:400px; padding-top:15px; padding-left:30px; padding-right:30px;">
<div class="row">
<div class="col-md-2 col-xs-12 inspire_others">
<img style="position: relative;" class="img-responsive" src="images/1.jpg" width="100%" height="auto" />
</div>
<div class="col-md-2 col-xs-12 inspire_others" style="margin-top:5%">
<img style="position: relative;" class="img-responsive" src="images/2.jpg" width="100%" height="auto" style="margin-top:5%;" /> <!--width="220px" height="240px"-->
</div>
<div class="col-md-2 col-xs-12 inspire_others">
<img style="position: relative;" class="img-responsive" src="images/3.jpg" width="100%" height="auto" />
</div>
</div>
<div class="row" style="padding-top: 50px;">
<div class="col-md-2 col-xs-12 inspire_others">
<img style="position: relative;" class="img-responsive" src="images/4.jpg" width="100%" height="auto" style="margin-top:5%;" />
</div>
<div class="col-md-2 col-xs-12 inspire_others" style="margin-top:5%">
<img style="position: relative;" class="img-responsive" src="images/5.jpg" width="100%" height="auto" />
</div>
<div class="col-md-2 col-xs-12 inspire_others">
<img style="position: relative;" class="img-responsive" src="images/6.jpg" width="100%" height="auto" style="margin-top:5%;" />
</div>
</div>
<br />
</div>
</div>
I'm using bootstrap.

I cleaned up your code, and you need col-md-4 instead col-md-2 because bootstrap by default has 12 columns so 12 / 3 is 4. and add margin:auto in img to center image because img in bootstrap is already display:block
[class^="col"] {
border: green 1px solid
}
img {
margin: auto
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="top1">
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12 inspire_others">
<img class="img-responsive" src="//dummyimage.com/200x200" />
</div>
<div class="col-md-4 col-xs-12 inspire_others">
<img class="img-responsive" src="//dummyimage.com/200x200" />
<!--width="220px" height="240px"-->
</div>
<div class="col-md-4 col-xs-12 inspire_others">
<img class="img-responsive" src="//dummyimage.com/200x200" />
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12 inspire_others">
<img class="img-responsive" src="//dummyimage.com/200x200" />
</div>
<div class="col-md-4 col-xs-12 inspire_others">
<img class="img-responsive" src="//dummyimage.com/200x200" />
</div>
<div class="col-md-4 col-xs-12 inspire_others">
<img class="img-responsive" src="//dummyimage.com/200x200" />
</div>
</div>
<br />
</div>
</div>

Good news! There's actually a really easy way to center the images.
tldr; - Just add the code below in a <style> tag:
.row {
display: flex;
justify-content: center;
}
Long Story
It turns your .row div into a flexbox (more info here: http://www.w3schools.com/css/css3_flexbox.asp). The justify-content property centers all the divs inside .row (and the images in the divs).

Bootstrap have no gutter

Can I use bootstrap grid with no gutter? I want 3 columns with one row http://prntscr.com/6gpmhm
I had posted the markup about css I am using default css of framework
<section class="team-block">
<div class="row">
<div class="col-sm-4">
<img src="images/photo-01.jpg" height="534" width="534" alt="image description">
</div>
<div class="col-sm-4">
<img src="images/photo-02.jpg" height="267" width="266" alt="image description">
<img src="images/photo-10.jpg" height="267" width="266" alt="image description">
<img src="images/photo-03.jpg" height="267" width="266" alt="image description">
<img src="images/photo-04.jpg" height="267" width="266" alt="image description">
</div>
<div class="col-sm-4">
<img src="images/photo-05.jpg" height="534" width="534" alt="image description">
</div>
</div>
</section>

For the images to stack on one column, you need to remove px widths and re-define rows like this:
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">
<img src="images/photo-02.jpg" class="img-responsive" alt="image description">
</div>
<div class="col-sm-6">
<img src="images/photo-10.jpg" class="img-responsive" alt="image description">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img src="images/photo-03.jpg" class="img-responsive" alt="image description">
</div>
<div class="col-sm-6">
<img src="images/photo-04.jpg" class="img-responsive" alt="image description">
</div>
</div>
</div>
You can add this to your css to remove the gutter:
.col-sm-4 {
padding: 0px;
}
.col-sm-6 {
padding: 0px;
}

You have to use external class for it.
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}

How to align div objects in rows

I wanna align my six div objects, which are basicly boxes, into three rows.
(picture i draw to demonstrate >
I'm really clueless how i should align my boxes, so that they come ento these rows.
Right now, it's just one long horizontal line.
I'll post my code here :)
HTML:
<div class="boxbox">
<div id="newsb">
<img class="bottom" src="news/newsbutton.png" />
<img class="topi" src="news/news2.png" />
</div>
<div id="billetb">
<img class="bottom" src="news/billetbutton.png" />
<img class="topi" src="news/billetbutton2.png" />
</div>
<div id="infob">
<img class="bottom" src="news/infobutton.png" />
<img src="news/infobutton2.png" width="250" height="150" class="topi" />
</div>
<div id="kontak">
<img class="bottom" src="news/kontakt.png" />
<img class="topi" src="news/kontakt2.png" />
</div>
<div id="log">
<img class="bottom" src="news/loginbutton.png" />
<img class="topi" src="news/login2.png" />
</div>
<div id="cf4a">
<img class="bottomi" src="news/sponsor/KS.png" />
<img class="topi" src="news/sponsor/SS.png" />
<img class="bottomi" src="news/sponsor/ES.png" />
<img class="topi" src="news/sponsor/CM.png" />
</div>
</div>
CSS:
This is basicly just hover over animations, it'll be way to long to post here. Please write if you will need my CSS.
Any help would be greatly appreciated!

According to the picture, here's the code:
Live demo
HTML
<div class="boxbox">
<div class="row">
<div id="newsb">
<img class="bottom" src="news/newsbutton.png" />
<img class="topi" src="news/news2.png" />
</div>
<div id="billetb">
<img class="bottom" src="news/billetbutton.png" />
<img class="topi" src="news/billetbutton2.png" />
</div>
<div id="infob">
<img class="bottom" src="news/infobutton.png" />
<img src="news/infobutton2.png" width="250" height="150" class="topi" />
</div>
</div>
<div class="row">
<div id="kontak">
<img class="bottom" src="news/kontakt.png" />
<img class="topi" src="news/kontakt2.png" />
</div>
<div id="log">
<img class="bottom" src="news/loginbutton.png" />
<img class="topi" src="news/login2.png" />
</div>
<div id="cf4a">
<img class="bottomi" src="news/sponsor/KS.png" />
<img class="topi" src="news/sponsor/SS.png" />
<img class="bottomi" src="news/sponsor/ES.png" />
<img class="topi" src="news/sponsor/CM.png" />
</div>
</div>
</div>
CSS
.row{
display:block;
}
.row div{
display:inline;
}

You can see this here:
HTML:
<div class="boxbox">
<div id="newsb">
<img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
<img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="billetb">
<img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
<img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="infob">
<img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
<img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="kontak">
<img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
<img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="log">
<img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
<img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="cf4a">
<img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
<img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
CSS:
.boxbox {
height:200px;
margin:10px;
}
.boxbox > div {
width:32%;
height:100px;
background-color:Black;
display:inline-block;
margin:1px;
}
* {
margin:0;
padding:0;
}
.left {
float:left;
}
.right {
float:right;
}
img {
margin-top: 12px;
}
You cansee this here: http://jsfiddle.net/78UEX/1/
Hope this helps!!!

Try this demo ..
You can let each div take its place by it-self, and if the horizontal row has no place for another div, it will go to another row under the first row ..
<style>
.boxbox{
position: relative;
}
.box{
float: left;
width: 33.3%;
}
</style>
<div class="boxbox">
<div id="newsb" class="box">
<img class="bottom" src="news/newsbutton.png" />
<img class="topi" src="news/news2.png" />
</div>
<div id="billetb" class="box">
<img class="bottom" src="news/billetbutton.png" />
<img class="topi" src="news/billetbutton2.png" />
</div>
<div id="infob" class="box">
<img class="bottom" src="news/infobutton.png" />
<img src="news/infobutton2.png" />
</div>
<div id="kontak" class="box">
<img class="bottom" src="news/kontakt.png" />
<img class="topi" src="news/kontakt2.png" />
</div>
<div id="log" class="box">
<img class="bottom" src="news/loginbutton.png" />
<img class="topi" src="news/login2.png" />
</div>
<div id="cf4a" class="box">
<img class="bottomi" src="news/sponsor/KS.png" />
<img class="topi" src="news/sponsor/SS.png" />
<img class="bottomi" src="news/sponsor/ES.png" />
<img class="topi" src="news/sponsor/CM.png" />
</div>
</div>
Another way
demo
or you can set three vertical rows and put two divs in each row ..
<style>
.boxbox{
position: relative;
overflow: hidden;
}
.row{
float: left;
width: 33.3%;
}
</style>
<div class="boxbox">
<div class="row">
<div id="newsb">
<img class="bottom" src="news/newsbutton.png" />
<img class="topi" src="news/news2.png" />
</div>
<div id="billetb">
<img class="bottom" src="news/billetbutton.png" />
<img class="topi" src="news/billetbutton2.png" />
</div>
</div>
<div class="row">
<div id="infob">
<img class="bottom" src="news/infobutton.png" />
<img src="news/infobutton2.png" />
</div>
<div id="kontak">
<img class="bottom" src="news/kontakt.png" />
<img class="topi" src="news/kontakt2.png" />
</div>
</div>
<div class="row">
<div id="log">
<img class="bottom" src="news/loginbutton.png" />
<img class="topi" src="news/login2.png" />
</div>
<div id="cf4a">
<img class="bottomi" src="news/sponsor/KS.png" />
<img class="topi" src="news/sponsor/SS.png" />
<img class="bottomi" src="news/sponsor/ES.png" />
<img class="topi" src="news/sponsor/CM.png" />
</div>
</div>
</div>

According to your picture, you want 2 Rows of 3 Columns. Rows go left/right and Columns go up/down.
There are many different ways to do this.
Here's an example: http://jsfiddle.net/qB55N/
<div class='row'>
<div class='col'>1</div>
<div class='col'>2</div>
<div class='col'>3</div>
</div>
<div class='row'>
<div class='col'>4</div>
<div class='col'>5</div>
<div class='col'>6</div>
</div>

Is this what you are talking about? Example: http://jsfiddle.net/xsZ54/
HTML
<div class="row">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="row">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
CSS:
.row{
display: table;
width: 100%;
}
.box{
display: table-cell;
}