CSS Center 100% stretch vertical layout

  • redgtsviper
  • Novice
  • Novice
  • redgtsviper
  • Posts: 19

Post 3+ Months Ago

I am trying to create a centered container tag that sctretched 100% vertical.

Here what I have currently (not workin)
http://www.dieselinteractive.com/samplecss/sample1.php


Here is what I want it to look like
http://www.dieselinteractive.com/samplecss/sample2.php

XHTML Code: [ Select ]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
   margin: 0px;
}
#content {
   height: 100%;
   width: 800px;
   margin-right: auto;
   margin-left: auto;
   background-color: #00CCFF;
}
-->
</style>
</head>
 
<body>
<div id="content">Content for  id "content" Goes Here</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9.    margin: 0px;
  10. }
  11. #content {
  12.    height: 100%;
  13.    width: 800px;
  14.    margin-right: auto;
  15.    margin-left: auto;
  16.    background-color: #00CCFF;
  17. }
  18. -->
  19. </style>
  20. </head>
  21.  
  22. <body>
  23. <div id="content">Content for  id "content" Goes Here</div>
  24. </body>
  25. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Change:
Code: [ Select ]
body {
margin: 0px;
}
  1. body {
  2. margin: 0px;
  3. }

to:
Code: [ Select ]
html, body {
margin: 0px;
height: 100%;
padding:0;
}
  1. html, body {
  2. margin: 0px;
  3. height: 100%;
  4. padding:0;
  5. }

and you'll be good to go!

Also, you may want to change:
Code: [ Select ]
margin-right: auto;
margin-left: auto;
  1. margin-right: auto;
  2. margin-left: auto;

to:
Code: [ Select ]
margin: 0px auto;

Just to save yourself a line. But that isn't necessary to get it to work.
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

I got this to work on one of my pages and through research on google, it said that 100% height can not be obtained by simply setting the height of a container to 100% as it has nothing to take 100% of. I had to set the specified container and all elements it was in to height 100% so each step down it could take 100% of it based on the style of my design. It is a work in progress and not posted here.

Just keep in mind that a container can't take 100% of nothing :)
  • redgtsviper
  • Novice
  • Novice
  • redgtsviper
  • Posts: 19

Post 3+ Months Ago

I still can not get this to work. Below is my code

http://dieselinteractive.com/new/SAMPLE.htm



XHTML Code: [ Select ]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
 
html, body {
margin: 0px;
height: 100%;
padding:0;
}
 
#container {
   width: 775px;
   margin: 0px auto;
   background-color: #0099FF;
}
-->
</style>
</head>
 
<body>
<div id="container">Content for  id "container" Goes Here</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8.  
  9. html, body {
  10. margin: 0px;
  11. height: 100%;
  12. padding:0;
  13. }
  14.  
  15. #container {
  16.    width: 775px;
  17.    margin: 0px auto;
  18.    background-color: #0099FF;
  19. }
  20. -->
  21. </style>
  22. </head>
  23.  
  24. <body>
  25. <div id="container">Content for  id "container" Goes Here</div>
  26. </body>
  27. </html>
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

Try adding in #container: height: 100%;

that way you are saying take 100% height of the body then it should work, i think.
  • Mr Steadfast
  • Novice
  • Novice
  • User avatar
  • Posts: 34

Post 3+ Months Ago

Try

Code: [ Select ]

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {
margin: 0px;
height: 100%;
padding:0;
text-align: center;
}

#container {
width: 775px;
margin: 0px auto;
background-color: #0099FF;
text-align: left;
}

-->

</style>
</head>
<body>
<div id="container">Content for id "container" Goes Here</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. html, body {
  9. margin: 0px;
  10. height: 100%;
  11. padding:0;
  12. text-align: center;
  13. }
  14. #container {
  15. width: 775px;
  16. margin: 0px auto;
  17. background-color: #0099FF;
  18. text-align: left;
  19. }
  20. -->
  21. </style>
  22. </head>
  23. <body>
  24. <div id="container">Content for id "container" Goes Here</div>
  25. </body>
  26. </html>



You need to fill the container with content in order for it to fill up the page.
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

Let us know which works if any :)

More then willing to help after you test ...
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

As kbergmann said, you need to add the 100% height attribute to your container div - when I told you to add it to html body, I did not mean remove it from your container.

Your code should read:
Code: [ Select ]
<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Untitled Document</title>
 <style type="text/css">
  <!--
  html, body {
   margin: 0px;
   height: 100%;
   padding:0;
  }
  #container {
   height: 100%;
   width: 775px;
   margin: 0px auto;
   background-color: #0099FF;
  }
  -->
 </style>
</head>
<body>
 <div id="container">Content for id "container" Goes Here</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.  <title>Untitled Document</title>
  6.  <style type="text/css">
  7.   <!--
  8.   html, body {
  9.    margin: 0px;
  10.    height: 100%;
  11.    padding:0;
  12.   }
  13.   #container {
  14.    height: 100%;
  15.    width: 775px;
  16.    margin: 0px auto;
  17.    background-color: #0099FF;
  18.   }
  19.   -->
  20.  </style>
  21. </head>
  22. <body>
  23.  <div id="container">Content for id "container" Goes Here</div>
  24. </body>
  25. </html>
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

Hey redgtsviper,

If you could, let us know when you try that out and if it worked.

Thanks.
  • cerf
  • Born
  • Born
  • cerf
  • Posts: 1

Post 3+ Months Ago

Hello there guys!

It's really dissapointing to see how some people won't even say thanks after being helped.

But I am just here to say THANK YOU for helping me solve a problem of years. I really didn't pay enough attention as I could go quirk mode and sort it out but now that I might be back into web desing i wanna do thngs right!

Rock on, dudes!

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 42 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.