0

My CSS:

The wrapper won't center, it will either be aligned left or right. Also I want the information in the body to extend the height but it won't.

html, body, #container{
    position: absolute;
    color: black;
    width: 100%;
    min-height: 100%;
    margin: 0;
    background-color: lightgrey;
}
#wrapper{
    position: absolute;  
    margin: 0 auto;
    width: 70%;
    background-color: white;

    border: solid 1px black;
}
#header{
    position: absolute;
    width: 100%;
    height: 250px;
    overflow: hidden;    

    border: solid 1px red;
}
#banner{
    position: absolute;
    height: 200px;
    width: 100%;    

    border: solid 1px blue;
}
#logoDiv{
    position: absolute;
    height:200px;
    width: 200px;

    border: solid 1px green;
}
#titleDiv{
    position: absolute;
    height: 200px;
    margin-left: 200px;
}
#navBar{
    width: 100%;
    margin-top: 200px;
    position: absolute;
    height: 50px;
    text-align: center;
    background-color: #333;
}
#content{
    margin-top: 250px;
    height: 9000px;
    min-height: calc(100%-250px-100px);
    width: 100%;
    background-color: aquamarine;
}
#body{
    padding: 0 50px;
    overflow-y: auto;      
    word-wrap: break-word;
    width: 100%;
}
#footer{
}

My HTML:

These are the divs I have used in the HTML.

 <body> 
    <div id="container">
        <div id="wrapper">
            <div id="header">
                <div id="banner">
                    <div id="logoDiv"></div>
                    <div id="titleDiv"></div>
                </div>
                <div id="navBar"></div>
            </div>
            <div id="content">
                <div id="body"></div>
            </div>
            <div id="footer">
                <div id="contactLinksDiv"></div>
            </div>
        </div>
    </div>
  </body>

Having trouble with getting the content to expand as the body div also expands from text.

swood
  • 1
  • Why do you have a `position:absolute` on your wrapper? This is preventing it from centering. – JD Davis Dec 08 '15 at 16:40
  • Okay thanks, Ive changed it to relative. Could you explain to me why absolute prevents centering? – swood Dec 08 '15 at 17:06
  • Absolute defines an absolute position within the viewport. So will not respond to any elements around it. Using relative, it's positioned relative to the elements around it. – JD Davis Dec 08 '15 at 17:08
  • @Jdsfighter Actually not quite. `Pos:Relative` means it's positioned relative *to where it would naturally be positioned*, and `Pos:Absolute` is positioned within *its parent positioned element* (which is at the eldest the window itself). Another note is that `Pos:Rel` still has a footprint in its natural position- it's just a display-time shift, not a layout shift. `Pos:Abs` however is removed from normal flow and will not have a footprint at all (outside of `Pos:Abs` used with something like `top:auto`) – abluejelly Dec 08 '15 at 17:12
  • Bleh, that should be "its **first** parent positioned element" for `Pos:Absolute`. Sorry, didn't notice until the edit window passed. – abluejelly Dec 08 '15 at 17:18

0 Answers0