CODEWITHSUNDEEP
htmlcss
Vaibhav Jain
Vaibhav Jain

Reputation: 5507

how to set child div to auto width parent

I have a HTML page which is divided into header,main and footer section.

Below i have mentioned the HTML and CSS code.

HTML code :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="icon" type="image/ico" href="/static/images/favicon.ico">
        <link rel="stylesheet" type="text/css" href="/static/css/eGirvi.css">
        <title>eGirvi ERP for jewellers</title>
    </head>
    <body>
        <div id="wrap">
            <div id="header">
                <div id="logo">
                    <img src="/media/logo.png">
                </div>
            </div>
            <div id="main">
                <div id="content">content</div>
                <div id="right-sidebar">right-sidebar</div>
            </div>
        </div>
        <div id="footer">Footer</div>
    </body>
</html>

CSS code :

/*Header div start here*/
#header{
    border: 1px dotted;
    height: 100px;
}
/*Header div end here*/

/*Logo start here*/
#logo{
    width: 100px;
    height: 100px;
}
/*Logo start here*/

/*Main start here*/
#main{
    min-height: 800px;
    border: 2px solid;
}
/*main end here*/

/*content start here*/
#content{
    min-height: 800px;
    border: 2px dashed;
    float: left;
}
/*content end here*/

/*right-sidebar start here*/
#right-sidebar{
    min-height: 800px;
    width: 100px;
    border: 2px solid;
    float: right;
}
/*right-sidebar end here*/

/*footer start here*/
#footer{
    clear: both;
    border: 1px dotted;
    height: 100px;
}
/*footer end here*/

What i am trying to do is to set 'content' div to remaining width of the page which is (total page width minus width of the right-sidebar) . Can someone please help me.

Upvotes: 0

Views: 102

Answers (3)

ellie adam
ellie adam

Reputation: 26

Link: CSS Auto Width Child 'div's in Parent 'div'

HTML

<div class="parent">
  <div class="child">...</div>
  <div class="child">...</div>
  <div class="child">...</div>
</div>

CSS

.parent
{
  display: table-row;
  width: 900px;
}    
.child
{
  display: table-cell;
}

Upvotes: 1

Sam1604
Sam1604

Reputation: 1489

You can set the Width like 

width: -moz-calc(100% - 40px); /* Firefox */
width: -webkit-calc(100% - 40px); /* Chrome, Safari */
width: calc(100% - 40px); /* IE9+ and future browsers */

Upvotes: 0

himanshu
himanshu

Reputation: 1797

#content{ width: calc (100% - 100px);}

100px is width of sidebar

Upvotes: 1

Related Questions