CSS 2 div's varying size 1 with image

Hey guys I'm trying to create something similar to the image below. As you can see I have 2 containers both will be of varying sizes. ({DEPARTMENT OF BUSINESS} {-------}) The left container will have text, and the right container a line image. I basically want the开发者_运维技巧 2 to take up 100% of that space. I think my code should explain what I'm trying to do.

I don't even know if I'm going about this the correct way because even if I use the line as the background image how would I then push it down to make it vertically center? I'm getting no where with margins and padding.

Here's my code:

                    <div id="DepartmentHeader" class="clearfix" style="width: 626px">
                      <div id="DepartmentHeaderText" style="float:left">DEPARTMENT OF BUSINESS</div>
                      <div id="DepartmentHeaderDivider" style="float: left; width: 50%; background: url('images/DepartmentHeaderDividerLine.png') repeat-x;">&nbsp;</div>                   
                    </div>

---

If I understand correctly what you're trying to do you could probably make the image the same height as the DepartmentHeader div with the line in the center, set that as a background image on DepartmentHeader (which would eliminate the need for the DepartmentHeaderDivider div), style the DepartmentHeaderText div with a background color of the rest of the page. As long as you make the DepartmentHeader div 100% of the width and you keep the text for the DepartmentHeaderText div left-aligned you should be good.

---

You only need a single <div> if the right part should only be filled with the background image.

<div id="DepartmentHeader" class="clearfix" style="width: 626px; background: url('images/DepartmentHeaderDividerLine.png') repeat-x left center">
   <h1 class="headerText">DEPARTMENT OF BUSINESS</h1>
</div>

This should align your background image vertically in the center. should now receive the background color of the page, to overlay the background image. Maybe you add some padding for fine tuning.

h1.headerText {
   background: #ffcc33; // use your background-color
   padding: 0 5px;
   margin: 5px; //apply what you need
}

---

Did you try applying style="vertical-align:middle;" to the image?

---

Assuming you want this:

- - - - - - - - - - - - - - - - - - - -
|Text             | |                 |
|                 | |                 |
|                 | |-----------------|
|                 | |                 |
|                 | |                 |
- - - - - - - - - - - - - - - - - - - -

Your HTML/CSS would be:

<div style="overflow: auto;"><!-- overflow to contain floats -->
    <div style="float: left; width: 50%;">text</div>
    <div style="float: left; width: 50%; 
                background: url('line.gif') repeat-x left center"></div>
</div>

Now, the challenge is to make the two divs the same height. A few options:

1 - if the right div's only purpose is to visually put a line in the vertical center of the white space, don't add the second div. Instead put that background in the container div, then give the inner div with your text a background color to mask the line on that half.

2 - use javascript to make the two divs the same height. Grab the height of each, see which is taller, then set the shorter one to the same height.

3 - Use 'display: table' instead with your CSS: http://www.quirksmode.org/css/display.html#table (The usual caveat with that is that IE 7 and below doesn't support it)

---

This can be done with a little CSS Trickery (No Images)

Live Fiddle:

http://jsfiddle.net/Jaybles/zPvv5/

HTML

<div class="container">
    <div class="line"></div>
    <div class="cap">Business Items</div>
</div>


<div class="container">
    <div class="line"></div>
    <div class="cap">Business Items 2</div>
</div>

CSS

.container{
    width:100%;
    height:46px;
    font-size:30pt;
    font-family:verdana;
    margin-bottom:20px;
}
.container .line{
   width:100%;
   border-bottom:3px solid #000;
   height:23px;
   position:absolute;
}
.container .cap{
    position:absolute;
    padding-right:10px;
    background:#fff;
}

---

Have the line stretch all the way across, then cover it up with the text. You can adjust the space with padding on #DepartmentHeaderText. Code below (replacing the colors with real colors, of course):

css:

#DepartmentHeader {
  position: relative;
  border-top: 1px solid border_color;
  background: background_color;
  width: 626px;
}
#DepartmentHeaderText {
  position: relative;
  top: -1px;
  float: left;
  background: background_color;
}

html:

<div id="DepartmentHeader" class="clearfix" style="width: 626px">
  <div id="DepartmentHeaderText" style="float:left">DEPARTMENT OF BUSINESS</div>
</div>