CSS layout dilemma

[Dave Smey]

Hello,

I'm hoping someone can help with a CSS layout problem that I keep running
into. I want to make a series of vertically stacked boxes of fixed width
but flexible length. Inside the box are two columns, again with fixed width
but flexible length.

I've even made a dopey diagram to help you visualize...
http://www.davesmey.com/example.jpg

Here is my CSS

#eventbox {width: 575px; background-color: #FFFFFF; border-width: 2px;
border-top-style: solid; clear: left;}
#infobox {width: 340px; float: left; background-color: #FFFFFF;
padding-left:10px; padding-right:10px; padding-top: 10px}
#photobox {width: 205px; float: right; background-color: #FFFFFF;
padding-right:10px;}

And each box is basically

<div id="eventbox">
<div id="infobox">
<!-- infobox content -->
</div>
<div id="photobox">
<!-- an image, a caption -->
</div>
</div>

Works with IE, but not completely with Firefox - the white background does
not fill in the blank spaces around infobox and photobox. I always end up
solving the problem by enclosing everything in a bigger box.

Why doesn't it work with Firefox? Am I doing it wrong or is Firefox wrong?

Thanks,
Dave Smey
Brooklyn, NY

 

[Jedi Fans]

#eventbox {width: 575px; background-color: #FFFFFF; border-width: 2px;
border-top-style: solid; clear: left;}
#infobox {width: 340px; float: left; background-color: #FFFFFF;
padding-left:10px; padding-right:10px; padding-top: 10px}
#photobox {width: 205px; float: right; background-color: #FFFFFF;
padding-right:10px;}

Works with IE, but not completely with Firefox - the white background does
not fill in the blank spaces around infobox and photobox. I always end up
solving the problem by enclosing everything in a bigger box.

Why doesn't it work with Firefox? Am I doing it wrong or is Firefox wrong?

well if you float both things, there is literally no content in the
eventbox hence it collapses, take float off of photobox n see if that works

 

[David Dorward]

Works with IE, but not completely with Firefox - the white background [of
the element containing only floated boxes] does not fill in the blank
spaces around infobox and photobox. I always end up solving the problem
by enclosing everything in a bigger box.

Why doesn't it work with Firefox? Am I doing it wrong or is Firefox
wrong?

http://www.complexspiral.com/publications/containing-floats/

 

[Barbara de Zoete]

I want to make a series of vertically stacked boxes of fixed width
but flexible length. Inside the box are two columns, again with fixed width
but flexible length.

I've even made a dopey diagram to help you visualize...
http://www.davesmey.com/example.jpg

Here is my CSS

#eventbox {width: 575px; background-color: #FFFFFF; border-width: 2px;
border-top-style: solid; clear: left;}
#infobox {width: 340px; float: left; background-color: #FFFFFF;
padding-left:10px; padding-right:10px; padding-top: 10px}
#photobox {width: 205px; float: right; background-color: #FFFFFF;
padding-right:10px;}

And each box is basically

<div id="eventbox">
<div id="infobox">
<!-- infobox content -->
</div>
<div id="photobox">
<!-- an image, a caption -->
</div>
</div>

Know what? This might actually be a table. A two-column table with information
on the left and an image on the right. I am tempted to advise you to mark it up
as a table. Use css to align and do or don't do borders et cetera. Problem
solved.




--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Jedi Fans]

Know what? This might actually be a table. A two-column table with
information on the left and an image on the right. I am tempted to
advise you to mark it up as a table. Use css to align and do or don't
do borders et cetera. Problem solved.

incorrect usage of a table... shouldnt be used for layout purposes

 

[Els]

incorrect usage of a table... shouldnt be used for layout purposes

A table is always used for a layout.
A correctly used html table is used to layout information with some
sort of correlation between the different columns/rows.
I think that the correlation between a photo and the information about
that photo is a good cause for the use of an html table.

 

[Barbara de Zoete]

incorrect usage of a table... shouldnt be used for layout purposes

No, it's not. What is OP trying to achieve?

