Top aligning something with Css

Question

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

Using tables is an allowable, but it is considered ugly and outdated and is longer popular method for laying out pages. Generally
is used to create the same, but more controllable structure. To get your search bar flush with the top of the page just move the
with the search bar above your right column. — SRing, Feb 06 '15 at 15:20
You might want to learn how the `position` style works: https://developer.mozilla.org/en-US/docs/Web/CSS/position — Simon, Feb 06 '15 at 15:22
@jbutler483 I've seen a similar sentiment expressed elsewhere, why is that? — JonnyRaa, Feb 06 '15 at 16:22
@JonnyLeeds: When you're trying to 'push the boundaries' with css, the tabular layouts will cause *nightmares* with styling. Also, Tables are *designed* for one thing - tabular data. **not layout**. So hence, the importance of using divs and using positioning is heavily stressed. [See more here](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) — jbutler483, Feb 06 '15 at 16:28

score 2 · Accepted Answer · answered Feb 06 '15 at 15:36

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.

I would avoid floating elements, although that's more personal preference. It's much easier to use `positioning` and `display` css properties instead. — jbutler483, Feb 06 '15 at 16:29
@jbutler483 could you provide an example of how you would do this? — JonnyRaa, Feb 06 '15 at 16:40
@sring thanks for the response. This works and I can sort of see what's going on here — JonnyRaa, Feb 06 '15 at 16:41

jbutler483 · Answer 2 · 2015-02-06T17:02:40.720

1

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>

edited Feb 06 '15 at 17:02

answered Feb 06 '15 at 16:53

jbutler483

24,074
9
92
145

thanks, definitely useful to see another way of doing things. Not had chance to mess around with it properly yet... I've not come acrosss calc before, that looks useful – JonnyRaa Feb 06 '15 at 16:58
@JonnyLeeds: Example is exactly that: an example: if you're only getting into css, I would advise to (a) steer clear of floating elements, and (B) steer clear of bootstrap - I've used it and hated it, plus there's 100's of questions about it posted daily. – jbutler483 Feb 06 '15 at 17:04
thanks. Yeah I'm not a big fan of libraries/frameworks - think you should understand the problem they are solving before using them because they always come with a cost. I didn't downvote you btw - I've got this upvoted - thanks for your help – JonnyRaa Feb 09 '15 at 10:08
@JonnyLeeds: I've not used a library? Css is *used for describing the look and formatting of a document written in a markup language* [~Wikipedia](http://en.wikipedia.org/wiki/Cascading_Style_Sheets) – jbutler483 Feb 09 '15 at 10:09
Yeah I know you were warning off using bootstrap and I agree with you - I want to learn about css before I use something to help me with it/do it for me – JonnyRaa Feb 09 '15 at 10:12

Top aligning something with Css

2 Answers2