CODEWITHSUNDEEP
htmlcsscss-float
Chris Matthews
Chris Matthews

Reputation: 382

Force <div> elements onto 2 lines

First of all, thanks for taking the time to read this.

I've been working with HTML/CSS for as long as I can remember, but I've come across a problem today which has completely stumped me.

I've got a container , which has a certain number (let's say 8) of dynamically created child divs. I want the container to display the children on two rows, even if they overflow horizontally.

For example,

 ____________
|            |
|[1] [3] [5] | [7]
|[2] [4] [6] | [8]
|____________|

Then I'm going to use JS to implement a nice scrolling feature.

However, at the moment, I can only get them to display on one line instead of two, by setting them to: 

display: inline-block;

Or scrolling vertically, by using a pretty standard: 

float: left;

Any advice on this would be very much appreciated!

Chris

Upvotes: 2

Views: 10147

Answers (4)

ramblex
ramblex

Reputation: 3057

If you're looping through the items in order I think it'd be easier to use columns than rows:

http://jsfiddle.net/ePq6n/

then if you want them in a container something like the following:

http://jsfiddle.net/ePq6n/1/

Upvotes: 0

Roman Goyenko
Roman Goyenko

Reputation: 7082

Here is what I did

you can play here ( http://jsfiddle.net/LAymH/2/ )

Works both in IE and FF 

<div class="container">
    <div class="row-container">
        <div class="row">Text1</div>
        <div class="row">Text2</div>
        <div class="row">Text3</div>
        <div class="row">Text4</div>
    </div>

    <div class="breaker"></div>

    <div class="row-container">
        <div class="row">Text1</div>
        <div class="row">Text2</div>
        <div class="row">Text3</div>
        <div class="row">Text4</div>
    </div>
</div>

.row {
    float: left;
    border: 1px solid red;
}
.breaker{
    clear:both;
}
.row-container{
    width: 600px;
}
.container {
    width: 100px;
    overflow-x: scroll;
    border: 1px solid blue;    
}

Upvotes: 0

Litek
Litek

Reputation: 4888

Put your children elements in rows.

.row { height:100px; overflow hidden;} // assuiming 100px is height of a child
.row > .children { height:100px; float:left;}

Upvotes: 3

jmacinnes
jmacinnes

Reputation: 1609

Using the float technique, after the 4th div, place a 5th DIV like so:

   div style="clear: both">

This 5th div does not count towards your 8 content divs.

Upvotes: 0

Related Questions