ansaurus

Question

How to position this using only CSS and no tables

Answer 1

+1 A:

Layout Gala is a pretty good reference for CSS based layouts.

You might want to take a look at this layout, or possibly this layout since they both look roughly like what you're asking for.

Good luck, and hope this helps some.

Chris 2010-08-03 20:16:17

Wow, nice one. Let me see it in detail.

Yanko Hernández Alvarez 2010-08-03 20:24:27

Answer 2

+3 A:

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.

===

websea 2010-08-03 22:02:08

It was pseudo-html. The periods was to make clear the hierarchical relation of the divs in the diagram.

Yanko Hernández Alvarez 2010-08-04 19:29:26

I tested it and then it hit me!!! I'm so sorry. I meant D1.2 and D1.3 RIGHT aligned. Will fix it now! My bad

Yanko Hernández Alvarez 2010-08-04 19:37:07

I did the obvious thing and separated the styling of D1.1 from the rest of the siblings, and right floated D1.2 and D1.3. but them switched places. How do I fix this without knowing the widths?

Yanko Hernández Alvarez 2010-08-04 19:49:44

In that case, float d1.2 and d1.3 to the right but since order is important, modify your markup as shown below.

websea 2010-08-05 23:12:46

Answer 3

A:

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

#D1\.2 , #D1\.3 {
   float: right;
   padding: 10px; 
}

</style>

</head>
<body>


<div id="D1">
  <div id="D1.1">HeaderText</div>

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

</body>
</html>

websea 2010-08-05 20:32:25

ansaurus

tags:

views:

answers:

How to position this using only CSS and no tables

related questions