-2

This script 

{else}
{$obj->mMenus[i].name}

is in div. First row is ok, other rows name goes up right, and div tags disappears. It is because of smarty else. My grid is correct.

Here start my problem

{else} 

            <div class="grid_1">                

              {$obj->mMenus[i].name}
            </div>

here end my problem

Here is complete template:

<form method="post" action="admin.php">
    <div class="container">  
        <div class="grid_6 last">
        ...
        </div>

        <div class="grid_1">
            ...
        </div>
        <div class="grid_3">
            .....
        </div>
        <div class="grid_1">
            .....
        </div>
        <div class="grid_1 last">
            ....
        </div>
    </div>
    <div class="container">
        <div class="grid_6 last">
            ......
        </div>
    </div>


    .......
        <p class="no-items-found">menus...!</p>
    ......
        <div class="container">
            <div class="grid_1">
                Menu Name
            </div>
            <div class="grid_3">
                Menu Content
            </div>
            <div class="grid_1">
                Menu Published
            </div>
            <div class="grid_1 last">
                &nbsp;
            </div>
        </div>



        .....
            <div class="container">           
                <div class="grid_1">
                    .......
                </div>
                <div class="grid_3">
                    .......
                </div>
                <div class="grid_1">
                    .......
                </div>
                <div class="grid_1 last">
                  ........
                  ........
                </div> 
            </div>
        {else}
            <div class="container">       
                <div class="grid_1">                
                    ......
                </div>
                <div class="grid_3">
                    ......
                </div>
                <div class="grid_1">
                    .....
                </div>
                <div class="grid_1 last">
                    ......
                    .......
                </div>
            </div>
        ......
</form>

The end of template.

I see now that in this code div not disappears, but also name gos up. Source Page view is:

<div class="container">       
<div class="grid_1">                

              .......
            </div>

.......

<!DOCTYPE html>
<html>
  <head>
    <title>Authentication</title>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="accessories/styles/kartedium.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>



<form method="post" action="admin.php">
        <div class="container">  
                <div class="grid_6 last">
               .....
                  .....
                </div>

                <div class="grid_1">
                  ......
                </div>
                <div class="grid_3">
                  ......
                </div>
                <div class="grid_1">
                  .......
                </div>
                <div class="grid_1 last">
                  .....
                </div>
        </div>
        <div class="container">
                <div class="grid_6 last">
                 .....
                </div>
        </div>



        <div class="container">
                <div class="grid_1">
                  Menu Name
                </div>
                <div class="grid_3">
                  Menu Content
                </div>
                <div class="grid_1">
                  Menu Published
                </div>
                <div class="grid_1 last">
                  &nbsp;
                </div>
        </div>




                                             <div class="container">       


                <div class="grid_1">                

                  .....
                </div>


                <div class="grid_3">
                  <p>
....


<p>.......
                </div>
                <div class="grid_1">
                  2017-02-26
                </div>
                <div class="grid_1 last">
                  ......
                </div>
  </div>
                                      <div class="container">       


                <div class="grid_1">                

                 ......
                </div>


                <div class="grid_3">
                  <p>
......


.......

                </div>
                <div class="grid_1">
                  2017-02-26
                </div>
                <div class="grid_1 last">
                  <input type="submit"
        .....
        ......
                </div>
  </div>
                                      <div class="container">       


                <div class="grid_1">                

                 ......
                </div>


                <div class="grid_3">
                  <p>
.....

......

                </div>
                <div class="grid_1">
                  2017-02-26
                </div>
                <div class="grid_1 last">
                  ......
                </div>
  </div>
                                      <div class="container">       


                <div class="grid_1">                

                  .......
                </div>


                <div class="grid_3">
                  <p>
......



.....
                </div>
                <div class="grid_1">
                  2017-02-26
                </div>
                <div class="grid_1 last">
                  .....
         .....
                </div>
  </div>
                                      <div class="container">       


                <div class="grid_1">                

                  .....
                </div>


                <div class="grid_3">
                  <p>
.....

......

                </div>
                <div class="grid_1">
                  2017-02-26
                </div>
                <div class="grid_1 last">
                  ....
         .....
                </div>
  </div>
                                      <div class="container">       


                <div class="grid_1">                

                  .....
                </div>


                <div class="grid_3">
                  <p>

.....

.....

                </div>
                <div class="grid_1">
                  2017-02-26
                </div>
                <div class="grid_1 last">
                  ..
       ....
                </div>
  </div>
                                      <div class="container">       


                <div class="grid_1">                

                  ....
                </div>


                <div class="grid_3">
                  <p>
......

                </div>
                <div class="grid_1">
                  2017-02-25
                </div>
                <div class="grid_1 last">
                  ....
      ....
         ....
                </div>
  </div>
                                      <div class="container">       


                <div class="grid_1">                

                  ....
                </div>


                <div class="grid_3">
                  <p>

.....

.....
                </div>
                <div class="grid_1">
                  .....
                </div>
                <div class="grid_1 last">
                  ......
                </div>
  </div>

                </form>

  </body>
</html>

The end of complete source page.

The complete CSS:

body {
  font-family: 'Nunito', sans-serif;
  font-weight: 100;
  font-size: 1em;
  color: #faf3bc;
  background-color: #0976B2;
}

.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */
.grid_4 { width: 65.625%; } /* 525px/800px = 65.625% */
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */
.grid_6 { width: 100%; } /* 800px/800px = 100% */

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
  margin-right: 1.25%;
  float: left;
  display: block;
}
.last {margin-right:0; }

.container{
  width: 90%;
  max-width: 800px;
  padding: 4% 0;
  margin: auto;
}
img {
  max-width: 100%;
}
h1 {
  font-size: 2.750em;
  line-height: 1.25em;
  font-weight: 100;
  letter-spacing: -2.75px;
  color: #ffffff;
}

a:link {color:#b4c34f; text-decoration:none;}      /* unvisited link */
a:visited {color:#b4c34f; text-decoration:none;}  /* visited link */
a:hover {color:#faf3bc; text-decoration:underline;}  /* mouse over link */
a:active {color:#b4c34f; text-decoration:none;}  /* selected link */

a.selected {color:#ffffff;}  /* selected link */

ul {
  list-style-type:none;
}
   @media screen and (max-width : 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
  width: 100%;
}}

The end of CSS

b2ok
  • 544
  • 6
  • 13
  • Of couse. {/if} is on the end. All working like before grid, like in table, exept that no good parse HTML, disapears div tags around "name", and name without div go up. – b2ok Feb 28 '17 at 10:45
  • I have provided more code. – b2ok Feb 28 '17 at 11:27
  • Possible duplicate of [How to float 3 divs side by side using CSS](http://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css) – NineBerry Feb 28 '17 at 16:17

1 Answers1

1

You have a problem with your CSS.

When you use float: left to position divs inside a container horizontally, you need to add the clear attribute to the container to stop the containers from floating as well.

Change the container class like that:

.container{
  clear:both;
  width: 90%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4%;
}

See also How to float 3 divs side by side using CSS

Community
  • 1
  • 1
NineBerry
  • 26,306
  • 3
  • 62
  • 93
  • Excelent NineBerry ! You solved problem! I have added clear attribute but behind rows. Applause for you and thank you very much! – b2ok Feb 28 '17 at 15:49