problem with table in div (faux column template)

[monkeymynd]

hi all,

i'm fairly new to css. i've been playing with a template, and am
having a problem putting a table into a div. the div is the center
column in, what i believe is called, a faux column template.
basically, it seems that the table is 'breaking out' of the div and
setting itself at the bottom of it. i can put text, etc. in the div
without any problem. so far, the table is the only thing messing it
up.

i've tried several suggestions i've found online. tried wrapping it in
another div with several different styles...tried setting the width of
the table to 99% of the containing div, etc. i do not want to position
it absolute, so i'm looking for a solution that avoids that.

any help is greatly appreciated.

css is here : http://www.monkeymynd.com/test/nautica01bug/css/nautica01.css

example html is here : http://www.monkeymynd.com/test/nautica01bug/index.html

thanks in advance for any replies.

 

[John Hosking]

example html is here : http://www.monkeymynd.com/test/nautica01bug/index.html

Consider whether/why you need table { clear:both; }. It makes the table
try to elbow its neighbors out of the way, meaning it moves down so
nothing is left nor right of it.

 

[Jonathan N. Little]

hi all,

i'm fairly new to css. i've been playing with a template, and am
having a problem putting a table into a div. the div is the center
column in, what i believe is called, a faux column template.
basically, it seems that the table is 'breaking out' of the div and
setting itself at the bottom of it. i can put text, etc. in the div
without any problem. so far, the table is the only thing messing it
up.

i've tried several suggestions i've found online. tried wrapping it in
another div with several different styles...tried setting the width of
the table to 99% of the containing div, etc. i do not want to position
it absolute, so i'm looking for a solution that avoids that.

any help is greatly appreciated.

css is here : http://www.monkeymynd.com/test/nautica01bug/css/nautica01.css

example html is here : http://www.monkeymynd.com/test/nautica01bug/index.html

thanks in advance for any replies.

Remove the 'clear:both;' on your table element.


BTW:

Sizing block marking and padding in 'px' is very inflexible. Bump the
text size up a bit and your 'pixel-perfect' layout falls apart.

Why are your using images for simple sans-serif text?

<span>Some text</span><br /> makes no sense, use a block element that
make sense.

<img .. /> <br /><img .. /> <br /><img .. /> <br /><img .. /> <br />

Also also makes no sense, if you want your images to stack in a area
style them as block

..stacked IMG { display: block; }

<div class="stacked">
<img .. /> <img .. /> <img .. /><img .. />
<div>

 

[monkeymynd]

thanks...i appreciate the help. as for the suggestions, it's not my
template, so i haven't had a chance to mess with it yet. just found it
on oswd and it was rated pretty high, so i'd thought i'd give it a
shot. figured it would give me a chance to learn a bit. still, i may
alter it to include some of your tips, as they do make sense.

 

[Andy Dingley]

<span>Some text</span><br /> makes no sense, use a block element that
make sense.

It makes no sense in _this_ case. A <h3>, <h4> or somesuch is an
obviously better choice here.

However

<span>Some text</span><br />

makes perfect sense in many of the more general cases, such as where
it's within a larger block of text. Your posting is potentially
misleading, if read out of context.

 

[Jonathan N. Little]

It makes no sense in _this_ case. A <h3>, <h4> or somesuch is an
obviously better choice here.

However

<span>Some text</span><br />

makes perfect sense in many of the more general cases, such as where
it's within a larger block of text. Your posting is potentially
misleading, if read out of context.

If you use style you have more presentational flexibility:

<span class="properName">The Name</span> more info...

If you want the "properName" displayed on its own line

SPAN.properName { display: block; }

Or if you change your mind and just wish it to be a bit bigger and bold:

SPAN.properName { font-size: 1.2em; font-weight: bold; }

 

[Jukka K. Korpela]

Scripsit Jonathan N. Little:

Andy Dingley wrote: - -

If you use style you have more presentational flexibility:

And less. I'm not sure I see what you are really discussing, and the Subject
line seems to be rather far from it. But if correcting potentially
misleading statements is the theme here, I'll offer my 0.02 euros:

<span class="properName">The Name</span> more info...

If you want the "properName" displayed on its own line

SPAN.properName { display: block; }

Yes, but that corresponds to
<br><span>...</span><br>
and cannot be used if you want the content of the span appear inline, just
followed by a line break. That is, there is no effective way of causing just
one line break in CSS. (Using generated content doesn't count, since it's
not supported by IE.)

 

[Jonathan N. Little]

Scripsit Jonathan N. Little:


And less. I'm not sure I see what you are really discussing, and the
Subject line seems to be rather far from it. But if correcting
potentially misleading statements is the theme here, I'll offer my 0.02
euros:

The subject was a problem with a table, I just also noted other evidence
within source which indicated deficiency in understanding potential of
CSS and markup.

When I see lists of <br>'s between elements usually means the person
does does not understand how to set margins and padding on elements

When I see: <br><inline-element><br><inline-element><br>... usually
means the person does does not understand that they have a list, or that
they could style inline elements as block and get the presentation
effect that they desire or maybe they should be using a block element to
start with.

Yes, but that corresponds to
<br><span>...</span><br>
and cannot be used if you want the content of the span appear inline,
just followed by a line break. That is, there is no effective way of
causing just one line break in CSS. (Using generated content doesn't
count, since it's not supported by IE.)

<br><span>...</span><br> was what I saw in the markup, but yes you are
correct about a single line break in CSS, that is was the generated
content would address. As to IE, as long as MS continues to to put their
fingers in their ears chanting "our way or the highway..." we will
always have to design for with fork! The frustrating bit is that even if
designed "their" way, which version of "their" way since it changes with
each version of IE...