Currently i'm using this script and i kinda like it
And here's how the HTML and CSS looks like.
<div id="slider">
<div class="viewer">
<div class="reel">
<div class="slide"> <img src="images/IMG9.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG8.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG7.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG6.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG5.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG4.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG3.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG2.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG1.jpg" width="900" height="500" alt="" /> </div>
</div>
</div>
#slider
{
position: relative;
width: 900px;
margin: 0 auto;
}
#slider .viewer
{
width: 900px;
height: 500px;
overflow: hidden;
margin: 0 auto;
}
#slider .viewer .reel
{
isplay: none;
height: 500px;
}
#slider .viewer .reel .slide
{
position: relative;
width: 900px;
height: 500px;
}
Only problem is that i like the faded version better. So is there any easy way to change that or do i have to switch js script completely?
Related
I want to create a grid styled layout without using grid or flexbox. I am assuming I need float for this. One of the issues is that the images aren't' filling the entire space. Any advice on how to do this?
.container {
max-width: 90%;
margin: 0 auto;
}
.grid-item {
width: 25%;
float: left;
}
.grid-item img {
object-fit: cover;
width: 100%;
height: auto;
}
<div class="container">
<div class="grid">
<div class="grid-item phone">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
</div>
</div>
I suggest using the columns rule, specifying the number of columns and a width of 1/4 of the total width for responsiveness:
columns: 4 25vh;
Thus, the template with the image is now responsive without media queries.
.container {
max-width: 90%;
margin: 0 auto;
}
.grid {
columns: 4 25vh;
}
.grid-item {
/*width: 25%;
float: left;*/
}
.grid-item img {
object-fit: cover;
width: 100%;
height: auto;
}
<div class="container">
<div class="grid">
<div class="grid-item phone">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
</div>
</div>
I have a row of around 6 divs. Currently if the row of divs suppresses the width of the page, it puts the next div under the rest, like this
My question is: **how do I have a row of horizontal divs with a scroll bar like this **
Here's my code:
<div style="overflow:auto;">
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
</div>
<style>
.box {
float: left;
width: 127px;
margin: 9.2px;
border: 5px solid red;
}
</style>
JSFIDDLE: http://jsfiddle.net/ZrpHv/59/
You can wrap all <div class="box"> into one more div and add width in px
.box {
float: left;
width: 127px;
margin: 9.2px;
border: 5px solid red;
}
<div style="overflow:auto;">
<div style="width: 1000px;">
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
</div>
</div>
Please try this:
.parentdiv {
overflow-x: scroll;
width: 450px;
white-space: nowrap;
border: 1px solid black;
}
.box{
width: 127px;
margin: 9.2px;
border: 5px solid red;
display: inline-block;
}
I have a image gallery which is not straighting/fullfilling the full width in a row
html
<div class="col-md-6">
<figure class="gallery">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
</figure>
</div>
css
.gallery{
display:table;
}
.gallery img{
display: inline-block;
padding: 2px;
background: transparent;
}
display:table-cell is also not working . There is 6 images here
.gallery{
display:table;
white-space: nowrap;
}
.gallery img{
display: inline-block;
padding: 2px;
background: transparent;
}
<div class="col-md-6">
<figure class="gallery">
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
</figure>
</div>
From what I understood (since you have not mentioned the image size.)
.gallery{
}
.gallery > div{
padding:2px;
}
.gallery img{
background: transparent;
width:100%;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="gallery row">
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
</div>
</div>
Add Below css
.gallery{
display:table;
margin:0;
}
DEMO
I have designed a grid layout using divs. As you can see below. However I need to center these horizontally in the middle of the web browser. Could somebody please show me how? Everything I have tried seems to align all of the divs centrally as if they are in one column over the top of each other.
Thanks in advance.
HTML
<div class="row">
<div class="col">
<div class="trigger vertical img1">
<div tabindex="0" class="maincontent static"><div class="slider">
<img src="slide1.png" width="200" />
<img src="slide2.png" width="200" />
<img src="slide3.png" width="200" />
<img src="slide4.png" height="200"/>
</div></div>
</div>
</div>
<div class="col">
<div class="trigger img1">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div></div>
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
</div>
<!-- </div>
<div class="row">-->
<div class="col">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/><p>Text Here 4<p></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/><p>Text Here 5<p></div>
</div>
</div>
<div class="col">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/><p>Text Here 6<p></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/><p>Text Here 7<p></div>
</div>
</div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
<div class="trigger large">
<div tabindex="0" class="maincontent staticlarge"><div class="slider">
<img src="slide1.png" height="200" width="400" />
<img src="slide2.png" height="200" width="400" />
<img src="slide3.png" height="200" width="400" />
<img src="slide4.png" height="200" width="400" />
</div></div>
</div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent staticlarge">
<iframe align="center" src="clock2.php" width="300px" height="200px" scrolling="no" frameBorder="0" style="margin-left:5px;"></iframe></div></div>
CSS
<style type="text/css">
.trigger {
width:200px;
height:200px;
}
.trigger.large {
width: 400px;
}
.trigger.vertical {
height: 400px;
}
.trigger.vertical * {
height: 400px;
}
.hover-img, .hover-img.hover_effect {
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px;
}
.static {
position: relative;
width: 200px;
height: 200px;
text-align: center;
font-size: 0;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px;
}
.staticlarge {
position: relative;
width: 400px;
height: 200px;
text-align: center;
font-size: 0;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px;
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}
.trigger:hover > .hover-img {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
font-size: 14px;
color: #FFF;
}
.trigger:hover > .hover-img.img4 {
background-color: #f47878;
}
.trigger:hover > .hover-img.img5 {
background-color: #f6c447;
}
.trigger:hover > .hover-img.img6 {
background-color: #92cf96;
}
.trigger:hover > .hover-img.img7 {
background-color: #f47878;
}
.trigger:hover > .hover-img.img12 {
background-color: #92cf96;
}
.trigger:hover .hover-img img {
display: none;
}
#container {
width:960px;
margin: 0 auto;
}
.row {
display: flex;
}
.col {
display:inline-block;
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}
#apDiv1 {
position: absolute;
width: 100px;
height: 200px;
z-index: 1;
background-color: #999999;
}
.trigger:hover p {
display:block;
transform:scaleX(-1)
}
Use a div to wrap your HTML like below <div class="bodyCont">
<div class="bodyCont">
<div class="row">
<div class="col">
<div class="trigger vertical img1">
<div tabindex="0" class="maincontent static"><div class="slider">
<img src="slide1.png" width="200" />
<img src="slide2.png" width="200" />
<img src="slide3.png" width="200" />
<img src="slide4.png" height="200"/>
</div></div>
</div>
</div>
<div class="col">
<div class="trigger img1">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div></div>
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
</div>
<!-- </div>
<div class="row">-->
<div class="col">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/><p>Text Here 4<p></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/><p>Text Here 5<p></div>
</div>
</div>
<div class="col">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/><p>Text Here 6<p></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/><p>Text Here 7<p></div>
</div>
</div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
<div class="trigger large">
<div tabindex="0" class="maincontent staticlarge"><div class="slider">
<img src="slide1.png" height="200" width="400" />
<img src="slide2.png" height="200" width="400" />
<img src="slide3.png" height="200" width="400" />
<img src="slide4.png" height="200" width="400" />
</div></div>
</div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent staticlarge">
<iframe align="center" src="clock2.php" width="300px" height="200px" scrolling="no" frameBorder="0" style="margin-left:5px;"></iframe></div></div>
</div>
Then since you are having fixed width for all these items it becomes easy calculate the width for all total width=800px.
Apply it to the outercontainer and margin:0 auto; will do the trick
CSS
.bodyCont{
width :800px;
margin:0px auto;
}
DEMO
simply give the first div (the one before class="row") a class (i.e. wrapper) and insert following css to center the complete wrapper content into the middle of the screen:
.wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
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;
}