Home/ Questions/Q 9009963
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T02:20:08+00:00

I’d like to create a layout that acts like a titlebar from iphone: I

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0