Geek Answers Handbook

Setting the width to the width of the remainder of the parent element

I want to have a third-party navigation device width: 150px; and then the contents floating next to it. I want the content to be 100% smaller than the width of the side width of 150 pixels. Is it possible?

I know I can do this in Javascript, but I would rather know a simple CSS solution, what would it be:

 width:100%-150px;

Is there such a solution?

+5
source share
4 answers

I want the content to be 100% wide, minus the port width by 150 pixels. Is it possible?

Yes:

 width: calc(100% - 150px);

NB Be sure to leave a space on each side of the minus sign. The CSS syntax parser should be clear, it parses the minus sign, followed by a positive integer.

+3
source

There are many different ways to achieve this, here are a few of them.

1. using float + overflow :

Please note that there should not be any float in the content field, and overflow:auto may prevent wrapped text from going under the sidebar.

 .container:after { content: ""; display: table; clear: both; } .sidebar { background: pink; width: 150px; float: left; } .content { background: gold; overflow: auto; } 
 <div class="container"> <div class="sidebar">sidebar</div> <div class="content">content</div> </div>

2: using float + calc :

See browser support tables - mostly IE9 +.

 .container:after { content: ""; display: table; clear: both; } .sidebar { background: pink; width: 150px; float: left; } .content { background: gold; width: calc(100% - 150px); float: left; } 
 <div class="container"> <div class="sidebar">sidebar</div> <div class="content">content</div> </div>

3. using display:inline-block + calc :

 .container { font-size: 0; /*remove white space*/ } .sidebar, .content { font-size: 16px; /*reset font size*/ display: inline-block; } .sidebar { background: pink; width: 150px; } .content { background: gold; width: calc(100% - 150px); } 
 <div class="container"> <div class="sidebar">sidebar</div> <div class="content">content</div> </div>

4. using the CSS table:

 .container { display: table; width: 100%; } .sidebar, .content { display: table-cell; } .sidebar { background: pink; width: 150px; } .content { background: gold; } 
 <div class="container"> <div class="sidebar">sidebar</div> <div class="content">content</div> </div>

5. using flexbox:

See browser support tables - IE10 + with prefixes .

 .container { display: flex; } .sidebar { background: pink; flex: 0 0 150px; } .content { background: gold; flex: 1; } 
 <div class="container"> <div class="sidebar">sidebar</div> <div class="content">content</div> </div>
+2
source

Other ways are to add a side nav float, and then the main content should be 100% wide and include a 150px pad on the same side as nav

+1
source

The parameter must indicate

 .content { left: 0; position: absolute; right: 150px; } .sidenav { float: right; margin-right: -150px; }

instead of width: 100% for the content. Note. I assumed relative positioning in the parent element (which will contain both the content and the side navigator).

Good luck

0
source

More articles:


All Articles