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 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Fill the rest of the row in div sequence

    Hey everyone, I'm having some trouble filling the rest of a row with a div. I have several divisions inline with a left and right spacer. The left spacer is a set width. The content divisions have differing widths and may be changed. The right spacer should fill up the rest of the row.

    This does NOT work:
    Code:
    <html>
     <head>
      <style type="text/css">
       div.main {width:80%;background-color:red;}
       div.content {display:inline}
       div#left_spacer {display:inline;width:20px;background-color:blue;}
       div#right_spacer {display:inline;background-color:blue;}
      </style>
     </head>
     <body>
      <div class="main">
       <div id="left_spacer"></div>
       <div class="content">content1</div>
       <div class="content">content2</div>
       <div class="content">content3</div>
       <div id="right_spacer"></div>
       <div class="content_below">This is some more content blah blah blah</div>
      </div>
      <div>This is the rest of the page</div>
     </body
    </html>
    The left spacer in Firefox is not visible (which is what's supposed to happen since inline segments aren't supposed to have width). So that means I have to float the divisions to get the left spacer working.

    This does NOT work:
    Code:
    <html>
     <head>
      <style type="text/css">
       div.main {width:80%;background-color:red;}
       div.content {float:left;}
       div#left_spacer {float:left;width:20px;background-color:blue;}
       div#right_spacer {float:left;background-color:blue;}
      </style>
     </head>
     <body>
      <div class="main">
       <div id="left_spacer">&nbsp;</div>
       <div class="content">content1</div>
       <div class="content">content2</div>
       <div class="content">content3</div>
       <div id="right_spacer">&nbsp;</div>
       <div class="content_below">This is some more content blah blah blah</div>
      </div>
      <div>This is the rest of the page</div>
     </body
    </html>
    The right spacer in this one does not fill up the rest of the row because it is floated inside the content_below division and doesn't fill up the rest of the row. I can't define the width of the right spacer because I don't know what size the content section will be (otherwise I could just fill up the row with width:*px; ). So I try to float the content and left spacer inside the right spacer.

    This does NOT work:
    Code:
    <html>
     <head>
      <style type="text/css">
       div.main {width:80%;background-color:red;}
       div.content {float:left;}
       div#left_spacer {float:left;width:20px;background-color:blue;}
       div#right_spacer {background-color:blue;}
      </style>
     </head>
     <body>
      <div class="main">
       <div id="left_spacer">&nbsp;</div>
       <div class="content">content1</div>
       <div class="content">content2</div>
       <div class="content">content3</div>
       <div id="right_spacer">&nbsp;</div>
       <div class="content_below">This is some more content blah blah blah</div>
      </div>
      <div>This is the rest of the page</div>
     </body
    </html>
    This doesn't work because the left spacer and content divisions are floated inside the right spacer division, so the content takes on the background of the right spacer (not the main division like I want). That means I have to get the content to float in the main division instead of the right spacer.

    Now I'm stuck. How can I get a division to fill the rest of the row without knowing how much row there is left to fill? I've tried using a table, but that still requires me knowing either how wide the content cells are or how wide the right spacer is. I wish I could just say "width: *%;" for the right spacer. I've attached an image showing what the final output should be. Just imagine everywhere I have a background-color, I will have a background image (which is why I can't just put the color in the content backgrounds). I need the background image to flow between the the content and content_below. I would appreciate any help. Thanks!
    Attached Thumbnails Attached Thumbnails Fill the rest of the row in div sequence-filler_example.gif  

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
    <head>
    <title>Fill the rest of the row in div sequence</title>
    <style type="text/css">
    #main {
    	width: 80%;
    	background-color: red;
    }
    #left_spacer {
    	float: left;
    	width: 20px;
    	background-color: blue;
    	border: 5px solid orange;
    }
    .content {
    	float: left;
    	background: red;
    	border: 5px solid black;
    }
    #content_last {
    	_margin-right: -3px; /* IE6 correction for 3px gap */
    }
    #right_spacer {
    	overflow: hidden;
    	background-color: blue;
    	border: 5px solid orange;
    	_zoom: 1; /* IE6 hasLayout trigger for overflow: hidden; simulation */
    }
    #content_below {
    	border: 5px solid green;
    	background: pink;
    	clear: both;
    }
    </style>
    </head>
    <body>
      <div class="main">
        <div id="left_spacer">&nbsp;</div>
        <div class="content">content1</div>
        <div class="content">content2</div>
        <div class="content" id="content_last">content3</div>
        <div id="right_spacer">&nbsp;</div>
        <div id="content_below">This is some more content blah blah blah</div>
      </div>
      <div>This is the rest of the page</div>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    It works!

    Hey thanks a lot koyama! It got it working! (just a note to whoever uses the above code: the #main qualifier should be .main) Thanks again.


  •  

    Posting Permissions

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