Div with 70% Height

@scottyrobJun 17.2007

Hi,
Im trying to make the middle part of this site have a ~~[url]~~http://www.srobinson.net/expdes/[/url] with a 70% height so it is “liquid”. I tried setting it to 70% but nothing happened there

Any ideas?
Scott

to post a comment

CSS

13 Comments(s) _↴

@WebJoelJun 17.2007 — #...Im trying to make the middle part of this site have a http://www.srobinson.net/expdes/ with [B]a 70% height [/B]so it is "liquid"...[/QUOTE] huh? Don't you mean [B]width[/B]?

That would be the navigation drop-down? What is the width of that currently? If you state the width of the DIV that contains this (let's say, "70%;") and add "margin:0 auto;", it (DIV and it's contents) will be centered in the page. This may not be what you are after for 800x600 res. but for anything larger, being left-aligned looks lopsided.

To keep your text and your validation img's and browsers-of-choice images from 'wrapping' when the screen-width is minimized, add this:

<div class="left" [B]style="white-space:nowrap;[/B]">

<div class="footer" [B]style="white-space:nowrap;[/B]">

to the classes "left" and "footer".

These suggestions would make the page 're-size' cleanly to some degree.

@scottyrobauthorJun 17.2007 — #Thanks for the reply,

I meant the area between the blue bar and the bottom green bar. Id like to set the height of that to 70%. I tried setting height: 70% but that did nothing...

Any ideas? Ill work on the navbar after the content area though!

Fet

@WebJoelJun 18.2007 — #Thanks for the reply,

I meant the area between the blue bar and the bottom green bar. Id like to set the height of that to 70%. I tried setting height: 70% but that did nothing...

Any ideas? Ill work on the navbar after the content area though!

Fet[/QUOTE] If the 70% area of height is content, it is wiser to make the top part have a fixed height, and the 70% area be "height:auto;" to accomodate content, expand if necessary. Limiting to 70% of the visitor's monitor setting is debilitating and you're sure to cut-off your content with no scrollbars to reveal it.

I can't see your javascript in action in my offline editor... I must have the path incorrect. Where in your server are the *js files located? (Need 'absolute path' to make this work offline).

@WebJoelJun 18.2007 — #Try this with "height:auto;"

Need to get that drop-down 'centered' though...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Loddon District Explorer Scouts</title>

<link rel="stylesheet" type="text/css" href="http://www.srobinson.net/expdes/default.css" media="screen" />

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<base href="http://www.srobinson.net/expdes/">

</head>

<body>

<div>

<div class="top">

<div class="header">
 
   <div class="left" style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;Loddon District Explorer Scouts</div>
 
  </div>

</div>

<div class="container">

<div class="navigation">
   <div><noscript><a href="http://www.milonic.com/">DHTML Menu By Milonic JavaScript</a></noscript> 
   <script type="text/javascript" src="milonic_src.js"></script> 
   <script type="text/javascript" src="mmenudom.js"></script> 
   <!-- The next file contains your menu data, links and menu structure etc -->
 
   <script type="text/javascript" src="menu_data.js"></script></div>
  </div>
 
  <div class="main" style="height:auto;">
   <div class="clearer" style="padding:20px 15px; background-color:#ececec;"><span></span>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.

Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,

volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac

dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.

Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla

mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum

metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor

lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan

turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.

Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar

purus, vel hendrerit ipsum tellus at ante.</p>

 </div>
 
  </div>
 
  <div class="footer" style="white-space:nowrap;"><br/>

<a href="http://validator.w3.org/check?uri=referer"><img class="a" src="http://www.srobinson.net/expdes/img/logo-w3c-html.png" alt="This site is W3C XHTML 1.0 Strict Compliant"/></a>

<a href="http://jigsaw.w3.org/css-validator/check/referer"><img class="a" src="http://www.srobinson.net/expdes/img/logo-w3c-css.png" alt="This page is W3C CSS Compliant"/></a>

<a href="http://www.opera.com"><img class="a" src="img/logo-opera.png" alt="Opera Web Browser"/></a>

<a href="http://www.mozilla.com/firefox"><img class="a" src="http://www.srobinson.net/expdes/img/logo-firefox.png" alt="Firefox Web Browser"/></a>

<a href="http://fedora.redhat.com"><img class="a" src="img/logo-fedora.png" alt="Fedora Core Linux"/></a><br />

<cite>This page designed and written by <a href="http://timstamp.co.uk">Tim Stamp</a> and <a href="http://srobinson.net" class="style1">Scott Robinson</a> © 2007 -- All Rights Reserved</cite>

</p></a> </div>

</div>

</div>

</body>

</html>[/QUOTE]
Note how the content area (lorem ipsum dolar) re-sizes when you reduce window width.

@scottyrobauthorJun 18.2007 — #Hi,

Thanks very much for that ? One problem with that is the bottom bar would move for each page as i would have different amounts of content. Any way to fix the bottom bar?

Thanks very much

Scott

@WebJoelJun 18.2007 — #Okay, -this looks very good in Firefox. In IE, I can't seem to figure out why the 'white' isn't expanding to 100% of the available height using the tricks that ordinarily work for "height:100%;". I think it is in "#main" because adding a height:foo; to #main busts it, removing it relegates to the external CSS for it (which I have NOT examined).

-This is closer, -maybe someone else can figure out what is missing here.

