Maximize a Floating Div

Maximize a floating div?

Here's a solution (inverted, right is fixed 200px) for you using position:absolute.

Here's a solution where the left is fixed 200px.

The method: you basically fix the left "sidebar" and add a margin to the right flexible column which is equivalent to the sidebar's width.

The code looks like this:

.left {
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    background-color: #999;
}
.right {
    min-height: 100px;
    background-color: #666;
    margin-left: 200px; /* Same as left's width */
}

They both work in IE6 as is.

How to maximize a floating div width when one div is removed or hidden?

Well, it should work actually.

Try to add a callback function to .toggle() where you animate/remove the margin from your content, like:

$(document).ready(function() {
  $('a#side-toggle').click(function() {
    $('#sidebar').toggle(400, function(){
        $('.page-content').animate({marginLeft: '0'}, 1000);
    });

    return false;
 });
});

working example: http://jsbin.com/eqiyu/edit

updated version from Reigel: [jsbin.com/eqiyu/2][2]

[2]: http:// jsbin.com/eqiyu/2

Expand div to max width when float:left is set

Hope I've understood you correctly, take a look at this: http://jsfiddle.net/EAEKc/

<!DOCTYPE html><html lang="en">
<head>  <meta charset="UTF-8" />  <title>Content with Menu</title>  <style>    .content .left {      float: left;      width: 100px;      background-color: green;    }        .content .right {      margin-left: 100px;      background-color: red;    }  </style></head>
<body>  <div class="content">    <div class="left">      <p>Hi, Flo!</p>    </div>    <div class="right">      <p>is</p>      <p>this</p>      <p>what</p>      <p>you are looking for?</p>    </div>  </div></body>
</html>

Expand a div to fill the remaining width

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.

Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

Demos:

Fixed Left: http://jsfiddle.net/A8zLY/5/
Fixed Right: http://jsfiddle.net/A8zLY/2/

div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
}

<div>Tree</div>
<div class="second">View</div>

div in front off margin of another div, floating divs

Use position: absolute; for labelwrapper class.

* {    box-sizing: border-box;}html, body {    margin: 0px;    padding: 0px;    font-family: Geneva, sans-serif;    font-size: 13pt;}.registerwrapper {    border: 1px black solid;    height: auto !important;    width: 600px;    display: block;    padding: 10px;    margin: 50px auto;}.labelwrapper {position: absolute;   border: 1px red solid;   float: left;   display: block;   z-index: 100;}.inputwrapper {    border: 1px blue solid;    margin-left: 220px;    float: left;    display: block;    z-index: 1;}.row {    border: blueviolet 1px solid;    position: relative;    padding: 3px;    width: auto!important;    display: block;    overflow: auto;    }.row:after {    content: "";    clear: both;    display: block;}

<html>
    <head>        <title></title>        <link rel="stylesheet" href="css/layout_register.css" />            </head>    <body>
    </body>                    <div class="registerwrapper">                <form action="" method="post">                        <div class="row">                            <div class="labelwrapper"><label for="username">Username:</label></div>                            <div class="inputwrapper"><input type="text" name="username" id="username" value="" autocomplete="off" /></div>                        </div>                        <div class="row">                            <div class="labelwrapper"><label for="password">Choose a password:</label></div>                            <div class="inputwrapper"><input type="password" name="password" id="password"  /></div>                        </div>                            <div class="row">                            <div class="labelwrapper"><label for="password_again">Enter your password again:</label></div>                            <div class="inputwrapper"><input type="password" name="password_again" id="password_again"  /></div>                        </div>                        <div class="row">                            <div class="labelwrapper"><label for="name">Name:</label></div>                            <div class="inputwrapper"><input type="text" name="name" id="name" value="" autocomplete="off" /></div>                        </div>                        <div class="row">                            <div class="inputwrapper"><input type="submit" value="Register" /></div>                        </div>                             </form>        </div>    </body></html>

Gap between two divs with floated items

If you put a 1px border around the top nav and the bottom, you can see that the missing area is caused by the top div not filling 100% of the height of the parent.

By removing the style that sets the <div class="info"> to inline-block, you will remove this small space.

header div.top-nav div.info {
    background-color: #f1f1f1;
    width: 100%;
    /* display: inline-block; */
}

/* header div.nav {    background-color: #fff;} */
header div.top-nav {    overflow: hidden;    border: solid 1px;}
header div.top-nav div.info {    background-color: #f1f1f1;    width: 100%;    /* display: inline-block; */}
header div.info div.contact {    float: left;}
header div.top-nav div.contact a {    padding: 3px 16px;    display: inline-block;}
header div.info div.social {    float: right;}
header div.top-nav div.social a {    color: #333;}
header div.top-nav div.social a i {    padding: 8px 16px;}
header div.top-nav div.social a i:hover {    color: #6b6b6b;    transition: 0.5s;}
.nav {border: solid 1px;}header div.nav div.brand {    float: left;}
header div.nav div.links {    float: right;}
header div.nav div.brand a {    display: block;    color: #f07e0b;    text-align: center;    padding: 14px 16px;    text-decoration: none;}
header div.nav div.brand a:hover {    display: block;    color: #ffc863;    text-align: center;    padding: 14px 16px;    text-decoration: none;}
ul {    list-style-type: none;    margin: 0;    padding: 0;    overflow: hidden;
}
li {    float: left;}
li a {    display: block;    color: #333;    text-align: center;    padding: 14px 16px;    text-decoration: none;}
li a:hover {    background-color: #111;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script><link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
 <header>  <div class="top-nav">            <div class="info">                <div class="container">                    <div class="contact">                        <a>hello@arriveradio.com</a>                    </div>                    <div class="social">                        <a href="https://twitter.com/radioarrive"><i class="fa fa-twitter-square"></i></a>                    </div>                </div>            </div>        </div>          <div class="nav">            <div class="container">                <div class="brand">                    <a>ArriveRadio</a>                </div>                <div class="links">                    <ul>                        <li><a href="#">Home</a></li>                        <li><a href="#">News</a></li>                        <li><a href="#">Contact</a></li>                        <li><a href="#">About</a></li>                    </ul>                </div>            </div>        </div>  </header>

right div must have a maximum height of the left div?

If javascript is a possibility, You could use the following css:

.left, .right {
    padding:1%;
}
.left {
    background: #ddd;
    float:left;
    width:73%;
}
.right {
    width: 23%;
    background: #bbb;
    overflow: hidden;
}

and javascript (with jquery):

jQuery(function($){

    function resizeRight(){
        $('.right').height( $('.left').height() );
    };

    resizeRight();

    // let's ensure the sizes stay in sync if the user resizes their window
    $(window).resize( function() {
        resizeRight();
    });

});

Here's a fiddle with the example: http://jsfiddle.net/nr4zrcjw/1/

Plain Javascript Version

If you don't jquery for anything else, don't include it just for this. Instead you can use this script:

var resizeRight = function resizeRight(){
    var r = document.getElementById('right-col')
    var l = document.getElementById('left-col')

    r.style.height = l.offsetHeight + 'px';
    console.log( l.style.paddingTop );

}

var addEvent = function(elem, type, eventHandle) {
    if (elem == null || typeof(elem) == 'undefined') return;
    if ( elem.addEventListener ) {
        elem.addEventListener( type, eventHandle, false );
    } else if ( elem.attachEvent ) {
        elem.attachEvent( "on" + type, eventHandle );
    } else {
        elem["on"+type]=eventHandle;
    }
};
addEvent(window,'resize',resizeRight);

resizeRight();

Seen here; http://jsfiddle.net/g689bupe/1/

Maximize a Floating Div