tags:

views:

290

answers:

7
+2  Q: 

Simple html css block structure, can't use -headerHeight bottom-margin for content div to avoid scrollbar?

The following is my simple html/css structure:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
    <head>
     <title>de titel</title>
     <style type="text/css">
      * {
       color: #FFFFFF;
       margin: 0;
       padding: 0;
      }
      html, body {
       height: 100%;
       background-color: #000000;
      }
      #wrapper {
       width: 800px;
       height: 100%;
       margin-left: auto;
       margin-right: auto;
      }
      #header {
       background-color: lightblue;
       position: absolute;
       top: 0;
       width: 800px;
       border: 1px solid red;
       height: 60px;
      }
      #content {
       height: 100%;
       margin-top: 60px;
       margin-bottom: -60px;
      }
      #menu {
       width: 200px;
       height: 100%;
       border: 1px solid red;
       background-color: gray;
       float: left;
       padding: 5px 0 0 5px;
      }
      #text {
       background-color: orange;
       height: 100%;
       margin-left: 200px;
       padding-top: 5px;
       padding-left: 15px;
       margin-right: -2px;
       border: 1px solid red;
      }
     </style>
    </head>
    <body>
     <div id="wrapper">
      <div id="header">
       <br><center>[ hier moet een header image worden toegevoegd ]</center>
      </div>
      <div id="content">
       <div id="menu">
        Link 1
       </div>
       <div id="text">
        <h1>Titel</h1>
        <p>Dit is de tekst van je pagina.</p>
       </div>
      </div>
     </div>
    </body>
</html>

The question I have: "why isn't the bottom-margin: -60px; causing the content layer to decrease in 60 pixels height so that the scrollbar is not shown because of the header? how should I solve this in the cleanest possible way?"

Thanks in advance.

A: 

I think its because of your borders. You must add their total height to the margin-bottom value.

Edit And on a second guess i think it's because of your text div. You assign a 100% height and then add another 5px padding to the top. This can be solved by adding an inner div (e.g. the-content) inside your text div. And the style of the the-content div will have padding-top:5px; padding-left:15px;.

Ben Fransen  2009-11-27 12:03:01
The extra size is 60 pixels, exactly the size of the header. This is also too big to be caused by a border. Right?
Tom  2009-11-27 12:49:14
That's correct. But it has also to do with your padding as I mentioned before.
Ben Fransen  2009-11-28 15:02:40
I tried, if I add more negative padding/margin I don't see any difference. Eg. -500px doesn't change anything.
Tom  2009-11-29 13:03:32
+1  A: 

Well here's my take on it.

Notice the chage in doctype (I used HTML5 doctype here for simplicity's sake, as it triggers standards mode in all browsers) Be sure to ALWAYS use standards mode doctype unless you're preparing do deal with the hell of quirks mode.

    <!DOCTYPE html>
<html>
    <head>
        <title>de titel</title>
        <style type="text/css">
                * {
                        color: #FFFFFF;
                        margin: 0;
                        padding: 0;
                }
                html, body {
                        height: 100%;
                        background-color: #000000;
                }
                #wrapper {
                        width: 800px;
                        height: 100%;
                        margin-left: auto;
                        margin-right: auto;
                        position:relative; /* added this */                        
                }
                #header {
                        background-color: lightblue;
                        position: absolute;
                        top: 0;
                        width: 800px;
                        border: 1px solid red;
                        height: 60px;
                }
                #content {
                     /*removed these*/
                        /*height: 100%;
                        margin-top: 60px;   
                        margin-bottom: -60px;*/
                        /* added these */
                        width:100%;
                        position:absolute;
                        top:60px;
                        bottom:7px;                        
                }
                #menu {
                        width: 200px;
                        height: 100%;
                        border: 1px solid red;
                        background-color: gray;
                        float: left;
                        padding: 5px 0 0 5px;
                }
                #text {
                        background-color: orange;
                        height: 100%;
                        margin-left: 200px;
                        padding-top: 5px;
                        padding-left: 15px;
                        margin-right: -2px;
                        border: 1px solid red;
                }
        </style>
    </head>
    <body>
        <div id="wrapper">
                <div id="header">
                        <br><center>[ hier moet een header image worden toegevoegd ]</center>
                </div>
                <div id="content">
                        <div id="menu">
                                Link 1
                        </div>
                        <div id="text">
                                <h1>Titel</h1>
                                <p>Dit is de tekst van je pagina.</p>
                        </div>
                </div>
        </div>
    </body>
