Geek asks and answers

Divide the divisions into left and right (for example, on the facebook timeline)

I am trying to do something similar to facebook timeline here, but for some reason I cannot get it. Why does my right div only follow after it has been bottom left. I want them to start working in the same place, exactly the same as on the facebook timeline.

I made a fiddle for you, so you can understand my problem: http://jsfiddle.net/FHR3q/

Also, what would be the best way to add some kind of separator between them, like a string.

+3
source share
3 answers

Write like this:

<div class="block leftt"></div>
<div class="block right"></div>
<div class="block left"></div>
<div class="block right"></div>

check out http://jsfiddle.net/FHR3q/6/

UPDATED

, nth-child :

http://jsfiddle.net/FHR3q/15/

http://jsfiddle.net/FHR3q/16/

+3

, div ,

http://jsfiddle.net/FHR3q/9/

, clear

0

If you change the display order of the html divs in

<div class="content">
<div class="timeline">
    <div class="block left">
        <h1>Hello, my name is Steve1.</h1><br />
        <h2>Hello, my name is Steve.</h2><br />
        <h3>Hello, my name is Steve.</h3><br />
        <h4>Hello, my name is Steve.</h4><br />
        <h5>Hello, my name is Steve.</h5><br />
        <h6>Hello, my name is Steve.</h6>
    </div>
            <div class="block right">
        <h1>Hello, my name is Steve3.</h1><br />
        <h2>Hello, my name is Steve.</h2><br />
        <h3>Hello, my name is Steve.</h3><br />
        <h4>Hello, my name is Steve.</h4><br />
        <h5>Hello, my name is Steve.</h5><br />
        <h6>Hello, my name is Steve.</h6>
    </div>
    <div class="block left">
        <h1>Hello, my name is Steve2.</h1><br />
        <h2>Hello, my name is Steve.</h2><br />
        <h3>Hello, my name is Steve.</h3><br />
        <h4>Hello, my name is Steve.</h4><br />
        <h5>Hello, my name is Steve.</h5><br />
        <h6>Hello, my name is Steve.</h6>
    </div>

    <div class="block right">
        <h1>Hello, my name is Steve4.</h1><br />
        <h2>Hello, my name is Steve.</h2><br />
        <h3>Hello, my name is Steve.</h3><br />
        <h4>Hello, my name is Steve.</h4><br />
        <h5>Hello, my name is Steve.</h5><br />
        <h6>Hello, my name is Steve.</h6>
    </div>
</div>

0
source

More articles:


All Articles