CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

problems with the height of div element

Discuss problems with the height of div element in the CSS Help forum on Dev Shed.
problems with the height of div element Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Page 1 of 2 1 2 >
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old June 6th, 2004, 05:21 AM
olaf's Avatar
olaf olaf is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2004
Location: Netherlands
Posts: 310 olaf User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 16 m 13 sec
Reputation Power: 5
problems with the height of div element
Hallo,

I want to place a div-element in my page. This element holds other div's (with table’s, images ...).

Placing the different elements is no problem but the "dynamic" height based on different amount of content gives me a problem. Anyone with a suggestion?

this is my style def.:
#main {
position:absolute;
left:50%;
top:10px;
width:760px;
height:100%;
margin-left:-380px;
border: 1px solid #3300FF;
}
__________________
Greetz...
Olaf

Web Development Blog|...some free php classes...
Reply With Quote
  #2  
Old June 7th, 2004, 09:05 AM
stinkoman's Avatar
stinkoman stinkoman is offline
what's your moniker?
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Location: Highland Park, NJ
Posts: 201 stinkoman User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 6
Send a message via AIM to stinkoman
Quote:
Originally Posted by olaf
Hallo,

I want to place a div-element in my page. This element holds other div's (with table’s, images ...).

Placing the different elements is no problem but the "dynamic" height based on different amount of content gives me a problem. Anyone with a suggestion?

this is my style def.:
#main {
position:absolute;
left:50%;
top:10px;
width:760px;
height:100%;
margin-left:-380px;
border: 1px solid #3300FF;
}


what happens if you just don't have a height attribute?
-Greg
__________________
new jersey web design
Reply With Quote
  #3  
Old June 17th, 2004, 05:50 AM
olaf's Avatar
olaf olaf is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2004
Location: Netherlands
Posts: 310 olaf User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 16 m 13 sec
Reputation Power: 5
Hallo,

Sorry that i answer so late... (forgot to subscribe to this thread)

I fixed my problem allready with a relative postion:

check www.finalwebsites.com

But i have another problem with centering in both directions.

Is it possible to do this without absolute postion?
Reply With Quote
  #4  
Old June 17th, 2004, 01:49 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,659 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 3 Days 11 h 50 m 18 sec
Reputation Power: 687
See my vertical centering demo. Vertical centering is problematic in CSS. This hybrid method seems a reasonable solution.

cheers,

gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.
Reply With Quote
  #5  
Old June 17th, 2004, 04:00 PM
olaf's Avatar
olaf olaf is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2004
Location: Netherlands
Posts: 310 olaf User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 16 m 13 sec
Reputation Power: 5
But you use a table...

Is there someone with a tableless solution?
Reply With Quote
  #6  
Old June 18th, 2004, 01:40 AM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,659 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 3 Days 11 h 50 m 18 sec
Reputation Power: 687
Quote:
Originally Posted by olaf
But you use a table...

Is there someone with a tableless solution?
Yes, yes I do. CSS offers no method of centering vertically. There are some messy work-arounds such as
Code:
top: 50%;
margin-top: -xxpx /*where xx is ½ the element height*/
As you can see, it doesn't allow for undefined element height. My example is more tolerant. The use of a single celled table to take advantage of td's default valign="middle" seems a reasonable and clean method. Were there a better, tableless method, I would use it.

gary
Reply With Quote
  #7  
Old June 18th, 2004, 02:14 AM
olaf's Avatar
olaf olaf is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2004
Location: Netherlands
Posts: 310 olaf User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 16 m 13 sec
Reputation Power: 5
OK, but will this work with "position:relative" ?
Reply With Quote
  #8  
Old June 18th, 2004, 04:26 AM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,659 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 3 Days 11 h 50 m 18 sec
Reputation Power: 687
Quote:
OK, but will this work with "position:relative" ?
Try it and see.

gary
Reply With Quote
  #9  
Old June 18th, 2004, 05:05 AM
olaf's Avatar
olaf olaf is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2004
Location: Netherlands
Posts: 310 olaf User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 16 m 13 sec
Reputation Power: 5
Hallo,

I think you suggest not the same what i want to resolve...

Check www.berg-trampoline.com

This page is centered but the absolute positioned layer are partely hidden on smaller screens.
Reply With Quote
  #10  
Old June 18th, 2004, 01:46 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,659 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 3 Days 11 h 50 m 18 sec
Reputation Power: 687
Code:
	position:absolute;
	left:50%;
	top:50%;
	width:800px;
	height:600px;
	margin:-300px 0 0 -400px;
	border: 1px solid #009966;
}
The problem lies not in the AP, but the messy method of centering. If a negative margin pulls an element beyond the edge of the viewport, that part is lost.

cheers,

gary
Reply With Quote
  #11  
Old June 18th, 2004, 03:36 PM
olaf's Avatar
olaf olaf is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2004
Location: Netherlands
Posts: 310 olaf User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 16 m 13 sec
Reputation Power: 5
That's funny this layout is based on the export of macromedia flash.
What's is better method?
Reply With Quote
  #12  
Old June 18th, 2004, 05:16 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,659 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 3 Days 11 h 50 m 18 sec
Reputation Power: 687
Quote:
Originally Posted by olaf
That's funny this layout is based on the export of macromedia flash.
What's is better method?

The method used in my demo. For horizontal centering alone, see my horizontal centering demo. It even includes a hack for IE in quirks mode. In a nutshell,
Code:
margin: 0 auto;


gary
Reply With Quote
  #13  
Old June 19th, 2004, 04:12 AM
olaf's Avatar
olaf olaf is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2004
Location: Netherlands
Posts: 310 olaf User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 16 m 13 sec
Reputation Power: 5
Yes, i do it the same on other pages but i want to center vertical and horizontal (without tables)
Reply With Quote
  #14  
Old June 19th, 2004, 12:52 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,659 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 3 Days 11 h 50 m 18 sec
Reputation Power: 687
Good luck. Right now, there is no CSS way to center vertically in the general case. How many ways must you be told?

gary
Reply With Quote
  #15  
Old June 19th, 2004, 01:31 PM