</html>
Ramuns Usovs  2009-11-30 12:43:10
Thanks, I'll try your code as soon as possible and accept it. I don't understand the "<!DOCTYPE html>" part though? That's not a valid doctype?
Tom  2009-12-01 10:53:46
the <!DOCTYPE html> is the shortest accepted doctype that will trigger standards mode in ALL browsers, also it happens to be the HMTL5 doctype.
Ramuns Usovs  2009-12-03 14:37:30
I've tried it. When you add more text than the screen, the background will not grow with the content. This is a big problem.
Tom  2009-12-04 14:16:16
+1  A: 

If you want to hide the scrollbar to stop the layout 'jittering' between pages which do and don't have a scrollbar, then the safer way to do this is to make sure all pages have a scroll bar.

I've used this javascript in the past, but you'll go to hell if you use it:

<script type='text/javascript'>
    window.document.write( '<style>body { height: '+(window.innerHeight+1)+'px; }</style>' );
</script>
Christopher Gutteridge  2009-12-02 01:34:29
There are less sinful ways to achieve this. :) http://stackoverflow.com/questions/1735936/get-a-deactivated-scrollbar-in-firefox
Pekka  2009-12-03 15:36:34
+1  A: 

In CSS2.1 the padding, border, and margins are all outside the height and width of an element. This is what is causing your design to be too tall, because you are using all these elements together with 100% height. This means your elements are 100% of the window height plus the padding plus the margin plus the border.

I've adjusted your HTML and CSS as follows. The basic idea is to make the two columns fill the screen, while leaving space for the header, which is a fixed size. Note: I removed the red borders. If you are going to want borders on this page you will need to use a different approach. Some workarounds I can think of would be to put the borders on non-obvious elements. For example, if you need a border on the #menu or #header you can easily do so because they are fixed-size elements. For a border just around the #text you might want to set border-bottom on the #header, border-right on the #text, border-right on the #menu, etc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
  <title>de titel</title>
  <style type="text/css">
    * {
      color: #FFFFFF;
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
      background-color: #000000;
    }
    #wrapper {
      width: 800px;
      height: 100%;
      margin: 0 auto;
    }
    #header {
      background-color: lightblue;
      position: relative;
      height: 60px;
      z-index: 1;
    }
    #content {
      height: 100%;
      margin: -60px 0 0 0;
    }
    #menu {
      width: 200px;
      height: 100%;
      background-color: gray;
      float: left;
    }
    #text {
      background-color: orange;
      height: 100%;
      margin-left: 200px;
    }
    #text_inner, #menu_inner {
      position: relative; 
      top: 65px;
      margin: 0 5px; 
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <br><center>[ hier moet een header image worden toegevoegd ]</center>
    </div>
    <div id="content">
      <div id="menu">
        <div id="menu_inner">
          Link 1
        </div>
      </div>
      <div id="text">
        <div id="text_inner">
          <h1>Titel</h1>
          <p>Dit is de tekst van je pagina.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
