Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts

    Variable-width div floating left with fixed-width div floating right

    I'm really trying to get this floating thing nailed. I'm trying to have a variable-width div floated left, while on the same line a fixed-width floated right.

    Ultimately, as the main container horizontally collapses, the right div is kicked down to the next line.

    Does anyone have any idea how to keep them on the same plain?

    Here's what I have:
    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
    
        <title>test</title>
        
        <style type="text/css">
    	
    #container {
        width:auto;
        max-width:900px;
        min-width:600px;
        height:600px;
        border: 1px solid #ff0000;
        padding:10px;
        margin: 0px auto;
        overflow:auto;}
        
    #box1 {
        width:64%;
        height:500px;
        border:1px solid #cacaca;
        margin-right:10px;
        float:left; }
        
    #box2 {
        width:310px;
        height:500px;
        border: 1px solid #5882FA;
        float:right; }
    	
        </style>
    
      </head>
      <body>
    <div id="container">
    
    <div id="box1"></div>
    <div id="box2"></div>
    
    </div><!-- end #container -->
      
      </body>
    </html>
    --Kevin

    .
    Last edited by Kevin_M_Schafer; 01-09-2012 at 03:42 PM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Kevin,

    the "trick" is not to float the variable width box.

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>test</title>
        
    <style>
    	
    #container {
        /*width:auto;*/
        max-width:900px;
        min-width:600px;
        /*height:600px;*/
        border:1px solid #f00;
        padding:10px;
        margin:auto;
        overflow:auto;
     }
    #box1 {
        /*width:64%;*/
        height:500px;
        border:1px solid #cacaca;
        /*margin-right:10px;*/
        margin-right:322px;
        /*float:left;*/ 
     }    
    #box2 {
        width:310px;
        height:500px;
        border:1px solid #5882fa;
        float:right; 
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="box2"></div>
    <div id="box1"></div>
    
    </div><!-- end #container -->
      
    </body>
    </html>
    
    Also note that #box2 now comes before #box1 in the html.

    coothead
    Last edited by coothead; 01-09-2012 at 04:12 PM.

  • Users who have thanked coothead for this post:

    Kevin_M_Schafer (01-09-2012)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Kevin_M_Schaffer,
    Like Coot says, not floating that left element will let it take what space is available. It will not let it drop down to the next line like you want, but since #container has a min-width setting that doesn't much matter.

    Some other things he changed are the width and height settings you had on #container. You don't need width: auto; because you are specifying widths with your min/max. Auto is default when you don't specify so it's not even needed then, unless the element is inheriting and you want it to not.

    The height setting you had limits the element to that 600px. You already cleared your floats with overflow: auto; so #container encloses it's contents, a height setting now will just cause trouble later when you increase the size of a float.

    Look how one element can drop here -
    Code:
    <!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="utf-8">
        <title>test</title>
        <style type="text/css">
    #container {
    	max-width: 900px;
    	min-width: 600px;
    	padding: 10px;
    	margin: 0px auto;
    	overflow: auto;
    	border: 1px solid #ff0000;
    }
    #box2 {
    	height: 500px;
    	width: 310px;
    	margin: 0 0 0 10px;
    	float: right;
    	border: 1px solid #5882fa;
    }
    #box1 {
    	height: 500px;
    	min-width: 300px;
    	border: 1px solid #cacaca;
    	background: #0f0;
    	overflow: auto;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="box2"></div>
            <div id="box1"></div>
        <!-- end #container --></div>
    </body>
    </html>
    Last edited by Excavator; 01-09-2012 at 04:36 PM. Reason: made an element drop when #container narrows
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Kevin_M_Schafer (01-09-2012)

  • #4
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    That did it, coothead. Thanks!

    In this instance, I was designing from the left to the right. I see, now, why the fixed div would come first in the html -- designing from the right to the left.

    Thanks also to Excavator for explaining "height:auto" for proper collapsing of the container to allow full view of content.

    You can see how I'm doing here.

    Thanks again. I really appreciate the help.

    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •