Move a fluid div up a row - but not in Dreamweaver

Question

I'm coming from using Dreamweaver, and i would to have 2 fluid divs side by side. In Dreamweaver, you would create the two divs (they would automatically align on top of each other), then you resize them to the grid, and click "move up a row".

Of course, in pure code applications like Brackets there is no visual editor with a button to click "move up a row".

My problem is that when i expand the page, the 2nd div (it doesn't matter about the content, only the second div [out of the two] in the code) will keep moving when the page is resized, as opposed to staying proportional.

Does anyone have any ideas?

Thanks

These are the two divs in quesiton

            <div id="soundcloud" class="fluid">
          <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/2744486&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>
     </div><!-- end soundcloud -->

<div id="content" class="fluid">

    <div id="tabs">
    <!--TABS-->

        <ul>
            <li><a href="#tabs-1">About</a></li>
            <li><a href="#tabs-2">Testemonials</a></li>
            <li><a href="#tabs-3">Contact</a></li>
        </ul>

    <!--TAB CONTENT-->

        <div id="tabs-1">

        </div><!-- END TAB 1-->

        <div id="tabs-2">

        </div><!-- END TAB 2-->

        <div id="tabs-3">

        </div><!-- END TAB 3-->

    </div><!--END TABS-->

</div> <!-- end content -->

Answer 1

Firstly (and I speak from experience), stop using Dreamweaver. WYSIWYG editors do you no favors in terms of web development, and generally lead to unmaintainable, dirty code. You're better off writing HTML/CSS by hand and testing in your target browsers (FireFox, Chrome, IE etc).

Here is some code that will give you two fluid divs, side by side:

HTML

<div class="row">
    <!-- .row > div is applied here because this div is an immediate child of the parent-->
    <div class="first">
        <p>First fluid section</p>
    </div>
    <!-- .row > div is applied here because this div is an immediate child of the parent-->
    <div class="second">
        <p>Second fluid section</p>
    </div>
</div>

CSS

/* Apply this style to the parent div */
.row {
    display: block;
    width: 100%;
}

/* Apply this style to the immediate div children of the parent */
.row > div {
    float: left;
    display: inline-block;
    width: 50%;
}

.first {
    background: #FF0000;
}

.second {
    background: #0000FF;
}

jsFiddle: http://jsfiddle.net/q9JpH/

Make sure you test thoroughly and apply graceful degradation where necessary...compatibility in the browser world is savage!