DaniWeb IT Discussion Community

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)

- HTML and CSS (http://www.daniweb.com/forums/forum143.html)

- - <div> height (http://www.daniweb.com/forums/thread121176.html)

andre1011

Apr 27th, 2008 12:20 am

<div> height

I have a <div> that will not extend all the way down the page even with the height set to 100% on the <html> and <body> and the div itself. It will not display correctly in ie7 or firefox.

I have an external style sheet but this is basicly the structure of the page

<html>

<head>

<body>

   <div id="wrapper">

      <div id="colWrapper">

      </div>

   </div>

</body>

</head>

</html>

CSS:

html {height:100%;}

          body{height:100%;}

          #wrapper{height:100%;}

          #colWrapper{height:100%}

I would like any help someone can give me thanks

amigura

Apr 27th, 2008 8:56 am

Re: <div> height

it works ok on ie7 and opera for me. 1 is not a ff user.

<html>

<head>

<style type="text/css">

html {height:100%;}

          body{height:100%;  background:#0066FF}

          #wrapper{height:100%; background:red}

          #colWrapper{height:100%; width:80%; background:yellow}

</style>



</head>                  

<body>

   <div id="wrapper"> wrapper text

      <div id="colWrapper"> colWrapper text

      </div>

   </div>

</body>

</html>

MidiMagic

Apr 28th, 2008 12:31 am

Re: <div> height

Generally you can't control the vertical height of a screen object to match the size of the browser window. This is because there are too many possibilities among different browsers and window sizes.

Div is also very poorly designed and implemented. It generally assumes the height of the tallest object inside it.

andre1011

Apr 29th, 2008 6:25 pm

Re: <div> height

Thanks I got it to work in ie6 still working on firefox

Quote:

Originally Posted by amigura (Post 594122)

it works ok on ie7 and opera for me. 1 is not a ff user.

<html>

<head>

<style type="text/css">

html {height:100%;}

          body{height:100%;  background:#0066FF}

          #wrapper{height:100%; background:red}

          #colWrapper{height:100%; width:80%; background:yellow}

</style>



</head>                  

<body>

   <div id="wrapper"> wrapper text

      <div id="colWrapper"> colWrapper text

      </div>

   </div>

</body>

</html>

All times are GMT -4. The time now is 1:28 am.