CODEWITHSUNDEEP
css
user3668817
user3668817

Reputation: 63

Issue on Dividing a Div Into Three Columns and Two Rows

Can you please take a look at this code and let me know how I can divide inside of a div into 3 Columns and 2 Rows like following image? 

 |--------|--------|---------|
 |        |        |         |
 |   1    |   2    |    3    |
 |        |        |         |
 |---------------------------|
 |        |        |         |
 |    4   |   5    |    6    |
 |        |        |         |
 |--------|--------|---------|

I already tried following at This Demo: but no success!

<div id="main">
     <div id="1"></div>
     <div id="2"></div>
     <div id="3"></div>
     <div id="4"></div>
     <div id="5"></div>
     <div id="6"></div>
 </div>

#main{width:300px; height:150px; border:1px solid #ccc;}
#1{width:50px; height:75px; border:1px solid #ccc;}
#2{width:50px; height:75px; border:1px solid #ccc;}
#3{width:50px; height:75px; border:1px solid #ccc;}
#4{width:50px; height:75px; border:1px solid #ccc;}
#5{width:50px; height:75px; border:1px solid #ccc;}
#6{width:50px; height:75px; border:1px solid #ccc;}

Upvotes: 1

Views: 8707

Answers (6)

mahega
mahega

Reputation: 3311

Check this Fiddle:

http://jsfiddle.net/ZJ4w3/

HTML: 

 <div id="main">
     <div id="1" class="innerBox"></div>
     <div id="2" class="innerBox"></div>
     <div id="3" class="innerBox"></div>
     <div id="4" class="innerBox"></div>
     <div id="5" class="innerBox"></div>
     <div id="6" class="innerBox"></div>
 </div>

CSS:

#main {
    width:300px; height:150px; border:1px solid #ccc;
}
.innerBox {
    width:50px; height:75px; border:1px solid #ccc; float:left;
}
.innerBox:nth-child(3n+1) {
    clear: both;
}

Upvotes: 0

arielnmz
arielnmz

Reputation: 9115

If you're using div tags as cells, you may want to take a look at the table display attribute:

Example in this fiddle:

HTML:

<div id="table">
    <div id="header">
        <div class="headerCell">A</div>
        <div class="headerCell">B</div>
        <div class="headerCell">C</div>
    </div>
    <div class="row">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
    </div>
</div>

CSS:

#table {
    display: table;
    width: 300px;
    background: yellow;
}

#header {
    display: table-header-group;
}

.headerCell {
    display: table-cell;
    font-weight: bold;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
}

Otherwise, you may want to float your div and use the clear attribute.

Upvotes: 1

ngrashia
ngrashia

Reputation: 9884

HTML: 

  <div id="main">
     <div id="1"></div>
     <div id="2"></div>
     <div id="3"></div>
     <div id="4"></div>
     <div id="5"></div>
     <div id="6"></div>
 </div>

CSS:

#main {
    width: 350px;
    height:200px;
}

#main div {
    width: 100px;
    height: 50%;
    border: 1px solid #ccc;
    float: left;
}

#main should have a width in px greater than 3 times the width of #main div ie #main_width > 3* div_width Height should be specified for the main div and can be defined in percentage for the individual divs.

Upvotes: 1

jbr
jbr

Reputation: 1

You may need like this.

HTML :

 <div id="main">
    <div id="1" class='col'>&nbsp;</div>
    <div id="2" class='col'>&nbsp;</div>
    <div id="3" class='col'>&nbsp;</div>
    <div id="4" class='col'>&nbsp;</div>
    <div id="5" class='col'>&nbsp;</div>
    <div id="6" class='col'>&nbsp;</div>
</div>

CSS :

#main{width:231px; height:154px; border:1px solid #ccc;}
.col { width:75px; border:1px solid #ccc; height:75px; float:left }

Upvotes: 0

Kerry Jones
Kerry Jones

Reputation: 21838

I have updated your fiddle: http://jsfiddle.net/k5zVe/8/

You needed to have each div float. I modified the other divs accordingly.

HTML

<div id="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

CSS

#main{width:300px; height:150px; border:1px solid #ccc;}
#main div{ float:left; width:98px; height:73px; border:1px solid #ccc;}

Upvotes: 0

scrowler
scrowler

Reputation: 24406

You've got a few things to keep in mind when doing this.

float: left; - this aligns each div to stack left next to the last one, and will drop a line when it needs to.

border: 1px solid #ccc; - borders are added to width and height, so should be taken into account by removing the border width from what you define the div width as.

You don't need to define an ID for each element, use #main div instead to cover them all.

Updated example:

#main {
    width: 300px;
}

#main div {
    width: 98px;
    height: 48px;
    border: 1px solid #ccc;
    float: left;
}

Upvotes: 0

Related Questions