Mr. Shiny and New  2009-12-03 15:32:26
Interesting. With CSS however, I always seem to wonder why something so simple has to be done so complicated. Am I alone here? This is the commonly accepted way of doing it?
Tom  2009-12-04 14:06:27
Update: I've tried it. When you add more text than the screen, the background will not grow with the content. This is a big problem.
Tom  2009-12-04 14:16:57
@Tom: Unfortunately CSS2 is broken, IMO, with regards to its layout model, because it's extremely difficult to make things like equally-sized columns or to account for borders and padding with relative heights. CSS3 promises some improvement in that area but for now we are stuck with this imperfect tool. As for the long text, I suspect that's because you have the html, body, and text heights set to 100% height. This means they are fixed in size. If you need flexible size and want the whole page to scroll, you need a different way of doing this. Perhaps google faux-columns.
Mr. Shiny and New  2009-12-04 14:20:29
@Tom: You may want to google css layouts and see if you can find something specific that meets your needs. The http://layouts.ironmyers.com/ site can generate layouts that you can then customize. Not sure if their code or licensing terms are suitable for your purposes.
Mr. Shiny and New  2009-12-04 14:27:25
Automatic code generation is something I will never use. Sorry, I need to understand my code.
Tom  2009-12-07 10:08:54
@Tom: There are also other sites that explain CSS layouts that have certain properties. If I were starting a site from scratch I'd use them because there are a lot of edge cases.
Mr. Shiny and New  2009-12-07 15:01:10
If you need to understand all the code you write, take a look at the box model spec (http://www.w3.org/TR/CSS2/box.html) instead of just declaring it's overly complicated.
Tom  2009-12-16 21:24:37
A: 

Are you wanting the menu div to grow with the text div? If not, this worked for me in IE, Chrome, and FF:

FYI, if you do want the menu to grow with the text div, you'll need to do something other that floating divs. Sometimes its easier just to setup a table (since your creating a table layout with divs) and go from there.

Good Luck! :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
    <head>
        <title>de titel</title>
        <style type="text/css">
                *
                {
        color: #FFFFFF;
        margin: 0;
        padding: 0;
                }
                html, body
                {
        height: 100%;
        background-color: #000000;
                }
                #wrapper
                {
                    width: 800px;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
                }
                #header
                {
        background-color: lightblue;
        position: absolute;
        top: 0;
        width: 800px;
        border: 1px solid red;
        height: 60px;
                }
                #menuContent
                {
                    height:100%;
        width: 200px;
        min-height: 100%;
        border: 1px solid red;
        background-color: gray;
        float: left;
        padding: 5px 0 0 5px;
                }
                #content
                {
                    height: 99%;
                }
                #menu
                {
                    padding-top:60px;
                }
                #textContent
                {
                    background-color: orange;
        min-height: 100%;
        margin-left: 206px;
        padding-top: 5px;
        padding-left: 15px;
        margin-right: -2px;
                    border: 1px solid red;
                }
                #text
                {
        padding-top: 60px;
                }
        </style>
    </head>
    <body>
        <div id="wrapper">
                <div id="header">
                        <br><center>[ hier moet een header image worden toegevoegd ]</center>
                </div>
                <div id="content">
                     <div id="menuContent">
          <div id="menu">
            Link 1
          </div>
                        </div>

                        <div id="textContent">
          <div id="text">
            <h1>Titel</h1>
            <p>Dit is de tekst van je pagina.</p>
          </div>
                        </div>
                </div>
        </div>
    </body>
</html>
Miles  2009-12-05 18:38:47
"Are you wanting the menu div to grow with the text div?" Yes. Recommending me to create a table layout? Wait... I thought CSS was invented to do the opposite.
Tom  2009-12-07 10:08:20
CSS was meant to help out alot. But when your trying to make CSS act like a table, why don't you just create a table.
Miles  2009-12-07 14:42:57
The purpose of a table is not to position content as far as I know, that's why.
Tom  2009-12-16 22:02:57
A: 

Tested in all major browsers.

            * {
                    color: #FFFFFF;
                    margin: 0;
                    padding: 0;
            }
            html, body {
                    height: 100%;
                    width:100%;
                    background-color: #000000;
                    position:absolute;
            }
            #wrapper {
                    width: 800px;
                    height: 100%;
                    margin-left: auto;
                    margin-right: auto;
                    position:relative;
            }
            #header {
                    background-color: lightblue;
                    position: absolute;
                    top: 0;
                    left:0;
                    right:0;
                    height: 60px;
                    border: 1px solid red;
            }
            #content {
                    position:absolute;
                    background-color:#999;
                    top:60px;
                    bottom:0;
                    left:0;
                    right:0;
            }
            #menu {
                position:absolute;
                top:0;
                    bottom:0;
                left:0;
                width: 200px;
                border: 1px solid red;
                background-color: gray;
                padding: 5px 0 0 5px;
            }
            #text {
                    background-color: orange;
                    position:absolute;
                    top:0;
                    bottom:0;
                    left:200px;
                    right:0px;
                    padding-top: 5px;
                    padding-left: 15px;
                    border: 1px solid red;
            }