,-------------------------.--------------.
| info and description | image |
|-------------------------|--------------|
| the information on the | [alt text] |
| first image | |
|-------------------------|--------------|
| the information on the | [alt text] |
| second image | |
|-------------------------|--------------|
| the information on the | [alt text] |
| third image | |
`-------------------------'--------------'

And so on. I see a table emerging here. Build it properly (including the summary
attribute and using the table head element and teble body et cetera), hide the
thead with css. Shape the rest. Bingo.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[rf]

incorrect usage of a table... shouldnt be used for layout purposes

I too think this may be "tabular" data.

Each row is a place I have been.

The first column is the description of that place.

The second column is an image of that place.

Perhaps a third column may be the URL of the pension I stayed at at that
place.

I for one am getting sick of the bloody purist attitude of the "dont use
tables" regime.

Clearly the OP is having problems with *not* using tables. The data is,
questionably, tabular.

Give the OP the benifit of doubt to give tables a go. If/when the OP reports
back we can then make a decision and in the meantime the OP may have learned
something.

Don't simply state, without any idea of the OPs situation, "dont use
tables".

 

[Neredbojias]

With neither quill nor qualm, Dave Smey quothed:

Hello,

I'm hoping someone can help with a CSS layout problem that I keep running
into. I want to make a series of vertically stacked boxes of fixed width
but flexible length. Inside the box are two columns, again with fixed width
but flexible length.

Nothing new to add - just my 2 cents. David Dormand's reference looks
to be most elegant and what I would try first, but considering variable
browser ccs-support, tables are probably more practical.

 

[Eirik Eldorsen]

IE and Firefox does not render DIVs with width the same way.

Put this in the top of your html file to fix this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

This will force the browsers to behave more alike.

 

[Dave Smey]

http://www.complexspiral.com/publications/containing-floats/

Great. Thanks to all for the swift and passionate responses. The doc above
would have me insert something like this
<div class="clearer">&nbsp;</div> to fill out the containing box.

In a way I guess that's what I did, except I enclosed everything in a
"bigbox" div and I happen to have something at the bottom that will fill it
out. The "itembox" (now relegated to a middle layer) remains hollow.

It also explains why FireFox's "malfunction" is actually correct.

It seems true that a table in this case might be very elegant. If I get
sufficiently embarrased by my three layers of boxes within boxes maybe I'll
rewrite it that way.

Thanks all for the information. Layout with CSS is tough to get the hang
of!

-Dave Smey
Brooklyn, NY
www.davesmey.com (music theory freeware for PC)

 

[Jedi Fans]

I too think this may be "tabular" data.

Each row is a place I have been.

The first column is the description of that place.

The second column is an image of that place.

Perhaps a third column may be the URL of the pension I stayed at at that
place.

I for one am getting sick of the bloody purist attitude of the "dont use
tables" regime.

Clearly the OP is having problems with *not* using tables. The data is,
questionably, tabular.

Give the OP the benifit of doubt to give tables a go. If/when the OP reports
back we can then make a decision and in the meantime the OP may have learned
something.

Don't simply state, without any idea of the OPs situation, "dont use
tables".

fair enough but correct your sig delimiter plz it should be "-- " not "--"

 

[Jedi Fans]

IE and Firefox does not render DIVs with width the same way.

Put this in the top of your html file to fix this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

This will force the browsers to behave more alike.

Technically a strict doctype would be better

 

[David Dorward]

Nothing new to add - just my 2 cents. David Dormand's reference looks
to be most elegant and what I would try first, but considering variable
browser ccs-support, tables are probably more practical.

Browser support for CSS is more than sufficient for a simple two column
layout. There is no need to abuse tables in that way.

 

[David Dorward]

A correctly used html table is used to layout information with some
sort of correlation between the different columns/rows.

No. It is used to describe the relationship between bits of data. That
graphical browsers represent it with that layout is simply because it is a
sensible way to represent such data visually. Not all browsers are
graphical.

 

[Els]

No. It is used to describe the relationship between bits of data. That
graphical browsers represent it with that layout is simply because it is a
sensible way to represent such data visually. Not all browsers are
graphical.

Apart from the word correlation where I actually meant relationship,
are you saying that an html table in a non-graphical browser (do you
mean like Lynx?) isn't presented in a visual way?

Hmm.. visual, graphic...
Starting to think you're talking about a browser even less graphical
than Lynx. Am I misunderstanding something?

 

[dorayme]

Hello,

I'm hoping someone can help with a CSS layout problem that I keep running
into. I want to make a series of vertically stacked boxes of fixed width
but flexible length. Inside the box are two columns, again with fixed width
but flexible length.

I've even made a dopey diagram to help you visualize...
http://www.davesmey.com/example.jpg

Here is my CSS
snip

Boy o boy, if you are in some hurry, just use tables ... If you are very
hurried, don't stop to listen too carefully to the arguments about the very
correct use of tables. Be a devil. But be a good one and use some css to
style the tables nicely.

dorayme

 

[David Dorward]

Apart from the word correlation where I actually meant relationship,
are you saying that an html table in a non-graphical browser (do you
mean like Lynx?) isn't presented in a visual way?

Starting to think you're talking about a browser even less graphical
than Lynx.

Try the aural side of JAWS or IBM Homepage Reader.

 

[Els]

Try the aural side of JAWS or IBM Homepage Reader.

Okay, got your point.
But... even with JAWS, the table is layed out in my mind ;-)

 

[Neredbojias]

With neither quill nor qualm, David Dorward quothed:

Browser support for CSS is more than sufficient for a simple two column
layout. There is no need to abuse tables in that way.

According to this very newsgroup, IE sometimes has trouble with floats
(-as it does with just about half of html in general.)