Announcement

Collapse
No announcement yet.

layout

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • layout

    Hey again,

    I have another question. I was trying to make "about" page. Based on home page, as I want them to similar grid. So I made this frame, to put elements in it. It works fine on home page, but about page must have a mistake. I don't want to have the opening hours, but as soon as I take them away, the yellow frame disappears.

    If you know what I mean

    <main>
    <article>
    <section class="sectionLeft">
    <h2>Give yourself a moment of pleasure with our new delicious product</h2>
    <h2 class="pink center">Cinnamon Bun!</h2>
    <h2>Take a cup of coffee and relax.
    <br>Cinnamon Bun will make your day! </h2>
    </section>
    <section class="sectionRight"> <img src="_images/bun.jpg" alt="bun" class="bun" max-width="300"/>
    <br><br><h3 class="pink"> Every customer gets a free coffee!</h3>
    </section>
    <section class="sectionCenter">
    <h3 class="purple time"> Open:<br>
    Mon - Fri &nbsp; &nbsp; 06:00 - 18:00<br>
    Sat - Sun &nbsp; &nbsp; 10:00 - 16:00 </h3>
    </section>
    </article>
    </main>
    /* Content */

    main {
    border-radius: 30px;
    background-color: rgba(255,250,0,0.4);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    display: inherit;
    border-collapse: collapse;
    margin-left: 10%;
    margin-right: 10%;
    margin-top:5%;
    margin-bottom:2%;
    align-content:80%;
    height:inherit;
    padding:5%;
    }

    .sectionLeft {
    width: 40%;
    margin: 0;
    float: left;
    display: inherit;
    }
    .sectionRight {
    width: 55%;
    margin: 0;
    float: right;
    display: inherit;
    background-repeat: no-repeat;
    }

    .sectionCenter {
    width: relative;
    clear: both;
    position: relative;
    padding-top: 1%;
    padding-right: auto;
    padding-bottom: 1%;
    padding-left: auto;
    margin-left: 10%;
    margin-right: 10%;
    }
    Attached Files

  • #2
    try to clear your floats after the last section with a div (or whatever you prefer) and clear:both; float: none;
    Suchmaschinenoptimierung, Templating & Webentwicklung Blog
    Produkt Tests & Geschenkideen

    Comment

    Working...
    X