CODEWITHSUNDEEP
javascripthtmlcss
E.Meir
E.Meir

Reputation: 2216

div's in a box arrangement

I spent a lot of time trying to do this:

enter image description here

The black square is a div (doesn't have to be a div) container.

All the other squares are divs or spans or whatever (its not the issue)

Can someone direct me how to accomplish this using plain HTML, CSS and Javascript?

*I tried to make all squares divs but then because in one line their is a square with different height the next line will be with missing 'parts' and then tried to manage this issue with margin- but it didn't work out and I am sure its not that difficult.

Upvotes: 3

Views: 312

Answers (3)

Cody Guldner
Cody Guldner

Reputation: 2896

What you need to use is the CSS3 property column-count. It displays the number of columns inside any sort of container. So if you were trying to use this as a picture album

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

-webkit-column-count: 3;
-webkit-column-gap:   0px;
-moz-column-count:    3;
-moz-column-gap:      0px;
column-count:         3;
column-gap:           0px;

}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}

Where #photos would be you're container.

Credit to Chris Coyier for the article http://css-tricks.com/seamless-responsive-photo-grid/

Upvotes: 1

ESD
ESD

Reputation: 545

Since you have no code to show us I won't do the code for you... But I can tell you what might be usefull for this.

Here are some css parameters that can help you to achieve this :

  • position

  • margin

  • display

  • float

Every square in this should be a DIV and a good combo of these should do the trick!

Upvotes: 0

advanced_noob
advanced_noob

Reputation: 39

try absolute positioning:

<style>
.rect {
    position: absolute;
    width: 100px ;
    height: 200px;
}

</style>
<div class="rect" style="top:0;left:0;border:3px solid blue"></div>
<div class="rect" style="top:206px;left:0;border:3px solid green"></div>
<div class="rect" style="top:0;left:106px;border:3px solid red; height: 300px"></div>

Upvotes: 0

Related Questions