CODEWITHSUNDEEP
csshtmlformatting
Junior
Junior

Reputation: 315

Dynamically Size Div

I'm doing some HTML and am running into an issue with my left and right column divs not scaling based on the content inside them as well as in proportion to the rest of the page.

Here's my example: https://i.sstatic.net/X0KaF.png

And my CSS for each of the divs:

#wrapper{
    background:white;
    width:1280px;
    position:relative;
    border: 1px solid black; /* black border */
    margin:auto; /* centre this div */  
}
#header{
    height:90px;
    text-align:center;
    padding: .5em;
    background-color: grey;
    border-bottom: 2px solid black;
}
#leftmenu{
    width:100px;
    float:left;
    font-size: 75%;
    padding:.5em;
    border-right:2px solid black;
    border-left:2px solid black,
}
#rightmenu{
    width:180px;
    float:right;
    font-size: 75%;
    padding:.5em;
    border-left:2px solid black;
    border-right:1px solid black;
}
#content{
    background-color:white;
    margin-left:120px;
    font-size: 80%;
}
#footer{
    clear:both; /* push footer under other divs */
    height: 70px;
    background-color:white;
    border-top:1px solid black;
    border: 1px solid black;
    padding-top:40px;
    text-align:center;
    font-size: 70%; 
}

How can I ensure that my divs resize based on the content in my other divs?

Thanks!

Upvotes: 4

Views: 22390

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

You can do it by wrapping #leftmenu, #content and #rightmenu in a div that is displayed as a table. And display the three children as a table-cell:

HTML:

<div id="header">#header</div>
<div id="wrapper">
    <div id="leftmenu">#leftmenu</div>
    <div id="content">#content</div>
    <div id="rightmenu">#rightmenu</div>
</div>
<div id="footer">#footer</div>

CSS (without colors, padding, font sizes and stuff):

html, body {
    margin: 0;
    padding: 0;
}
#header{
    height:90px;
}
#wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}
#wrapper > div {
    display: table-cell;
}
#leftmenu{
    width:100px;
}
#rightmenu{
    width:180px;
}
#content{

}
#footer{
    height: 70px;
}

And a working demo.

Upvotes: 1

fred02138
fred02138

Reputation: 3361

Without seeing your HTML, here's a stab at it:

JSFiddle here: http://jsfiddle.net/2hf8q/

CSS

html, body  {
    height: 100%;
}

#wrapper {
    height: calc(100% - 2px); /* for border */
}

#leftmenu, #rightmenu {
    height: calc(100% - 234px); /* for header, footer */
}

#wrapper {
    background:white;
    width:100%;
    position:relative;
    border: 1px solid black;
    /* black border */
    margin:auto;
    /* centre this div */
}
#header {
    height:90px;
    text-align:center;
    padding: .5em;
    background-color: grey;
    border-bottom: 2px solid black;
}
#leftmenu {
    width:100px;
    float:left;
    font-size: 75%;
    padding:.5em;
    border-right:2px solid black;
    border-left:2px solid black;
}
#rightmenu {
    width:180px;
    float:right;
    font-size: 75%;
    padding:.5em;
    border-left:2px solid black;
    border-right:1px solid black;
}
#content {
    background-color:white;
    margin-left:120px;
    font-size: 80%;
}
#footer {
    clear:both;
    /* push footer under other divs */
    height: 70px;
    background-color:white;
    border-top:1px solid black;
    border: 1px solid black;
    padding-top:40px;
    text-align:center;
    font-size: 70%;
}

HTML

<div id="wrapper">
    <div id="header"></div>
    <div id="leftmenu"></div>
    <div id="content"></div>
    <div id="rightmenu"></div>
    <div id="footer"></div>
</div>

Upvotes: 3

Related Questions