Tor Valamo  2009-12-16 21:20:10
When the text box's content exceeds the original height, the box does not dynamically grow with the content while it should (the same applied for other suggestions done earlier).
Tom  2009-12-16 21:27:29
well that's because it doesn't make sense to have a fixed height and a variable height at the same time.
Tor Valamo  2009-12-16 21:31:06
Elaborate? A header will always have the same content, while the text on certain pages is dynamic. Seems to me that a fixed height for the header and a variable height for the content makes perfect sense.
Tom  2009-12-16 22:00:41
Well if you want the content to fill the screen when it doesn't do that on its own, then you can't have it behave different also after it fills the screen. If it fills the screen, it fills the screen, and the screen is always x,y big, so the box is always x,y big.
Tor Valamo  2009-12-16 22:08:53
I may be able to create an illusion of what you want using divs, but it's really table behaviour you want, so use a table.
Tor Valamo  2009-12-16 22:10:18
Trying to make a div change height relative to a sibling isn't logical and isn't possible. That's table behaviour, where row cells are siblings and should always have the same height.
Tor Valamo  2009-12-16 22:16:25
Are there even professional websites still in existance with dynamic content where the height is not variable? So you're saying they should all be using tables for their layout? That does seem strange.
Tom  2009-12-17 07:15:52
No, that's not what I'm saying. Variable height is one thing. That's all fine. But you wan't variable height sometimes, but fixed height other times. That means changing the entire way the boxes are displayed based on the content. To do that you'd need javascript which measures the height of the content and changes the rendering options based on that.
Tor Valamo  2009-12-17 07:30:51
+1  A: 

The following code works fine in standards-compliant browsers, although it could be much better. I simply modified your code a bit, but I don't think you really understand the CSS box model. All your borders and padding added to the 100% which you declared, making it, of course, more than 100%. Please read and understand the CSS box model. Also, I recommend the use of a Strict DOCTYPE. I used XHTML, but you could have just as well used HTML 4.01. And, you used <center>, which is deprecated.

Good luck.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
    <head>
        <title>de titel</title>
        <style type="text/css">
                * {
                        color: #FFFFFF;
                        margin: 0;
                        padding: 0;
                }
                html, body {
                        height: 100%;
                        background-color: #000000;
                }
                #wrapper {
                        width: 800px;
                        height: 100%;
                        margin-left: auto;
                        margin-right: auto;
         margin-bottom: -60px;
                }
                #header {
                        background-color: lightblue;
                        position: absolute;
                        top: 0;
                        width: 800px;
                        height: 60px;
                }
                #content {
                        height: 100%;
                }
                #menu {
                        width: 200px;
                        height: 100%;
                        background-color: gray;
                        float: left;
                        padding: 0 0 0 5px;
                }
                #text {
                        background-color: orange;
                        height: 100%;
                        margin-left: 200px;
                        padding-left: 15px;
                        margin-right: -2px;
                }
        </style>
    </head>
    <body>
        <div id="wrapper">
                <div id="header">
        <p>image</p>
                </div>
                <div id="content">
                        <div id="menu">
                                Link 1
                        </div>
                        <div id="text">
                                <h1>Titel</h1>
                                <p>Dit is de tekst van je pagina.</p>
                        </div>
                </div>
        </div>
    </body>
</html>

BTW, 100% means 100%. That's not dynamic. If you want those columns to be 100% with little content but to grow with lots of content, then your problem is only visual and you could achieve the effect you want by adding a vertically-repeating background image to the wrapper, which contains the colors of the two columns. You would then remove the bg colors from the menu and text divs. This way, both columns seem to grow with the text. See also the very old faux columns technique.

stephenhay  2009-12-16 21:54:30
+1 for faux columns solution
Tor Valamo  2009-12-16 22:38:12
That faux thing seems like a trick or hack to me. Was CSS intended to be worked with like that?
Tom  2009-12-17 07:16:44
I suppose you could see it as a hack. But then again, you're telling the container to make itself the height of the viewport (100%), but you want it to be *larger* than 100% in certain situations (lots of text). That's behavior based on circumstances, and the version of CSS we have now was never intended for that. Javascript can, but the faux columns allow you to do it with CSS alone.
stephenhay  2009-12-17 08:37:05

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?