CODEWITHSUNDEEP
htmlcssalignment
NotKimJongUn
NotKimJongUn

Reputation: 51

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 > enter image description here

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!

Upvotes: 1

Views: 2300

Answers (5)

Mujtaba Fadhil
Mujtaba Fadhil

Reputation: 6116

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>

Upvotes: 1

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5135

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!!!

Upvotes: 2

Tony
Tony

Reputation: 1463

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;
}

Upvotes: 0

Chase Rocker
Chase Rocker

Reputation: 1908

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>

Upvotes: 0

CMPS
CMPS

Reputation: 7769

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;
}

Upvotes: 3

Related Questions