Hi charro2000-ga,
The resolution to your question simply requires a change to the
containing elements for those two segments of text. Since the <div>
element is meant to consume an entire row, I have changed the code you
provided to use another table containing one row and two cells. Within
each of the cells, you can set a property which correctly aligns each
of the segments of text.
The adjusted code is provided below:
<HTML>
<BODY>
<div id="container" style="width:100%;">
<table style="width: 100%; border: 0px solid;">
<tr>
<td align=left>Select all columns</td>
<td align=right>Number of Pages...1 2 3</td>
</tr>
</table>
<table style="width: 100%; border: 1px solid;">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>ColumnN</th>
</tr>
<tr>
<td>Data column 1</td>
<td>DATA column 2</td>
<td>Data COLUMN 3</td>
</tr>
</table>
</div>
</BODY>
</HTML>
If you have any questions or concerns regarding the answer provided
above, please don't hesitate to ask for a clarification.
Cheers,
answerguru-ga |
Request for Answer Clarification by
charro2000-ga
on
21 Nov 2005 16:02 PST
Hi answerguru-ga,
Actually, that was the code I had before starting to work with DIVs
and before posting to google answers. I wanted to get away from tables
and set the alignment without them.
Is there another way to do it?
|
Clarification of Answer by
answerguru-ga
on
21 Nov 2005 18:16 PST
Hi again,
The <div> element is meant to DIVide sections of a document, so it
would be counter-intuitive to try and squash two <div>'s into a single
line. The implementation of a table to perform the behavior is a best
practice for this situation.
I'm curious to know why you don't want to use a table to obtain this behavior?
As far as I know, there isn't a dramatically different way to achieve
this result (HTML is a fairly simplistic markup language).
answerguru-ga
|
Request for Answer Clarification by
charro2000-ga
on
21 Nov 2005 19:13 PST
Well I wanted to not rely on tables and just use them for tabular data
and use CSS techniques to arrange the layout. Mind you, that will be
coming from a CSS purist (I'm not but I read from some).
I also wanted to see how CSS has help solved these kinds of problems.
One good example I read was on
http://www.alistapart.com/articles/practicalcss/ but I failed to apply
it to my situation.
Wouldn't the property "display: inline;" help for this situation? With
my example I was close, I just couldn't make the text to show on one
line.
I can very easily go back and set my layout with tables, I just
thought it was time to do it in a more "modern" way.
I'm not saying that your answer is wrong, I want to fix my DIVs
instead of replacing them with a table (or something similar to a DIV
if at all possible).
I can live with your answer but I didn't get the clarification I
wanted. So when I read "don't use tables for layout!" can I say that
CSS is still not complete?
|
Clarification of Answer by
answerguru-ga
on
21 Nov 2005 20:06 PST
Now that you expose that example I completely see where you're coming
from on this. I dug a little deeper and I was able to do as you
requested.
Put the following in style.css:
div.row span.left {
float: left;
text-align: left;
font-weight: bold;
width: 49%;
}
div.row span.right {
float: right;
text-align: right;
font-weight: bold;
width: 49%;
}
Now put this in your html file (which is in the same folder as the CSS):
<html>
<body>
<link REL=StyleSheet HREF="style.css" TYPE="text/css">
<div id="container" style="width:100%;">
<div class="row">
<span class="left">Select all columns</span>
<span class="right">Number of Pages...1 2 3</span>
<table style="width: 100%; border: 1px solid;">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>ColumnN</th>
</tr>
<tr>
<td>Data column 1</td>
<td>DATA column 2</td>
<td>Data COLUMN 3</td>
</tr>
</table>
</div>
</div>
</body>
</html>
As you can see above, we are taking a few extra steps:
1. Seperating the CSS from the HTML and referencing it using a <link>
2. Defining span left and right behavior for a single div row
3. Using these spans in the html to produce the desired effect
I believe that does answer your question, but if you still have any
questions or clarifications please don't hesitate to ask :)
Cheers,
answerguru-ga
|
Request for Answer Clarification by
charro2000-ga
on
21 Nov 2005 23:41 PST
Hi answerguru-ga,
Yes! That's what I had in mind. Before we close this issue, I just
want your opinion on one last thing:
The solution worked on IE but failed on Firefox. To make it work on
Firefox y added the following:
- To the css file(similar to the article above):
div.spacer {
clear: both;
height: 0px;
}
- The HTML file now looks like this (added more header information to
test it at http://validator.w3.org/ &
http://jigsaw.w3.org/css-validator/):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>CSS Test</title>
<style type="text/css" media="all">@import "./style.css";</style>
</head>
<body>
<div id="container" style="width:100%;">
<div class="row">
<span class="left">Select all columns</span>
<span class="right">Number of Pages...1 2 3</span>
</div>
<div class="spacer"> </div>
<table style="width: 100%; border: 1px solid;">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>ColumnN</th>
</tr>
<tr>
<td>Data column 1</td>
<td>DATA column 2</td>
<td>Data COLUMN 3</td>
</tr>
</table>
</div>
</body>
</html>
The thing is that there is still a difference on how each browser
interprets it (Although it passed both validations). This version in
Mozilla shows fine, on IE it puts a blank line between the "div.row"
and the table. If I remove the "spacer" it completely breaks it on
Firefox.
Could there be a way to accomodate both browsers?
Probably by setting a 1px image or something like a negative border (I
thought I read it somewhere)? Currently I'm working on php, so maybe
adding a browser check before putting in the "spacer". Although this
is just hacking it to make it compatible and might be another google
question in itself.
Thanks!
|
Clarification of Answer by
answerguru-ga
on
22 Nov 2005 00:18 PST
The idea of putting the spacer in the document conditionally based on
the browser type is the best approach in my opinion. I would certainly
endorse investigating that avenue further.
The mini-image and negative border approaches have their own down
sides when it comes to page loading and browser interpretation. Since
you're using PHP, your code is going to be pre-processed anyways so
whatever hits the browser is going to be correct if you do the browser
check and use the spacer.
answerguru-ga
|
