Reputation: 239

Full screen site in CSS/HTML

I've been working on a website design for a chat site, but every attempt I make to get it right has failed so far. I have tried to do it with tables, it always failed in one browser (Mostly IE tho), divs, and a lot more.

The website has to be fullscreen, with a min-width of 900 and a min-height:500px so it won't get any smaller. I want to do this without any javascript (I have made it in JS, but this needs to be done without it :< )

Here is a picture of what it should look like.

I hope this is possible in pure CSS/HTML

Thanks in advance

EDIT

I got it working in Firefox + Chrome, but IE decides to not follow any rule...

<html>
 <head>
 <style type="text/css">
  body{
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
  }
 </style>
 </head>
 <body>

 <div style="height: 100%; width: 100%;">
  <div style="position: relative; height: 100%; width: 100%; background-color: gray; min-width: 900px; min-height: 500px;">
   <div style="position: absolute; height: 30px;left:0px; right: 300px ; background-color: yellow; bottom: 0;">
    Input
   </div>

   <div style="position: absolute; height: 200px; width:300px; right: 0px;  background-color: green; bottom: 0;">
    ad
   </div>

   <div style="position: absolute; bottom: 200px; width:300px; right: 0px; top: 20px;  background-color: blue;">
    online
   </div>
   <div style="position: absolute; width:300px; right: 0px; top: 0px; height: 20px;  background-color: red;">
    online menu
   </div>
   <div style="position: absolute; right: 300px; top: 0px; left: 0px; height: 20px;  background-color: yellow;">
    tabs
   </div>
  </div>
 </div>
 </body>

</html>

Upvotes: 5

Answers (3)

Yoshiyahu

Reputation: 2148

Normally, I don't like using tables, but the auto height issue makes me turn to this...

Works with IE8, probably doesn't work on IE6, though... Nothing really works with IE6, so no worries.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Untitled</title>
    <style type="text/css">

html, body {width: 100%; height: 100%; margin: 0 0 0 0; padding: 0 0 0 0; }
table#content {min-width: 900px; min-height: 500px; width: 100%; height: 100%; border-collapse: collapse; }
table#content td {border: 1px solid black; }
table#content td.topLeft {height: 30px; }
table#content td.topRight {width: 300px; height: 30px; }
table#content td.bottomLeft {height: 30px; }
table#content td.bottomRight {width: 300px; height: 200px; }
table#content tr.spacing {height: 170px; }

    </style>
  </head>
  <body>
    <table id="content">
      <tr>
        <td class="topLeft">Top Left</td>
        <td class="topRight">Top Right</td>
      </tr>
      <tr>
        <td class="centerLeft" rowspan="2">Center Left</td>
        <td class="centerRight">Center Right</td>
      </tr>
      <tr class="spacing">
        <td class="bottomRight" rowspan="2">Bottom Right</td>
      </tr>
      <tr>
        <td class="bottomLeft">Bottom Left</td>
      </tr>
    </table>
  </body>
</html>

Upvotes: 0

Chris

Reputation: 9

This is actually an extremely complex question. I'm not entirely sure it's possible to do with purely CSS and no javascript/jQuery.

The way the box models are set up now just doesn't lend itself well to full width, full height layouts.

Upvotes: 0

Qix - MONICA WAS MISTREATED

Reputation: 15093

Alright, a few questions were extracted from your question;

First off, a little tip: CSS in IE seems to be extremely different in most cases than other browsers. For this, use one of the various "IE Hack" symbols (I use the # symbol) in front of a property for it to only apply to IE.

For example:

html
{
   background: #F00 ;
   #background: #0F0 !important ;
}

will make all browsers show a red background, and only IE will have a green background.

Second, why not use the min-width and min-height properties? They are compatible with everything (and buggy in IE6 or earlier; check out here for more info) and always do the trick with me. Set the width and height (obviously) to 100%, and all of this on both html and body (like the following)

html, body {
   width: 100% ;
   height: 100% ;
   min-width: 900px ;
   min-height: 500px ;
}

As for other methods, you can try wrapping the entire page data (starting right after the body tag) with a div (making sure you leave it block) to have it span across the entire page.

Another note that's worthy of, well, noting, is that you should also apply an overflow property to the html/body as well if you want a clean full-screen site. Where you'll lose content if you go outside the window's width, it will remove any scrollbars if you choose to get rid of them.

Hope this helps!

EDIT:

After looking at your new image link, this one is easy! :]

Keeping in mind that divs are block by default, the following should work (this is untested, so some tweaking may be necessary):

<body>
<div id="page">
    <div id="right">
        <div class="thirty">Top bar</div>
        <div class="tall">Middle bar</div>
        <div id="rt_bot">Bottom bar</div>
    </div>
    <div id="left">
        <div class="thirty">Left Top Bar</div>
        <div class="tall">Left Mid Bar</div>
        <div id="lf_bot">Left Bottom Bar</div>
    </div>
    <div id="container"></div>
</div>
</body>

and the CSS:

html, body {
    width: 100% ;
    height: 100% ;
    min-height: 500px ;
    min-width: 900px ;
    margin: 0px ;
}

div#page {
    height: 100% ;
}

div#right {
    float: right ;
    height: 100% ;
    width: 300px ;
}

div#rt_bot {
    height: 200px ;
}

div#left {
    float: left ;
}

.thirty {
    height: 30px ;
}

.tall {
    height: 100% ;
}

div#lf_bot {
    height: 50px ;
}

Upvotes: 7

Full screen site in CSS/HTML

Answers (3)

Related Questions