div height

#1

I have my whole page in a <table> just to center it.
Now I changed it and used a div instead:

#wrapper {
width:900px;
margin:0 auto 0 auto;
border-left:1px solid;
border-right:1px solid;
background-color:#fff;
}

body has a gray background.
Ommiting div's height makes div having a height of one line thus not
wrapping the whole page.
If I use height:100% the div wraps until the screen height.

How can I wrap the hole page? The page's height varies as it dynamically
get the text from a mysql server.

thanks

PS: my html structure is:
<body>
<div id="wrapper"> My site </div>
</body>

#2

Scripsit Harris Kosmidhs:

Quote:

I have my whole page in a <table> just to center it.
Now I changed it and used a div instead:

Why? It's the idea that matters, not the implementation. What do you plan to
achieve by changing the implementation?

Using modern authoring approaches for _new_ pages. This includes new design,
not just "changing tables to divs", which isn't even always a reasonable
idea in practice.

Quote:

#wrapper {
width:900px;
margin:0 auto 0 auto;
border-left:1px solid;
border-right:1px solid;
background-color:#fff;
}

The idea of 900 pixels wide page is wrong. It's fairly irrelevant how you
try to implement it.

Quote:

Ommiting div's height makes div having a height of one line thus not
wrapping the whole page.

That's a really short page then.

Quote:

PS: my html structure is:

You should have posted a URL, not a snippet of code. You should also explain
what you really want. "Wrapping" is vague word, especially since the problem
_seems_ to be that you want the element _height_ set to something else than
its natural height (dictated by its content).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

#3

Jukka K. Korpela wrote:

Quote:

Scripsit Harris Kosmidhs:

I have my whole page in a <table> just to center it.
Now I changed it and used a div instead:

Why? It's the idea that matters, not the implementation. What do you
plan to achieve by changing the implementation?

The design is a mixed one with divs and tables.
I want to change it to use only divs. That's teh firts step.

Quote:

The idea of 900 pixels wide page is wrong. It's fairly irrelevant how
you try to implement it.

How do you define wrong? It's not liquid? Liquid is ONE design option.
The other is a fixed one.
I have a photo banner which is 900px and I want to define the width of
the design

http://www.blackout.gr/keimena/81

Quote:

You should have posted a URL, not a snippet of code. You should also
explain what you really want. "Wrapping" is vague word, especially since
the problem _seems_ to be that you want the element _height_ set to
something else than its natural height (dictated by its content).

Consider http://www.blackout.gr/teuxh_new.php for an example
The #wrapper div only goes until the screen height. After that you can
see the gray body background.
If I remove height:100% from the #wrapper the div only extends in one line.

#4

Harris Kosmidhs wrote:

Quote:

I have my whole page in a <table> just to center it.
Now I changed it and used a div instead:

#wrapper {
width:900px;
margin:0 auto 0 auto;
border-left:1px solid;
border-right:1px solid;
background-color:#fff;
}

Apply a class to each table setup row.

table {
width : 90%;
margin : 0 auto;
border-left : 1px solid;
border-right : 1px solid;
background-color : #fff;
}
..leftColumn {
width : 15%
background : ...
}
....

<table>
<tr>
<td class="leftColumn"></td>
<td class="centerColumn"></td>
<td class="rightColumn"></td>
</tr>
</table>

Toy with something like this and see how it works for you. You'll have
easier control of the cell and the table width, without having to scroll
up and down your HTML if you decide you don't like the width.

The can also use <table id="wrapper"> or <div id="wrapper" before
<table> if you plan on using other tables.

#5

Johannes Koch wrote:

Quote:

Harris Kosmidhs schrieb:

[wrapper having 'no' height]
PS: my html structure is:
body
div id="wrapper"> My site </div
/body

Floated blocks don't add to the calculation of the wrapper div's height.

Thanks for reminding me this. I knew that I forget something. But how
can you overcome this problem?

If i have a
<div id="#wrapper">
<div>
and here floated divs..
</div>

</div>

will it work?

Thanks

#6

On 2007-03-23, Harris Kosmidhs <hkosmidi (AT) remove (DOT) me.softnet.tuc.gr> wrote:

Quote:

Johannes Koch wrote:
Harris Kosmidhs schrieb:

[wrapper having 'no' height]
PS: my html structure is:
body
div id="wrapper"> My site </div
/body

Floated blocks don't add to the calculation of the wrapper div's height.

Thanks for reminding me this. I knew that I forget something. But how
can you overcome this problem?

Usually with clear. Put another block with clear:both set on it at the
end of the containing block.

Quote:

If i have a
div id="#wrapper"
div
and here floated divs..
/div

/div

will it work?

Thanks

#7

On 23 Mar, 08:54, Harris Kosmidhs <hkosm... (AT) remove (DOT) me.softnet.tuc.gr>
wrote:

Quote:

div id="#wrapper"

#8

Harris Kosmidhs wrote:

Quote:

Johannes Koch wrote:
Harris Kosmidhs schrieb:

[wrapper having 'no' height]
PS: my html structure is:
body
div id="wrapper"> My site </div
/body

Floated blocks don't add to the calculation of the wrapper div's height.

Thanks for reminding me this. I knew that I forget something. But how
can you overcome this problem?

If i have a
div id="#wrapper"
div
and here floated divs..
/div

/div

will it work?

Thanks

If you want a background color in any of your columns and you're not
using an image, the height will not be 100%. If you're not using a
background image but a background color then you should use a table.

You can do some really cool stuff with background images, css and
absolute positioning, but I find it to be more work than it's worth but
if you're willing to invest the time it'll give you what you're looking for.

If my memory serves me correctly, the Adobe website uses a background
image, absolute positioning and floating divs. It's done very well but
it's also very complicated.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

div height

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

div height - 03-22-2007 , 07:50 AM

Re: div height - 03-22-2007 , 08:21 AM

Re: div height - 03-22-2007 , 10:05 AM

Re: div height - 03-22-2007 , 12:31 PM

Re: div height - 03-23-2007 , 04:54 AM

Re: div height - 03-23-2007 , 05:55 AM

Re: div height - 03-23-2007 , 07:10 AM

Re: div height - 03-23-2007 , 11:31 AM