CSS for grid layout?

John Straumann 21 Reputation points
2023-01-23T14:29:02.4533333+00:00

Hello all:

I have an ASP.NET MVC site, so on the image of the page the green header and footer on the overall page is from _LayoutStatic.cshtml, and I tried a blank page but that made no difference. I am trying to create a simple Grid layout in the main content space (between the header and footer) in the middle using css with a header, main content, and footer. No matter what I do I cannot get the label and button to be in the same row, they are being stacked as shown. Can anyone offer a tip?

Thanks!

Page


<style type="text/css">
  .row1 {
    width: 100%;
    background-color: greenyellow;
  }

  .jcleft {
    width: 55%;
    background-color: cyan;
  }

  .jcright {
    width: 25%;
    background-color: yellow;
  }

  jbutton {
    display: inline-block;
    background-color: #1B1463;
    padding: 5px;
    /*width: 100%;*/
    color: #ffffff;
    text-align: center;
    border: 4px double #cccccc;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    margin: 5px;
  }
</style>
<div class="row1" id="row">
  <div class="jcleft">
    <h2 style="color:#1B1464;font-weight:bold">Products</h2>
  </div>
  <div class="jcright" id="postbutton">
    <jbutton onclick="openProduct()" data-target="#myModalProduct">
      <span>Post A Product</span>
    </jbutton>
  </div>
</div>
<div id="content" contentEditable="true">Content</div>
<div id="foot" contentEditable="true">Footer</div>
ASP.NET Web Forms
ASP.NET Web Forms
A part of the ASP.NET web application framework that can be used to create ASP.NET web applications.
408 questions
No comments
{count} votes

1 answer

Sort by: Most helpful
  1. QiYou-MSFT 851 Reputation points Microsoft Employee
    2023-01-24T06:20:24.7533333+00:00

    Hi @John Straumann

    You just need to move the jbutton tag in the div tag below to the div tag above.

    Code:

    <div class="row1" id="row">
            <div class="jcleft">
                <h2 style="color:#1B1464;font-weight:bold">Products
                    <jbutton onclick="openProduct()" data-target="#myModalProduct">
                        <span>Post A Product</span>
                    </jbutton></h2>
            </div>
            <div class="jcright" id="postbutton">
               
            </div>
        </div>
        <div id="content" contentEditable="true">Content</div>
        <div id="foot" contentEditable="true">Footer</div>
    

    Result:

    Picture1

    Best Regards

    Qi You


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.