CODEWITHSUNDEEP
htmlcss
Micro
Micro

Reputation: 10891

How to position divs in nice little rows

I would like to position 8 divs in the following way:

divs

Here is my JSfiddle which has all the div code: http://jsfiddle.net/XRTh5/

What I would like to do is make the div's behave the same way as on this website with it's icons" http://cyberdust.com/. See how when you re-size the page, the icons shrink and get smaller instead of not changing?

Thanks for the help. I would like to do this only using `div's and not using tables or any old technology like that.

Upvotes: 4

Views: 254

Answers (9)

Josh Harrison
Josh Harrison

Reputation: 5994

Use float: left; to float your items, and percentage based widths for a layout that scales.

Remove heights from your container elements to allow them to expand and fit their contents.

Example: http://jsfiddle.net/XRTh5/37/

The site that you referenced uses media queries to adjust styles based on window width. That would also work, but percentages may be a simpler way of achieving your desired result.

Example

UPDATE: using a neat little trick with percentage-based padding and position: absolute, you can cause the grid items to maintain an aspect ratio. See fiddle link above.

Upvotes: 2

Pete
Pete

Reputation: 58422

if you don't need the gap in between the the rows then a few simple tweaks to your css will do:

.main {
    display:table;
    border-spacing:50px;
}

.row {
    display:table-row;
}

.icon {
    display:table-cell;
}

Example

Otherwise you just need to add and extra closing and opening main div to get the middle gap:

If you do need the gap in the middle

Upvotes: 2

user3631948
user3631948

Reputation: 85

I think that is what you need

.row div{
    float:left;
}

Just float de divs

http://jsfiddle.net/XRTh5/15/

Upvotes: 1

hairmot
hairmot

Reputation: 2975

The example website you posted is using breakpoints to set the size of the icons to specific values depending on the size of the users viewport.

read up on media queries and you should be able to replicate this very easily.

You could also set the size of your icons to a percentage value rather than a fixed width or height and this would scale dynamically but will not re-flow very gracefully.

Something else to investigate is flexbox as this will flex to fit the available space quite nicely but isn't 100% supported on all browsers.

Hope this helps

Upvotes: 2

SoWhat
SoWhat

Reputation: 5622

In answer to your first question, how to make the div, use float:left on the icons to make them fit horizontally. Use relative width's to make them shrink. To make them shrink and realign perfectly, you need to use media queries, which I'll not go into right now. Here's the updated css

.main {
    height: 400px;
    width: 100%;/*relative widths*/
    background-color: green;
}

.row {
    width: 100%;/*relative widths*/
    background-color: blue;
}

.icon {
    width: 20%;/*relative widths*/
    height: 120px;
    background-color: orange;
    border: 1px solid black;
    float:left;/*fit horizontally*/
}
.row{
    clear:both;/*To stop the icons from floating*/
}

jsfiddle: http://jsfiddle.net/mDtjP/

Upvotes: 1

JRulle
JRulle

Reputation: 7568

You need to add the following CSS:

* { box-sizing: border-box; } //border will not add to element width

.icon {
    width: 25%;
    height: 150px;
    background-color: orange;
    border: 1px solid black;
    float: left; //objects will sit next to eachother
}

Also, you way want to set this all up using % values for width/height so that you can get the responsive resizing effect

Upvotes: 1

Kasyx
Kasyx

Reputation: 3200

You should set float: left like here: http://jsfiddle.net/XRTh5/10/

.icon {
    width: 198px;
    height: 150px;
    background-color: orange;
    border: 1px solid black;
    float: left;
}

Also remember about decreasing div size to 198px if you want to fit them in 800px (you have 2px border).

Upvotes: 0

Will B.
Will B.

Reputation: 18416

Strongly suggest you look at using a framework to accomplish this just as the reference website uses.

But in general it can be accomplished with css and the @media (min-width: 768px) {} which applies different css styles when the browser viewpoint/window is resized.

There are a couple but for your specific need they use bootstrap.js http://getbootstrap.com/

Upvotes: 3

Alex Wilson
Alex Wilson

Reputation: 2419

try this DEMO i change you code

.main {
    background-color: green;
    display:inline-block;
}

.row {
    background-color: blue;
    padding:5px;
}

.icon {
    width: 200px;
    height: 150px;
    background-color: orange;
    border: 1px solid black;
    display:inline-block;
}

Upvotes: 0

Related Questions