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
    New Coder
    Join Date
    Dec 2012
    Location
    Ingerlund
    Posts
    66
    Thanks
    8
    Thanked 4 Times in 4 Posts

    Two floating divs, content in the middle - how to make middle div fill space between?

    Basically, I have two floating divs either side of a central content div. If you can picture a film strip, that's exactly what it is. The website is basically a giant film strip, with the bits with holes either side of the screen and the central picture part taking up all the available space. I've gotten the hole parts on fine - it resizes perfectly as I move the screen (I'd rather not use fixed width as I want this to re-size dynamically using percentages). The only problem I'm having is getting the content div to fill all available space between the hole bits - I'd appreciate any help I can get.

    Here's what the classes are before you look at the code:
    Filmroll - A class to control all the separate film frames at once
    Filmleft - All the holes on the left
    Filmright - All the holes on the right
    Content - The bit in the middle
    Blurbotleft/right - A blur image created in photoshop to add some life to the page and make it look like an actual film reel instead of seeming too clinical.
    div1,div2 etc: Only css on this ID is to change the background color whilst I work on it so I know exactly where one ends and the next begins.

    HTML:

    Code:
    <div class="filmroll" id="div1">
    <div class="filmleft">
    <img class="filmleft" src="filmleft.png"/>
    </div>
    <div class="filmright">
    <img class="filmright" src="filmright.png"/>
    </div>
    
    
    <div id="content">
    <img class="blurbotleft" src="blurbotleft.png"/>
    <img class="blurbotright" src="blurbotleft.png"/>
    <img class="blurtopleft" src="blurbotleft.png"/>
    <img class="blurtopright" src="blurtopright.png"/>
    </div>
    </div>
    CSS

    Code:
    .filmroll{
    height:100%;
    width:100%;
    /* background-image:url("overlay.png");
    background-repeat:no-repeat;
    background-position:center; */
    overflow:hidden;
    position:relative;
    }
    .blurbotleft{
    z-index:2;
    max-height:100%;
    max-width:100%;
    position:absolute;
    bottom:0;
    }
    #content{
    float:right;
    width:100%;
    height:100%;
    }
    .blurbotright{
    z-index:2;
    -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: FlipH;
            -ms-filter: "FlipH";
    max-height:100%;
    max-width:100%;
    position:absolute;
    bottom:0;
    }
    .blurtopleft{
    z-index:2;
    -moz-transform: scaleY(-1);
            -o-transform: scaleY(-1);
            -webkit-transform: scaleY(-1);
            transform: scaleY(-1);
            filter: FlipH;
            -ms-filter: "FlipH";
    max-height:100%;
    max-width:100%;
    position:absolute;
    }
    .blurtopright{
    z-index:2;
    max-height:100%;
    max-width:100%;
    position:absolute;
    }
    #div1{
    background-color:red;
    overflow:hidden;
    }
    #div2{
    background-color:green;
    }
    #div3{
    background-color:yellow;
    }
    #div4{
    background-color:blue;
    }
    .filmright{
    float:right;
    max-width:100%;
    max-height:100%;
    }
    .filmleft{
    float:left;
    max-width:100%;
    max-height:100%;
    }
    So, once more - All I want to know is how to get the middle div (content) to fill all available space between Filmleft and Filmright. Thanks in advance to any help given!

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    This is what I would do. I took out the images because I don't have access to them.

    HTML:
    Code:
    <div class="filmleft">
    	left
    </div>
    <div class="filmright">
    	right
    </div>
    <div id="content">content
    </div>
    CSS (may need to change values):
    Code:
    .filmright{
    float:right;
    width: 25%; /* Fluid width: Change it to whatever you need */
    }
    .filmleft{
    float:left;
    width: 25%; /* Fluid width: Change it to whatever you need */
    }
    #content{
    margin: 0 25%; /* Make left/right margin equal to the previous widths */
    }
    My signature :)

  • #3
    New Coder
    Join Date
    Dec 2012
    Location
    Ingerlund
    Posts
    66
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Thanks. I'll give this a go. I've avoided defining a width in any way for the side divs because they exist only to hold a picture (of the film strip holes), and I was worried defining a specific width, even with percentages, would cause it to distort on certain resolutions. When I said I wanted to re-size dynamically using percentages I was talking about the content div - ideally I just wanted to have the sides float left and right, and have the mid take the available space. This would have allowed everything to scale and re-size in harmony, but I shall try your solution in the absence of my own - thanks again!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello Entity_
    If your sides are only pictures then the div elements aren't really needed. An image can stand on it's own with no containing element - see divitis here.

    I just guessed at some sizes for those images -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	height: 100%;
    	width: 100%;
    	margin: 0;
    }
    #div1 {
    	overflow: hidden;
    	background: #f00;
    }
    	.filmroll {position: relative;}
    .filmleft {float: left;}
    .filmright {float: right;}
    	img {
    		display: block; /*demo only*/
    		background: #ccc; /*demo only*/
    		border: none;
    	}
    #content {
    	height: 600px; /*demo only*/
    	overflow: auto;
    	background: #0f0; /*demo only*/
    }
    </style>
    </head>
    <body>
    	<div class="filmroll" id="div1">
    			<img src="filmleft.png" alt="description" width="200" height="600" class="filmleft">
    			<img class="filmright" alt="description" width="200" height="600" src="filmright.png"/>
    		<div id="content">
    			<!--end content--></div>
    	<!--end .filmroll div1--></div>
    </body>
    </html>
    Based on this example.


    .
    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


  •  

    Tags for this Thread

    Posting Permissions

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