> Is it possible to set this page up so that they two gray boxes (Iron Giant is Good, I Like Ray
Liotta) stretch with the width of the browser window while keeping the same amount of space
inbetween the two boxes *and* so that the two gray lines below "How?s The Weather in Brazil?" and
"Aquaman is Not a Good Superhero" stretch as well with their right edges and the right edge of the
text beginning with "More than 75% . . . " always at the same point of the far right edge of the Ray
Liotta box? Some of this is presenting tabular data so tables are necessary at some point but is
there a way to use less tables than I have now while keeping everything faithful to the mockup? I am
going to try to work out solutions to all this but suggestions are appreciated. Thanks
> based on:
The strategy for doing this in a way that minimizes tables for layout is
1) Learn about multi-column layouts from the 2-col and 3-col pages in
our WIKI. (The WIKI link is at the bottom of ecery positing.) The goal
is to have a content container that has its width expressed as a
percentage of the page width, so it will be flexible
2) Leave the top two boxes (Iron giant, and I like Ray) in tables. You
can learn later how to do them with less markup. When you want to take
that step consult our WIKI for a page about rounded corners.
3) Float those top two tables left within the content container. Give
each of them a width of 50% so they sit side by side. For safety in
browsers which have rounding errors, make one of them width:49%.
4) Clear the float. This is VERY IMPORTANT and is the solution to a
great many of the questions listed here. Again, consult the WIKI, read
Eric's article on containg floats (a) and Big John's clearfix technique (b).
5) Code the orange lines as headings. They are semantically headings,
not just orange text. Style them with a border-bottom, and indent their
text with padding-left.
6) Code the text under the headings as paragraphs, again being
sematically correct. Style the paragraphs to have left and right
padding to produce the indentation you want.
7) Try your hardest to never use SPAN again. It's a very sloppy way of
styling text. Using well structured IDs, classes, and chosing the right
CSS selectors is much cleaner. (Again, class and ID info in the WIKI.)
Accessibility Matters: http://access-matters.com
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/