Utilizing Razor for the creation of a dynamic website, I have set up my _siteLayout.cshtml file where I defined the header, footer, and the body section to be replaced by @RenderBody()
<header>
</header>
<section id="content" class=" clearfix">
@RenderBody()
</section>
<footer>
</footer>
Next, I created a page with various sections that I want to separate into left and right parts. Here is the HTML code for this page:
<div id="trans" class="wrapper">
<h1>  Ricensioni</h1>
<div class="review_wrapper">
<div class="left_section">
@foreach(var row in data)
{
<div class="left_review">
<span class="user">@row.Name<span>:</span></span>
<br> @row.Data
</div>
<div class="right_review">
<div class="innerBubble">
<p> @row.Reff </p>
</div>
</div>
}
</div>
<div class="right_section">
<h3>Aggiungi la tua recensione</h3>
<form action="" method="post">
<p>Nome:<input type="text" name="formName" id="formName" class="text" maxlength="120"></p>
<p>Testo:</p>
<textarea name="formText" id="formText" class="text defaultText"> </textarea>
<p><input type="submit" value="Invia" /></p>
</form>
</div>
</div>
</div>
When attempting to adjust the CSS properties for the sections by using float:
#left_section{width: 474px;float: left;}
#right_section{width: 474px; float: right;}
Razor fails to recognize these sections and shifts them downwards, causing overlap with the footer.
You can view the image here.
This issue is critical for me as I am working with a database and the page will continue to expand vertically.
CSS code:
/* CSS Code */
html,body { margin: 0; padding: 0; border: 0; background-color: #f5f5f5; }
html { font-size: 62.5%; -webkit-touch-callout:none; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; }
body { line-height: 22px; font-size: 16px; color: #897c74; font-family: Georgia, Utopia, 'Times New Roman', Times, serif; }
footer, header{ display:block; }
section{display: block;}
header {
font-weight:400; color:#727074;
margin: 0 0 0px 0;
padding: 0px;
border-bottom: 80px solid #e5e5e5;
}
...
input.text {
margin-right: 2px;
padding: 2px;
border: 1px solid #c8c8c8;
background-color: #fff;
}
I would greatly appreciate any guidance on resolving this issue. As a newcomer here, I apologize if this question seems trivial.