I show no errors or warnings at this point at validation with TIDY.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Loddon District Explorer Scouts</title>

<link rel="stylesheet" type="text/css" href=

"http://www.srobinson.net/expdes/default.css" media="screen" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<base href="http://www.srobinson.net/expdes/" />

<style type="text/css">

html, body {height:101%; background-color:#fff;}

* {padding:0; margin:0;}

</style>

</head>

<body>

<div style="height:101%;">

<div>

<div class="header">

<div class="left" style="white-space:nowrap;">

   Loddon District Explorer Scouts</div>

</div>

<div class="container">

<div class="navigation">

<div><noscript><a href="http://www.milonic.com/">DHTML Menu By

Milonic JavaScript</a></noscript> <script type="text/javascript"

src="milonic_src.js">

</script> <script type="text/javascript" src="mmenudom.js">

</script>



<script type="text/javascript" src="menu_data.js">

</script></div>

</div>

<div class="main" style=

"padding:20px 15px 30px 15px; margin-top:5px; background-color:#fff; border:10px solid #ececec; height:58%;">

<h1>Header First Level</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Suspendisse egestas ultricies pede. Phasellus suscipit blandit

risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu,

pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue

tempus. Nulla accumsan turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi

lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam

tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien

pulvinar purus, vel hendrerit ipsum tellus at ante.</p>

<h2>Header Second Level</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi

lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam

tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien

pulvinar purus, vel hendrerit ipsum tellus at ante.</p>

</div>

<div class="footer" style=

"white-space:nowrap; position:relative; width:100%; margin:10px auto; padding-top:16px;">

<a href="http://validator.w3.org/check?uri=referer"><img class="a"

src="http://www.srobinson.net/expdes/img/logo-w3c-html.png" alt=

"This site is W3C XHTML 1.0 Strict Compliant" /></a> <a href=

"http://jigsaw.w3.org/css-validator/check/referer"><img class="a"

src="http://www.srobinson.net/expdes/img/logo-w3c-css.png" alt=

"This page is W3C CSS Compliant" /></a> <a href=

"http://www.opera.com"><img class="a" src="img/logo-opera.png" alt=

"Opera Web Browser" /></a> <a href=

"http://www.mozilla.com/firefox"><img class="a" src=

"http://www.srobinson.net/expdes/img/logo-firefox.png" alt=

"Firefox Web Browser" /></a> <a href=

"http://fedora.redhat.com"><img class="a" src="img/logo-fedora.png"

alt="Fedora Core Linux" /></a><br />

<cite>This page designed and written by <a href=

"http://timstamp.co.uk">Tim Stamp</a> and <a href=

"http://srobinson.net" class="style1">Scott Robinson</a> © 2007 --

All Rights Reserved</cite><br />

<br /></div>

</div>

</div>

</div>

</body>

</html>[/QUOTE]

@scottyrobauthorJun 20.2007 — #Hi,

Thanks for your help! I was hoping i could keep the footer fixed however. if i have more content on one page than on the other then the footer would move. I was thinking of a scroolable inner div, but the main page itself not to scrool

Scott

@WebJoelJun 21.2007 — #I think I know what you're asking, yes, these are create-able. I can look at this again tomorrow.... getting late. ?

@HazardTWJun 21.2007 — #This may not be relevant but I notice you have a height set for .main in your css file and an inline height of that div set to auto.

If you set a height on your .main element and set it's overflow to auto it should not get any taller if you have more content than can be displayed, the .main div would have scrollbars for just itself, not the body.

@scottyrobauthorJun 22.2007 — #I think I know what you're asking, yes, these are create-able. I can look at this again tomorrow.... getting late. ?[/QUOTE]

Thanks very much. Look forward to hearing a response.

Scott

@scottyrobauthorJun 28.2007 — #Anyone be able to help me out with this one?

Scott

@WebJoelJun 28.2007 — #This one is kicking my butt! :eek: I can get a gooter to stay-at-bottom always, but it gets occluded with the center content under some circumstances when manually re-sizing.

I did a frames-like version (not frames and not height-with-overflow, but behaved like FRAME layout) but wasn't liking the code-bloat I created...

Essentially, a 'relative-positioned' wrapper with a padding-bottom greater than the height of the footer, and [I]absolute[/I]-position a footer at the [I]bottom and left[/I] of the relative-positioned wrapper. -This should work. re-sizing should not affect the content to overlap the footer. Getting the wrapper to remain "height:100%;" should work if the CSS states "body, html {height:100%;}"... but I keep getting unexpected returns. When I get this workable for IE (the problem-child IE6), something then 'busts' over on Firefox! ?

I have done this before but something keep messing-up. Maybe I can't see the trees through the forest...

The closest I have come to solving this was similar to a Stu Nicholls' approach, here:

http://www.cssplay.co.uk/layouts/fixit.html

which looks alot like my 'nearly FRAMES but not FRAMES' version... ?

@scottyrobauthorJun 28.2007 — #Ooooo thats exactly what i wanted! Just the way youve done it on stu's site

Scott

Also in #CSS _↴

IE6 height problem columns in navigation - need help forcing new column OR alternative method HELP trying to change content area background color with a background image in CSS HE

Success!

Help @scottyrob spread the word by sharing this article on Twitter...

Tweet This

Div with 70% Height

13 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Div with 70% Height

13 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #CSS _↴