Content not displayed correctly

Question

EDIT: here is a link to whats going on http://flameforged.altervista.org/games/gd/

I have 4 divs inside the <main> element I have styled them to display all on the same line straight across no matter what.

When I have lets say <h3>Title</h3> in all the divs they all display correctly still but once I add a little input field <input type="text"> all the other divs appear to be moved down.

I am not sure how to fix the issue here is my css and html

body{
 width: 100%;
    height: 100%;
}

header{
 background-color: #c0c0c0;
    border-radius: 0px 0px 0px 0px;
 -moz-border-radius: 0px 0px 0px 0px;
 -webkit-border-radius: 0px 0px 0px 0px;
 border: 1px solid #c4bac4;
}

.nav-bar{
 display: inline;
    float: right;
}

.panel{
 display: inline-block;
    border-radius: 0px 0px 0px 0px;
 -moz-border-radius: 0px 0px 0px 0px;
 -webkit-border-radius: 0px 0px 0px 0px;
 border: 1px solid #c4bac4;
    width: 24%;
    height: 100%;
    padding: 2px;
    margin-left: 0%;
}

    <main>
     <div class="panel" id="researchPanel">
         <h3>Research</h3>
        </div>
        <div class="panel" id="typerPanel">
         <h3>HTML Terminal</h3>
         <form>
          <input type="text" class="typer" id="typer" placeholder="Type an HTML tag">
            </form>
        </div>
        <div class="panel" id="employeePanel">
         <h3>Employees</h3>
        </div>
        <div class="panel" id="upgradesPanel">
         <h3>Upgrades</h3>
        </div>
    </main>

score -1 · Accepted Answer · answered Jun 16 '16 at 18:02

Give vertical-align: top to panel. here is your working answer

body{
 width: 100%;
    height: 100%;
}

header{
 background-color: #c0c0c0;
    border-radius: 0px 0px 0px 0px;
 -moz-border-radius: 0px 0px 0px 0px;
 -webkit-border-radius: 0px 0px 0px 0px;
 border: 1px solid #c4bac4;
}

.nav-bar{
 display: inline;
    float: right;
}

.panel{
 display: inline-block;
    border-radius: 0px 0px 0px 0px;
 -moz-border-radius: 0px 0px 0px 0px;
 -webkit-border-radius: 0px 0px 0px 0px;
 border: 1px solid #c4bac4;
    width: 24%;
    height: 100%;
    padding: 2px;
    margin-left: 0%;
vertical-align: top;
}

    <main>
     <div class="panel" id="researchPanel">
         <h3>Research</h3>
        </div>
        <div class="panel" id="typerPanel">
         <h3>HTML Terminal</h3>
         <form>
          <input type="text" class="typer" id="typer" placeholder="Type an HTML tag">
            </form>
        </div>
        <div class="panel" id="employeePanel">
         <h3>Employees</h3>
        </div>
        <div class="panel" id="upgradesPanel">
         <h3>Upgrades</h3>
        </div>
    </main>

wow I spent 3 hours last night trying to fix it lol and it was that simple will accept when it lets me — , Jun 16 '16 at 18:03
@JoséphFlames This does not work on less wide screens ... check out the dupe link why and how to fix — Asons, Jun 16 '16 at 18:12
I have different css and bootstrap which handles less wide screens — , Jun 16 '16 at 18:17

Content not displayed correctly

1 Answers1