DIV and CSS question

Jason

unread,

Feb 9, 2003, 5:26:49 PM2/9/03

to

I have two questions regarding the DIV tag and CSS. I am
looking to replace a table using CSS.

1) Can I put two DIV tags side-by-side (2 columns)
without setting one of them to an absolute position? (I
know I can put one div inside the other and float it --
but I would rather not).

2) Can I set a DIV tag to fill in vertically to the
bottom of the window? With the table I could set the row
height to 100% which would fill in to the bottom, but
when I set the DIV tag to 100% it extends beyond the
bottom of the window. I think it is taking the total
height of the window and adding it to the top value.

Cybarber

unread,

Feb 11, 2003, 6:29:25 PM2/11/03

to

You 'd better start reading a introductory book on HTML and CSS (positioning).

1.

A DIV is a block elment by default, contrary to another famous container the span which is inline by default.

So you can't have two (relative positioned) DIV's side by side horizontally

unless

you make them inline.

set display:inline on the two divs and adjust the width (position:relative).

However as you will realise that is rather strang as you then might use ad well two span elements which are already inline.

2. when the DIV is a child of the body element then setting the height to 100% will extend the div to the bottom provided the div has some content (  as a minimum)

"Jason" <dim...@covad.net> schreef in bericht news:01af01c2d08a$56794e90$d4f82ecf@TK2MSFTNGXA11...

1.

A DIV is a block elment by default, contrary to another famous container the span which is inline by default.

So you can't have two (relative positioned) DIV's side by side horizontally

unless

you make them inline.

set display:inline on the two divs and adjust the width (position:relative).

However as you will realise that is rather strang as you then might use ad well two span elements which are already inline.

2. when the DIV is a child of the body element then setting the height to 100% will extend the div to the bottom provided the div has some content (  as a minimum)

"Jason" <dim...@covad.net> schreef in bericht news:01af01c2d08a$56794e90$d4f82ecf@TK2MSFTNGXA11...

Jason

unread,

Feb 18, 2003, 11:30:00 PM2/18/03

to

"You 'd better start reading a introductory book on HTML
and CSS (positioning)."

Thoughtful insight!

I am aware of how the default properties work. Was
wondering if there was something I was missing. Otherwise
I would not be asking the question.

I was hoping to use the two div tags side-by-side
(without using absolute positioning) since that provides
a cleaner look to my html code.

As far as the 100% goes. It only works if the div tag is
the next thing after the body tag. As in

<body>

<div style="height:100%;">
Hello
</div>

</body>

But consider this.

<body>

<p>A header paragraph</p>

<div style="height:100%;">
Hello
</div>

</body>

That causes scrollbars to appear. I would like to avoid
that since the content obviously fits inside the window
with room to spare.

If I have a table set to 100% width and it has two
columns with one column having a set width and the 2nd
column not being set -- the 2nd column will fill the
remaining width of the table.

I am looking for something similiar except I would like
to fill to bottom of the screen. (Guess I COULD use
javascript and calculate it...yuck)

>-----Original Message-----

>.
>

Cybarber

unread,

Feb 20, 2003, 7:00:33 PM2/20/03

to

Looking at your reaction it wont hurt you to get a better understanding of
inline, block, height, width etc.
below is very easy with CSS positioning.
Cybarber

"Jason" <jca...@covad.net> schreef in bericht
news:093f01c2d7cf$90a66020$3001...@phx.gbl...

NTLGuy

unread,

Mar 1, 2003, 4:50:58 AM3/1/03

to

might be wrong but..........in your example the 100% means 100% of the
height of the parent block, i.e. the body. As you already have content in
the body your div will appear below this content and will try and use 100%
even though a percentage has already been used, hence the scrollbars.

> <body>
>
> <p>A header paragraph</p>
>
> <div style="height:100%;">
> Hello
> </div>
>
> </body>
>

Probably reading this totally wrong and look forward to the traditional
flaming arrows of righteousness :))
(Jesting folks !!)

Arnie