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
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,233 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. QiYou-MSFT 4,306 Reputation points Microsoft Vendor
    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.