Menu
I want to have a side nav of width: 150px; and then the content floating next to it. I want the content to be 100% minus the 150px side nav width. Is this possible?
I know I can do it in Javascript, but I would much rather know a simple CSS solution, something that would be:
width:100%-150px;
Is there such a solution?
400
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
The . header-square is missing width attribute. Therefore you should expand to 100% by doing width: calc(100% / 7); to achieve your desired result.
One way you can achieve this is setting display: inline-block; on the div . It is by default a block element, which will always fill the width it can fill (unless specifying width of course).
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
I want the content to be 100% width, minus the 150px side nav width. Is this possible?
Yes:
width: calc(100% - 150px);
N.B. Be sure to leave a space either side of the minus sign. The CSS parser needs to be clear it is parsing a minus sign, followed by a positive integer.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
