CSS: How to position child divs in main div side by side

Question

i have one main div and main div has multiple child div. i am not being able to position child divs one after one.

i want each div should have same height & same back color. first two div should have float:left and last one should have float:right. i did that but still not getting right output.

here is small code snippet

<div id="content">
    <div id="recinfo">Records 1/5 of 50</div>
    <div id='pager'>
        <ul class="paginate pag5 clearfix">
            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a></li>
            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">next</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">1</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">2</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">3</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">4</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">5</a></li>
            <li class="current">6</li>
            <li class="navpage"><a href="">next</a></li>
            <li class="navpage"><a href="">last</a></li>
        </ul>
    </div>

    <div id='loader'>Loading.....<img src="images/busy.gif" /></div>
</div>

my css code is huge and that is why i am not pasting it here rather giving here my js fiddle link https://jsfiddle.net/tridip/t55azjpk/. so any people can see what kind of weird output i am getting. looking for suggestion and rectified code sample. thanks

edit

output would like something like image.

Answer 1

You can achieve this layout with CSS flexbox.

Here's a general solution:

HTML

<div id="content">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

CSS

#content { display: flex; }
#content > div:nth-child(2) { flex: 1; }

DEMO

---

Benefits of flexbox:

1. minimal code; very efficient
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. it's responsive
6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

---

To learn more about flexbox visit:

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS-Tricks
• What the Flexbox?! ~ YouTube video tutorial