ansaurus

Question

Html layout and have the body content extend past the set width and remain on same line

Answer 1

+1 A:

Ok, forget my margin-left suggestion, misunderstood the problem. If you want to make sure that div is always, say, 750px (so that plus the left nav is the same width as the header) then set its width to 750px and set either overflow: auto to add a scrollbar on that part of the page where necessary, or overflow: hidden to just truncate it.

Chris Boyle 2009-07-10 15:27:06

Closer, but I did make a small typoFor example, if you copy paste the code above and try this in IE. the body is sitting below the left nav, is there a way to avoid this.

Berlin Brown 2009-07-10 18:23:16

If you change #bodyContent's width to 750px and overflow is auto or hidden as I said here, and #leftNav is still 150px, and #mainBody is still 920px, then #leftNav and #bodyContent should be on the same line because they fit in their containing block. Do those changes not work?

Chris Boyle 2009-07-13 14:09:49

Answer 2

A:

Scratch what I said before, I misunderstood you. Try out the code below and let me know if it is what you are looking for. Otherwise you are going to need be more specific what you need. However you might want to check out this liquid layout and then put a wrapper div around it with a set width.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
    <title>Test</title>

    <style type="text/css">

            #bodyFull {
            }

            #header {
                    border: 3px solid #f00;
                    background-color: #99F;
                    width: 900px;
            }

            #footer {

                    border: 3px solid #909;
                    background-color: #F99;
                    width: 900px;

            }

            #leftNav {
                    float: left;
                    width: 150px;
                    height: 800px;
                    border: 2px solid #777;
                    background-color: #FF9;
            }

            #bodyContent {
                    float: left;
                    border: 2px solid #707;
                    background-color: #AAA;
           width:748px;
                    height: 1024px;
           overfloat:auto;
            }

            #mainBody {
           width:906px;
           overfloat: auto;
            }


    </style>

</head>

<body>

    <div id="bodyFull">

            <div id="header">
                    The Header
            </div>

            <div id="mainBody">

                    <div id="leftNav">
                            Left Nav
                    </div>

                    <div id="bodyContent">
                            The Body
                    </div>

                    The End of Main Body

            </div>
            <div style="clear: both"></div>
            <div id="footer">
                    The Footer
            </div>

    </div>

</body>

Patcouch22 2009-07-10 19:47:36

ansaurus

tags:

views:

answers:

Html layout and have the body content extend past the set width and remain on same line

related questions