1

Here is what I have. I played with DIV tags but still cannot figure out how to use them to design this page?

enter image description here

one of the problems I am having is that I cannot correctly align the "Alias" label with its TextBox that is under it...and also putting these controls on the same line - for example Reference Sequence and Ancestry is another problem I could not fix yet.

3 Answers 3

1

Tables shouldn't be considered unless it's truly tabular data. I'd recommend the blue and green spaces be div elements with set widths, floated left. The grey div should be cleared. The green and blue sections seem to be separated for layout convenience and are not related content, so I wouldn't recommend fieldset over div elements.

If you give label and input/select elements set widths and use display: block, the label display shouldn't be problematic. The Not Found link and checkbox seem to be the only unique parts to the form.

1

Float the top 2 divs (blue and green), set a width for each of them and toss a margin-right on the blue one (or a margin-left on the green one) to get the red space you want.Then have the bottom div clear so it skips onto the next line.

As for the "Alias" label and alignment issue, I'd suggest using an unordered list with list-style:none. Each label would go on its own li, as would each input. This should automatically line them up left justified, as is the case with your current form. Plus it has the benefit of not having to hard-set the width (if that's something that can be said to be an issue in this case).

example markup

<li><label>Alias</label></li>
<li><input type='text'></li>
1

Try this. It is likely that it will work. You may have to tweak few style values for your needs.

<div style="clear:both">
  <div id="topLeft" style="float:left;width:400px;padding:7px">

     <div style="clear:both;margin:5px 0">
       Gene Symbol
     </div>
     <div style="clear:both;margin:5px 0">
        //drop 'Gene Symbol Search Box' here
     </div>


     //repeat Gene Symbol like divs for other elements

  </div>

  <div id="topSeparator" style="float:left;width:10px">
    &nbsp;
  </div>

  <div id="topRight" style="float:left;width:400px;padding:7px">
     <div style="clear:both;margin:5px 0">
       Alias
     </div>
     <div style="clear:both;margin:5px 0">
        //drop 'Alias Box' here
     </div>


     //repeat Alias like divs for other elements

  </div>
</div>
<div style="clear:both;margin:10px 0 0 0;padding:7px">
  <div style="clear:both;margin:5px 0">
    //drop checkbox here
  </div>
  <div style="clear:both;margin:5px 0">
    //drop buttons here
  </div>
</div>
1
  • It looks ok in FF. Have you tried? Let me know if any further help required.
    – kheya
    Jun 20, 2011 at 21:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.