Question

I want to position this HTML snippet

<div id="D1">
  <div id="D1.1">HeaderText</div>
  <div id="D1.2"> From
    <input id="from" name="from" value=""/>
  </div>
  <div id="D1.3"> To
    <input id="To" name="To" value=""/>
  </div>
</div>

this way

+-(D1)-------------------------------------------------------------------------+
|+-(D1.1)---------------------------++-(D1.2)-------------++-(D1.3)-----------+|
||                                  ||    +-(from)-------+||  +-(to)---------+||
|| HeaderText                       ||From|              |||To|              |||
||                                  ||    +--------------+||  +--------------+||
|+----------------------------------++--------------------++------------------+|
+------------------------------------------------------------------------------+

using CSS

Things I need:

• D1.1 must be left aligned and D1.2 y D1.3 must take only the space they need and must be right aligned.
• Even though I represented here the width of D1.1 to take all the remaining horizontal space, it’s not required to do that.
• D1 should grow vertically to contain D1.1, D1.2, D1.3 completely. (No overflow, all divs completely visible)
• The design must be fluid (i.e. if I change the font sizes of the text inside the divs, the layout adjust itself accordingly.

Is it possible to do all of this using only CSS and no tables? How?

Answer 1

Yanko,

Your ID names have periods in them and that’ll be a problem in CSS since period is reserved. Best thing is to not use reserved characters in names but if you must have them, then you have to escape the periods with a backward slash. Markup can stay as is.

Here is the CSS:

#D1 {
  background-color: gold;
  padding: 10px;
  overflow: auto;
}
#D1\.1 , #D1\.2 , #D1\.3 {
   float: left;
   padding: 10px; 
}

If you need help understanding overflow property, here’s a tutorial that discusses it.

===