CSS for grid layout?

Question

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!

<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>

Answer 1

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:

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.