table to css, fall at first hurdle

[foldface]

This appears with the first div as a small block (desired behaviour),
but with the subsequent element on the next line (undesired behaviour) and the
3rd div ignored (undesired behaviour).
What am I doing wrong?
What I want is to be able to specify an offset of any given size
and also for elements to appear directly below each other, not with a gap


<style type="text/css">
DIV.clearLeft {clear:left; width:16; background-color: #dddddd;}
DIV.left {float:left;}
</style>

<div class="clearLeft"></div>
<div class="left"><input type="submit" value="Ignore"></input></div>
<div clear="clearLeft"></div>
<div class="left"><input type="submit" value="Ignore"></input></div>

 

[Toby A Inkster]

width:16;

16 what? 16 pixels? 16 centimetres? 16 miles? 16 lightyears?

If you just want a small coloured square by your inputs, why not just use
<img/>?

 

[William Tasso]

16 what? 16 pixels? 16 centimetres? 16 miles? 16 lightyears?

biscuits - 16 biscuits. I have my browser default set to chocolate hob-nobs
and get really irritated when authors try to interfere with my preference
;o)

 

[Toby A Inkster]

biscuits - 16 biscuits. I have my browser default set to chocolate hob-nobs
and get really irritated when authors try to interfere with my preference
;o)

You can fit 16 chocolate hobnobs across your screen?

My screen is only about 5.5x4.0 hobnobs.

 

[nice.guy.nige]

You can fit 16 chocolate hobnobs across your screen?

My screen is only about 5.5x4.0 hobnobs.

Screen width is irrelevant. You have no idea how many hobnobs wide the user
has their browser canvas set to.

Cheers,
Nige

--
Nigel Moss.

Email address is not valid. (e-mail address removed). Take the dog out!
http://www.nigenet.org.uk | Boycott E$$O!! http://www.stopesso.com
In the land of the blind, the one-eyed man is very, very busy!

 

[William Tasso]

While the city slept, Toby A Inkster


Screen width is irrelevant. You have no idea how many hobnobs wide
the user has their browser canvas set to.

A valid point and it's also good to remember the principles of flexible
design so that the 16 hobnobs are available without horizontal scrolling no
matter how wide the canvas or even if the visitor is accepting hobnobs -
your visitor may prefer the cheese cracker.

 

[Leif K-Brooks]

A valid point and it's also good to remember the principles of flexible
design so that the 16 hobnobs are available without horizontal scrolling no
matter how wide the canvas or even if the visitor is accepting hobnobs -
your visitor may prefer the cheese cracker.

What about chocolate-hating vegans?

 

[Toby A Inkster]

A valid point and it's also good to remember the principles of flexible
design so that the 16 hobnobs are available without horizontal scrolling no
matter how wide the canvas or even if the visitor is accepting hobnobs -
your visitor may prefer the cheese cracker.

But then the visitor *should* give Cheese Crackers a higher "q" value than
Chocolate Hobnobs in the HTTP Biscuit-Accept header.

 

[Toby A Inkster]

What about chocolate-hating vegans?

Hobnobs are full of butter so they're screwed either way.

 

[Orson]

What I want is to be able to specify an offset of any given size
and also for elements to appear directly below each other, not with a gap

After you have brushed the crumbs from your keyboard you might want to look
at
http://www.alistapart.com/articles/practicalcss/


Orson

 

[Leif K-Brooks]

Hobnobs are full of butter so they're screwed either way.

Gracefully degrade to plain crackers, darn it!

 

[foldface]

After you have brushed the crumbs from your keyboard you might want to look

at
http://www.alistapart.com/articles/practicalcss/

looked at it, doesn't answer this question though

- Even if I place a '&nbsp;' within the clearing div block it doesn't
work
(albeit in a different way, now both empty'ish divs appear to be
clear: both)
- Ignore the pixel issue, I think its the default anyway but its not
relevant to
this cut down example

The questions are:
- Why is the 'float: left' on a different line? 'clear: left' seems to
be acting like 'clear: both'
- I want to start an element at some aritary left position without
using
absolute positioning (because it'll be in some container, probably a
table, but
anyway...) so to do this I was hoping to have an empty div element I
can
set the width on

 

[Toby A Inkster]

16 what? 16 pixels? 16 centimetres? 16 miles? 16 lightyears?

I meant this in all seriousness -- you do need to specify a unit -- not
just "16".

 

[foldface]

This is quite good:
http://www.complexspiral.com/publications/containing-floats/

This is more or less what I was after. I notice that if I replace
'class="space"' with the attributes assigned to it, 'float="left"
width="30px"' it doesn't work, I thought style sheets were only for
seperating presentation
from layout?

<style type="text/css">
DIV.space {float:left; width:30px;}
DIV.clear {clear:right;}
DIV.left {float:left;}
<-- floating elements are visible outside their block, but not if
the
containing block is also floating (as of css 2.0) -->
DIV.block {float:left; width:100%}
</style>

<div class=block>
<div class="space">&nbsp;</div>
<div class="left"><input type="submit" value="Ignore"></input></div>
<div class="left"><input type="submit" value="Ignore"></input></div>
<div class="clear">&nbsp;</div>
</div>
<div class=block>
<div class="left"><input type="submit" value="Ignore"></input></div>
<div class="left"><input type="submit" value="Ignore"></input></div>
<div class="clear">&nbsp;</div>
</div>
<div class=block>
<div class="space">&nbsp;</div>
<div class="left"><input type="submit" value="Ignore"></input></div>
<div class="left"><input type="submit" value="Ignore"></input></div>
<div class="clear">&nbsp;</div>
</div>

 

[foldface]

What I wanted was:

<div class="space" style="width:20px">&nbsp;</div>

I'll stop spamming this newsgroup now!
Sorry for any cross posting that may appear but I'm posting this via google
as my newsgroup options are limited a.t.m.

If theres a better way of doing the user defined space thing then I'd like to
know.

Ta
F

 

[Mark Parnell]

Sometime around 25 Nov 2003 04:29:52 -0800, (e-mail address removed) is
reported to have stated:

I thought style sheets were only for seperating presentation
from layout?

No, separating presentation from *content*. Layout is part of the
presentation.