CODEWITHSUNDEEP
htmlcss
JonnyRaa
JonnyRaa

Reputation: 8038

Top aligning something with Css

I'm just starting to look at html/css and having some problems getting my head around how the layout engine works.

I'm from a c# background and anything with hardcoded widths/heights feels like something is wrong. One of the first things I discovered is that you can't make divs expand to fill their available height in a sensible way, so I've been using tables.

The UI I want is basically a grid, which is the main part of the page with a side panel. The idea is to navigate the grid with the arrow keys and then select options for a cell using the side panel - its a fairly straightforward master/detail.

I'm happy with using a table to seperate the two columns but the problem I'm running into is in the side panel:

I want to have a search box at the top. When you type into the search box it 'autocompletes' to show you a options relevant to what you just typed.

The first problem I had was that the search box wasn't at the top of the cell in the grid. So I was using:

position: absolute;
top: 0;

for the <input> with a position:relative set in the td.

I was then using another div inside the cell to layout the results. That works fine but the search box obscures the first item.

I then tried changing the search box to have display: block which solves the problem but means the search box isn't top aligned when there are no search results!

It seems like using the display and position attributes are mutually exclusive so how do I achieve this in a sensible way?

One option seems to be to just use tables for everything, is there anything wrong with that?

#mainLayout
{
    width: 100%
}

#turnSelectionPanel
{
    /*visibility: hidden;*/
    width: 30%;
    height: 100%;
    background-color: saddlebrown;
    /*this is to allow positioning within this element using 'absolute'*/
    position: relative;
}

#turnSearchBox
{
    min-height: 20px;
    max-width: 200px;
    min-width: 100px;
    display: block;
    /*or
    position: absolute;
    top: 0;
    */
}
    <body>

    <table id="mainLayout">
        <tr>
            <td>
                <table id="roster"></table>
            </td>
            <td id="turnSelectionPanel">
                <input type="text" id="turnSearchBox"/>
                <div id="turnArea">

                </div>
            </td>
        </tr>
    </table>

    </body>

I've ommitted some of the other css for brevity's sake + some of the stuff shown there is basically irrelevant - widths etc.

The table + sidepanel is populated from javascript

Upvotes: 1

Views: 100

Answers (2)

jbutler483
jbutler483

Reputation: 24559

I'm not a fan (at all, really) of using floats, so this is my approach on your layout:

I'm not sure if you want a left column, but I've added one in for your choice anyway:

.left, .nav,.right, .content {
  display: inline-block;
  position: absolute;
  position: absolute;
}
html,
body {
  margin: 0;
  padding: 0;
}
.nav {
  width: 75%;
  background: lightgray;
  height: 100px;
  top: 0;
  left: 0;
}
.left {
  width: 20%;
  top: 100px;
  left: 0;
  background: darkgray;
  height: calc(100% - 100px);
}
.right {
  width: 25%;
  top: 0;
  right: 0;
  background: gray;
  height: 100%;
}
.content {
  width: 55%;
  height: calc(100% - 100px);
  background: lightblue;
  top: 100px;
  left: 20%;
}
#search {
  position: relative;
  width: 90%;

  margin: 2%;
}
<div class="nav">I'll go most of the way along the top</div>
<div class="left">I'll be a column on the left</div>
<div class="right">
  <input id="search" type="text" placeholder="Search Me" />
  <br/>
  <div class="furtherContent">
    I'll be a column on the right</div>
</div>
<div class="content">I'll be a content</div>

Upvotes: 1

SRing
SRing

Reputation: 694

This is a basic structure that you can you use.

<body>
  <!-- This is a wrapper that controls the total height and width of page elements -->
  <div id="mainLayout"> 

    <!-- You can position the elements however you would like. -->
    <div id="leftColumn"> ...Code goes here... </div>
    <div id="searchBar"> ...Code goes here... </div>
    <div id="rightColumn"> ...Code goes here... </div>
  </div>
</body>

I am particularly fond of using float:left; to arrange my elements. Something like:

#mainLayout {
    width:100%
    height:100%;
}
#leftColumn {
    width:75%;
    height: 100%;
    float:left;
}
#searchBar{
    width:25%;
    height: 10%;
    float:left;
}
#rightColumn {
    width:25%;
    height: 90%;
    float:left;
}

This will create a layout that scales with the window, and gives you a left column and a right column with a search bar above it. Obviously if you know what size you want your elements than you can simply set them.

Upvotes: 2

Related Questions