1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Making a div fill all available space

Discussion in 'CSS' started by jimrthy, Aug 28, 2005.

0
  1. #1
    I've found a lot of posts similar to this on other forums, and it looks like the answer boils down to "use javascript." I'm too worn out to mess with that tonight, so I figured I'd try asking here. (I didn't run across anything when I was searching the forums).

    Here's my basic situation:

    <body>
<div id="top_half_of_header">
   <div id="top_left">
      <form>...</form>
   </div>
   <div id="top_right">
      <span>
         <a>blah</a> .
         <a>blah</a> .
         <a>blah</a>
      </span>
   <div>
</div>
...
</body>
    Code (markup):
    Now, the right half div is considerably smaller than the left half div. The "blank" spots are stuck with the body's background-color. For whatever reason, the "top_half_of_header"'s background color isn't having any affect. (Maybe I have some stupid syntax error, but everything validates, and I've had a similar problem in other places, though I've been able to work around it).

    So far, here's what I've tried (as far as I can remember. I wasn't taking notes):

    1) Putting in a 1x1 background image on the containing div and setting it to repeat
    2) Moving the top right div. Relative positioning wouldn't budge it. Absolute would move it, but it still left the blank spots empty.
    3) Setting body & html heights to 100%, the containing div's height to auto, and the top right div's height to both 100% and auto.
    4) Fiddling around with the vertical-align property
    5) Setting various margins to "auto" (not that I expected this to work, but I was getting desperate).
    6) Setting one side or the other (or both) to float

    I can kludge it by hard-coding padding values. I figure that's the way I'll have to go with javascript, but, like I said, I was hoping someone might have some useful advice.

    If anyone wants to see the source code, I'll be happy to share. This is strictly on my development machine at the moment, and I never know from one minute to the next whether my web server will be up and running.

    (BTW, yes, I know there are lots of other problems with it. I can deal with those issues).

    Thanks everyone,
    James
     

    Attached Files:

    jimrthy, Aug 28, 2005 IP
  2. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What css have you applied to the <div>s?

    Assuming you are floating the inner <divs> adding the following should do it: 
    <div id="top_half_of_header">
   <div id="top_left">
      <form>...</form>
   </div>
   <div id="top_right">
      <span>
         <a>blah</a> .
         <a>blah</a> .
         <a>blah</a>
      </span>
   <div>
   [COLOR="Red"]<br style="clear:both;">[/COLOR]
</div>
    Code (markup):
     
    Arnica, Aug 29, 2005 IP
  3. jimrthy

    jimrthy Guest

    Messages:
    283
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks, but that didn't make any difference.

    LikeI said originally, I've tried a *lot* of different styles on this thing. Currently, the CSS looks like:

    html, body {
    height 100%;
    } }
    /* The header's split into 2 pieces. The top portion contains a "search" section and a small navigation menu. The bottom portion holds a logo and what I'm guessing is a banner ad */

    /* Top part of the header. As things stand, I don't think I need to do anything here */
    #header_top { width:100%;
    background-color:#5B8587;
    position:relative;
    /*background-image:url(greenish.ico);
    background-repeat:repeat;*/
    }
    .top_left_half {
    float:left;
    width:50%;
    background-color:#5B8587;
    }
    #search {
    padding:1em;
    }
    .top_right_half {
    background-color:#5B8587;
    /*width:50%;
    position:absolute;
    right:0;
    bottom:0;*/
    /*float:right;*/
    /*vertical-align:bottom;
    margin-top:auto;
    margin-left:auto;*/
    }

    All the stuff I have remarked out is just different things I've tried that didn't work.

    Thanks,
    James
     
    jimrthy, Aug 29, 2005 IP
  4. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi jimrthy

    It looked liked you had ids in your html and classes in your css. The following does what you want.

    <HTML>
<HEAD>
<style type="text/css" >
 
#header_top {
 background-color:#5B8587;
}
.top_left_half {
 float:left;
 width:50%;
}
 
#search {
 padding:1em;
}
.top_right_half {
 float:right;
 clear:none;
 width:50%;
}
</style>
</HEAD>
<body>
<div id="header_top">
  <div class="top_left_half">
      <form id="search"><input type="text">&nbsp;&nbsp;<input type="submit"><br>Some additional text to pad this div out</form>
  </div>
  <div class="top_right_half">
 <span>
         <a>blah</a> .
         <a>blah</a> .
         <a>blah</a>
 </span>
  </div>
<br style="clear:both;">
</div>
...
</body>
</HTML>
    Code (markup):
    All the best

    Mick
     
    Arnica, Aug 29, 2005 IP