How to find width using a formula with CSS2019 Community Moderator ElectionMake a div fill the height of the remaining screen spaceHow do JavaScript closures work?How to horizontally center a <div>?How do you keep parents of floated elements from collapsing?Set cellpadding and cellspacing in CSS?CSS 100% height with padding/marginHow to disable text selection highlighting?Is there a CSS parent selector?Change an HTML5 input's placeholder color with CSSIs it possible to apply CSS to half of a character?
How to find width using a formula with CSS
2019 Community Moderator ElectionMake a div fill the height of the remaining screen spaceHow do JavaScript closures work?How to horizontally center a <div>?How do you keep parents of floated elements from collapsing?Set cellpadding and cellspacing in CSS?CSS 100% height with padding/marginHow to disable text selection highlighting?Is there a CSS parent selector?Change an HTML5 input's placeholder color with CSSIs it possible to apply CSS to half of a character?
How to to use CSS functions to calculate a div width in percentage using this formula : (screen-width - 300px) x 100 / screen-width
EDIT 1 :
I explain more the problem :
My navigation side as showed in the below image have always 300px as widh and the content side must have the rest of screen-width so it would be : navigation-side + content-side = 100%
css function
asked Mar 6 at 15:23
ghassenghassen
91211
|
show 1 more comment
How to to use CSS functions to calculate a div width in percentage using this formula : (screen-width - 300px) x 100 / screen-width
EDIT 1 :
I explain more the problem :
My navigation side as showed in the below image have always 300px as widh and the content side must have the rest of screen-width so it would be : navigation-side + content-side = 100%
css function
asked Mar 6 at 15:23
ghassenghassen
91211
5
There is no such thing as CSS functions unless you meancalc
– Paulie_D
Mar 6 at 15:24
1
As @Paulie_D said, I think you can handle this operation withcalcdeveloper.mozilla.org/en-US/docs/Web/CSS/calc
– Vincent G
Mar 6 at 15:26
2
@VincentG even with calc you will not be able to have the division
– Temani Afif
Mar 6 at 15:29
can you elaborate more your use case so we can better help you?
– Temani Afif
Mar 6 at 15:33
2
what exactly are you trying to achieve you probably need javascript
– Paddy Hallihan
Mar 6 at 15:38
|
show 1 more comment
How to to use CSS functions to calculate a div width in percentage using this formula : (screen-width - 300px) x 100 / screen-width
EDIT 1 :
I explain more the problem :
My navigation side as showed in the below image have always 300px as widh and the content side must have the rest of screen-width so it would be : navigation-side + content-side = 100%
css function
asked Mar 6 at 15:23
ghassenghassen
91211
How to to use CSS functions to calculate a div width in percentage using this formula : (screen-width - 300px) x 100 / screen-width
EDIT 1 :
I explain more the problem :
My navigation side as showed in the below image have always 300px as widh and the content side must have the rest of screen-width so it would be : navigation-side + content-side = 100%
css function
css function
asked Mar 6 at 15:23
ghassenghassen
91211
asked Mar 6 at 15:23
ghassenghassen
91211
edited Mar 7 at 10:06
ghassen
asked Mar 6 at 15:23
ghassenghassen
91211
asked Mar 6 at 15:23
ghassenghassen
91211
asked Mar 6 at 15:23
ghassenghassen
91211
91211
5
There is no such thing as CSS functions unless you meancalc
– Paulie_D
Mar 6 at 15:24
1
As @Paulie_D said, I think you can handle this operation withcalcdeveloper.mozilla.org/en-US/docs/Web/CSS/calc
– Vincent G
Mar 6 at 15:26
2
@VincentG even with calc you will not be able to have the division
– Temani Afif
Mar 6 at 15:29
can you elaborate more your use case so we can better help you?
– Temani Afif
Mar 6 at 15:33
2
what exactly are you trying to achieve you probably need javascript
– Paddy Hallihan
Mar 6 at 15:38
|
show 1 more comment
5
There is no such thing as CSS functions unless you meancalc
– Paulie_D
Mar 6 at 15:24
1
As @Paulie_D said, I think you can handle this operation withcalcdeveloper.mozilla.org/en-US/docs/Web/CSS/calc
– Vincent G
Mar 6 at 15:26
2
@VincentG even with calc you will not be able to have the division
– Temani Afif
Mar 6 at 15:29
can you elaborate more your use case so we can better help you?
– Temani Afif
Mar 6 at 15:33
2
what exactly are you trying to achieve you probably need javascript
– Paddy Hallihan
Mar 6 at 15:38
5
5
There is no such thing as CSS functions unless you mean
calc– Paulie_D
Mar 6 at 15:24
There is no such thing as CSS functions unless you mean
calc– Paulie_D
Mar 6 at 15:24
1
1
As @Paulie_D said, I think you can handle this operation with
calc developer.mozilla.org/en-US/docs/Web/CSS/calc– Vincent G
Mar 6 at 15:26
As @Paulie_D said, I think you can handle this operation with
calc developer.mozilla.org/en-US/docs/Web/CSS/calc– Vincent G
Mar 6 at 15:26
2
2
@VincentG even with calc you will not be able to have the division
– Temani Afif
Mar 6 at 15:29
@VincentG even with calc you will not be able to have the division
– Temani Afif
Mar 6 at 15:29
can you elaborate more your use case so we can better help you?
– Temani Afif
Mar 6 at 15:33
can you elaborate more your use case so we can better help you?
– Temani Afif
Mar 6 at 15:33
2
2
what exactly are you trying to achieve you probably need javascript
– Paddy Hallihan
Mar 6 at 15:38
what exactly are you trying to achieve you probably need javascript
– Paddy Hallihan
Mar 6 at 15:38
|
show 1 more comment
1 Answer
1
active
oldest
votes
The solution I found is to use calc() function this way :
.content-side
width: calc(100% - 300px);
Actually I didn't know that we can use the value 100% to express the screen-width and substract a value expressed in px
answered Mar 7 at 10:25
ghassenghassen
91211
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55026540%2fhow-to-find-width-using-a-formula-with-css%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The solution I found is to use calc() function this way :
.content-side
width: calc(100% - 300px);
Actually I didn't know that we can use the value 100% to express the screen-width and substract a value expressed in px
answered Mar 7 at 10:25
ghassenghassen
91211
add a comment |
The solution I found is to use calc() function this way :
.content-side
width: calc(100% - 300px);
Actually I didn't know that we can use the value 100% to express the screen-width and substract a value expressed in px
answered Mar 7 at 10:25
ghassenghassen
91211
add a comment |
The solution I found is to use calc() function this way :
.content-side
width: calc(100% - 300px);
Actually I didn't know that we can use the value 100% to express the screen-width and substract a value expressed in px
answered Mar 7 at 10:25
ghassenghassen
91211
The solution I found is to use calc() function this way :
.content-side
width: calc(100% - 300px);
Actually I didn't know that we can use the value 100% to express the screen-width and substract a value expressed in px
answered Mar 7 at 10:25
ghassenghassen
91211
answered Mar 7 at 10:25
ghassenghassen
91211
answered Mar 7 at 10:25
ghassenghassen
91211
answered Mar 7 at 10:25
ghassenghassen
91211
91211
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55026540%2fhow-to-find-width-using-a-formula-with-css%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
5
There is no such thing as CSS functions unless you mean
calc– Paulie_D
Mar 6 at 15:24
1
As @Paulie_D said, I think you can handle this operation with
calcdeveloper.mozilla.org/en-US/docs/Web/CSS/calc– Vincent G
Mar 6 at 15:26
2
@VincentG even with calc you will not be able to have the division
– Temani Afif
Mar 6 at 15:29
can you elaborate more your use case so we can better help you?
– Temani Afif
Mar 6 at 15:33
2
what exactly are you trying to achieve you probably need javascript
– Paddy Hallihan
Mar 6 at 15:38