CODEWITHSUNDEEP
css
user291701
user291701

Reputation: 39691

Have div fill remaining width - mimicking a titlebar?

I'd like to create a layout that acts like a titlebar from iphone: enter image description here

I tried to put together the following example, but I'm not sure how to get the middle column to expand in width so it uses all left over space. I can do this in javascript at runtime, but wondering if there's a css solution. Here it is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>

      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

      <style type="text/css">
        html, body {
          margin: 0px;
          padding: 0px;
        }

        #parent {
          background-color: #eee;
          width: 100%;
        }
        #colLeft {
          background-color: #ff8b8b;
          height: 48px;
          display: inline;
        }
        #colMiddle {
          background-color: #c9ffc3;
          height: 48px;
          display: inline;
          text-align: center;
        }
        #colRight {
          background-color: #c3d0ff;
          height: 48px;
          display: inline;
        }
      </style>

   </head>

   <body>

      <div id="parent" style="width:100%">
          <div id="colLeft">left</div>
          <div id="colMiddle">title</div>
          <div id="colRight">right</div>
      </div>

   </body>
</html>

Thank you

Upvotes: 2

Views: 614

Answers (3)

F&#225;bio Duque Silva
F&#225;bio Duque Silva

Reputation: 2146

I'm a bit late in the answer, but see if this is more like what you need, without the need to sacrifice the middle <div>:

You'll have to float the 3 columns and make the inner column have a 100% width. Then, setting the inner column's margin (based on left and right columns' widths), you achieve the result.

Have a look at this fiddle: http://jsfiddle.net/fabio_silva/d7SFJ/

The HTML/CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>

      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

      <style type="text/css">
        html, body {
          margin: 0px;
          padding: 0px;
        }

        #parent {
          background-color: #eee;
          width: 100%;
        }
        #colLeft {
          background-color: #ff8b8b;
          height: 48px;
          width: 100px;
          float: left;

        }
        #colMiddle {
          height: 48px;
          text-align: center;
          float: left;
          width: 100%;
          margin-left: -100px; /* negative colLeft width */
          margin-right: -150px; /* negative colRight width */
        }
            #colMiddleInner
            {
                margin-left: 100px;
                margin-right: 150px;
                height: 48px;
                background: #c9ffc3;
            }
        #colRight {
          background-color: #c3d0ff;
          height: 48px;
          width: 150px;
          float: left;
        }
      </style>

   </head>

   <body>
      <div id="parent" style="width:100%">
          <div id="colLeft">left</div>
          <div id="colMiddle">
            <div id="colMiddleInner">
              title
            </div>
          </div>
          <div id="colRight">right</div>
      </div>

   </body>
</html>

Upvotes: 1

bobthyasian
bobthyasian

Reputation: 943

You need to define the widths...

    #colLeft {
      background-color: #ff8b8b;
      height: 48px;
      width: 50px
      display: inline;
    }
    #colMiddle {
      background-color: #c9ffc3;
      height: 48px;
      display: inline;
      width: auto;
      text-align: center;
    }
    #colRight {
      background-color: #c3d0ff;
      height: 48px;
      width: 50px;
      display: inline;
    }

Note: default value for width is auto.

Upvotes: -1

Surreal Dreams
Surreal Dreams

Reputation: 26380

A simpler way to approach this is to use an HTML structure like this:

<div id="parent" style="width:100%">
    <div id="colLeft">left</div>
    title
    <div id="colRight">right</div>
<div>

Float the left and right divs to the appropriate sides and set the text align on the parent to center. Any styles from the middle div for text, etc can be applied to the parent.

Upvotes: 1

Related Questions