Using C# statements in style definition in razor - asp.net-mvc

Question

So I try to make my styles dependent from conditions but it mess with almost everthing.
So here is the current state:
<style>
#bodyContainer {
width: 1024px;
margin: 0 auto 0 auto;
background: lightgreen;
}
#navbar {
width: 1024px;
margin: 0 auto 0 auto;
}
#layoutContent {
width: #if (!IsSectionDefined("menu"))
{
#:1024
}
else
{
#:724
}
px;
padding-top: 70px;
background: lightblue;
}
#if (IsSectionDefined("menu"))
{
#:#menu {
#: padding-top: 70px;
#: float:left;
#: background:lightgray;
#: width: 300px;
#:}
}
</style>
It's working (the code, not the layout itself:) ) but:
- the highlight not working in menu section
- the intellisense/highlight not working in the rest of the style tag
- the style inside the if statement looks like a mess
- the generated text looks like a mess:
#layoutContent {
width: 724
px;
padding-top: 70px;
background: lightblue;
}
#menu {
padding-top: 70px;
float:left;
background:lightgray;
width: 300px;
}
I really appritiate any idea.

Answer 1

CSS doesn't work like that, and you shouldn't attempt to mix Razor with CSS.
You should have 2 styles and then based upon the condition apply the class to the HTML elements.
For example, have a separate file for CSS:
#menu724 {
padding-top: 70px;
float:left;
background:lightgray;
width: 724px;
}
#menu1024 {
padding-top: 70px;
float:left;
background:lightgray;
width: 724px;
}
Then in your view you could do:
#if (MenuSectionDefined) {
<div id="menu1024">
Content
</div>
} else {
// display the appropriate elements without the `menu` CSS style
<div id="menu724">
Content
</div>
}

Answer 2

Ok. I make a final solution use the advices I got.
Body part:
<div id="bodyContainer">
<div id="navbar" class="navbar navbar-default navbar-fixed-top">
</div>
#if (IsSectionDefined("menu"))
{
<div class="menu">
#RenderSection("menu")
</div>
}
<div class="container layoutContent #(IsSectionDefined("menu") ? "layoutContent724" : "layoutContent724")">
#RenderBody()
</div>
</div>
Style part:
.layoutContent {
padding-top: 70px;
background: lightblue;
}
.layoutContent724
{
width: 724px;
}
.layoutContent1024
{
width: 1024px;
}
.menu {
padding-top: 70px;
float: left;
background: lightgray;
width: 300px;
}
I let the question in place in case somebody run in the same situtation.
The final answer to the question I think is "No way!". This approach is totally wrong.