Irish SEO,  Marketing & Webmaster Discussion

 

Scaling Divs (simply 2 rows)

This is a discussion on Scaling Divs (simply 2 rows) within the Coding Help forums, part of the Webmaster Help category; I know this is possible, but it is driving me mad. For example's sake, I have just 2 divs inside ...


Go Back   Irish SEO, Marketing & Webmaster Discussion > Webmaster Help > Coding Help

Register Forum Rules FAQDonate Calendar Search Today's Posts Mark Forums Read

  #1 (permalink)  
Old 17-07-2008, 02:25 PM
Coder
 
Join Date: Apr 2008
Posts: 57
Nominated 0 Times in 0 Posts
TOTW/F/M Award(s): 0
jason will become famous soon enough
Default Scaling Divs (simply 2 rows)

I know this is possible, but it is driving me mad.

For example's sake, I have just 2 divs inside the body tag of a page.

Both divs are to scale the full width of the body

The first div is just 100px heigh

The second div is to be placed underneath and consumes the remaining height of the body.

So basically we have 2 rows, a) is 100px heigh, and b) is (body_height - 100px).

Do I have to resort to using Javascript to get this working cross browser? or will CSS suffice?

Can anyone offer a code example that works cross browser? I have looked for this online, but can't find exactly what I'm looking for.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #2 (permalink)  
Old 17-07-2008, 02:34 PM
Coder
 
Join Date: Apr 2008
Posts: 57
Nominated 0 Times in 0 Posts
TOTW/F/M Award(s): 0
jason will become famous soon enough
Default

OK I think I got it working. Using absolute positioning of div B, seems to be working in FF3 and IE6 anyway.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3 (permalink)  
Old 17-07-2008, 03:43 PM
louie's Avatar
Senior Member
 
Join Date: Jan 2006
Location: Dublin, Ireland
Posts: 2,204
Nominated 6 Times in 4 Posts
Nominated TOTW/F/M Award(s): 1
louie has much to be proud oflouie has much to be proud oflouie has much to be proud oflouie has much to be proud oflouie has much to be proud oflouie has much to be proud oflouie has much to be proud oflouie has much to be proud of
Send a message via Yahoo to louie Send a message via Skype™ to louie
Default

when you work with div height is very difficult to get it right due to user screen resolution and size.
Best is to probably go for the "min-height" value in your css.
__________________
:. Web Design & Development Web Design Ireland
:. Search Engines Optimization Search Engines Optimization
:. Car Parts & Accessories Car Parts
:. Cars Ireland Cars Ireland
:. I Have 2 Find It Directory SEF Directory
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4 (permalink)  
Old 17-07-2008, 04:20 PM
ghost's Avatar
Wannabe Geek
 
Join Date: Dec 2007
Location: Ennis
Posts: 189
Nominated 0 Times in 0 Posts
TOTW/F/M Award(s): 0
ghost will become famous soon enough
Default important

This one has wrecked my head a few times
My currant method which works on most browsers is to set the div hight to

HTML Code:
min-height:450px ; height:auto !important ; height:450px
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5 (permalink)  
Old 17-07-2008, 11:55 PM
Dotwebs's Avatar
Coder
 
Join Date: Jul 2008
Location: Dublin (Sort of)
Posts: 97
Nominated 0 Times in 0 Posts
TOTW/F/M Award(s): 0
Dotwebs will become famous soon enough
Send a message via Skype™ to Dotwebs
Default

This should work:

HTML Code:
<div style="width:100%; height:100px; overflow:hidden;"></div>
<div style="width:100%; height:auto; float:left; clear:left;"></div> 
If you don't want to risk truncating content in the top div then change 'overflow' to 'scroll'.

Use this handy service to test your code for cross-browser compatibility: Test your web design in different browsers - Browsershots
__________________
The cure for boredom is curiosity. There is no cure for curiosity - Dorothy Parker
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
divs, rows, scaling, simply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Similar Threads

Thread Thread Starter Forum Replies Last Post
Divs in Wordpress paul Blogs & Blogging 2 16-05-2007 10:35 PM
CSS & Divs Problem ziycon Coding Help 2 15-03-2007 04:25 PM
Divs, tables and design ph3n0m Webmaster Discussion 9 01-04-2006 08:34 PM


Sponsored links

Pepperjam Network
Paid On Results www.zanox.com


All times are GMT +1. The time now is 02:08 PM.


Powered by: vBulletin Version 3.8.2, Copyright ©2000 - 2009, Jelsoft Enterprises Limited.
Hosted in Ireland by Blacknight - Test your ISP |Irish Hosting Directory| Armchair.ie|Logo by Eden Web Design|Avatars by Afterglow |Latest Blog Entries | VPS HostingAd Management by RedTyger

Search Engine Friendly URLs by vBSEO 3.3.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51