CODEWITHSUNDEEP
csscss-float
user915308
user915308

Reputation: 161

float div within container div

I'd like to float "three" so it appears underneath "two" when the browser window gets resized. Currently "three" appears under "one"

<style type="text/css">
#container  {width:700px;}
.col        { float: left; margin: 0px 16px 0px 0px; padding: 0px; height: auto;}
.two        { width: 192px; background-color:ccc; }
.four       { width: 400px; background-color:ccc; }
</style>



<div id="container" >
    <div class="col two" style="background-color:green;" >
    one
    </div>

    <div  class="col">

        <div class="col four" style="background-color:blue;" >
        two
        </div>
        <div class="col two" style="background-color:red;"> 
        three
        </div>

    </div>
</div>

Upvotes: 1

Views: 273

Answers (1)

Neograph734
Neograph734

Reputation: 1754

You can do so by applying a margin-left to the parent container. The 'col' wrapping two and three

UPDATE: Make sure the margin is at least the width of the first column, otherwise it will still not work

Upvotes: 1

Related Questions