www.webdeveloper.com
Results 1 to 5 of 5

Thread: HTML Columns

  1. #1
    Join Date
    Jul 2010
    Posts
    1

    HTML Columns

    Hello,


    I am trying to write a section of code so that my website displays my name/logo and in a parallel space next to it I wanted to put a Bing search bar. I tested my code out in W3 display page and the two sections that I wished to display side by side appear one after the other, with the search bar below instead of to the right. I would love any help on how to keep the Seismologik banner and the search bar in line with one another. Thank you!
    This is the code:

    Code:
    <html>
    <body>
    
    
      <tr>
        <th><img border="0" src="http://www.seismologik.com/storage/Seismologic_logo4e%20copy.jpg" alt="Seismologik" width="510" height="75" /></th>
      </tr>
    
    
    <table cellpadding="0" cellspacing="0" style="width:275px; height:32px;"><tr id="WLSearchBoxPlaceholder"><td style="width:100%; border:solid 1px #cccccc; border-right-style:none; padding-left:10px; padding-right:10px; vertical-align:middle;"><input id="WLSearchBoxInput" type="text" value="Loading..." disabled="disabled" style="background-image:url(http://www.bing.com/siteowner/s/siteowner/searchbox_background_k.png); background-position:right; background-repeat:no-repeat; font-family:Arial; font-size:14px; color:#000000; width:100%; border:none 0 transparent;"/></td><td style="border:solid 1px #cccccc; border-left-style:none; padding-left:0px; padding-right:3px;"><input id="WLSearchBoxButton" type="image" src="http://www.bing.com/siteowner/s/siteowner/searchbutton_normal_k.gif" style="border:none 0 transparent; height:24px; width:24px; vertical-align:top;"/></td></tr></table>
    	<script type="text/javascript" charset="utf-8">
    
    </body>
    </html>

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    I assume your top <tr> is actually in a table.

    But I would strongly recommend steering away from using tables for layout. Imo they can get very messy very quickly.

    One way to put the banner and search bar on one line without using tables is something like this:


    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    style type="text/css">
    <!--

    #container {
    width500px;
    overflowhidden}
     
    #leftCol {
    border1px solid red;
    floatleft}
     
    #rightCol {
    border1px solid green;
    floatright}

    -->
    </
    style>
    </
    head>
    <
    body>
     
    <
    div id="container">

           <
    div id="leftCol">
                 
    place your logo in here
           
    </div>

          <
    div id="rightCol">
                  
    place your search bar here
           
    </div>

    </
    div>
     
    </
    body>
    </
    html

  3. #3
    Join Date
    Jul 2010
    Posts
    5
    Also, tables can cause a lot of problems down-the-road. Divs+CSS win, every time. Especially with the updated CSS3 coming soon to a theater near you!

  4. #4
    Join Date
    Mar 2010
    Location
    Singapore
    Posts
    367
    Code:
    <style type="text/css">
    <!--
    
    #container {
    width: 500px;
    overflow: hidden}
     
    #leftCol {
    border: 1px solid red;
    float: left}
     
    #rightCol {
    border: 1px solid green;
    float: right}
    
    -->
    </style>
    But if you do not use HTML table and go for DIV/CSS to control positioning you have to deal with different monitor screen resolution isn't it ?

    width: 500px; //ain't this hard-coding some pixel values to it ? Or px is a device independent display units ?

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    I'm not sure what point you are trying to make.

    Yes, if an element width is set to say 200px, it would take up virtually all the available width in a screen only 300px wide and take up much less space, relatively, in a screen that is say 1200px wide.

    You could set the width to percentage units to make the element width "elastic" if you want so that it expands and contracts with the browser window size.

    But you would have exactly the same issues with tables if you want to specify a width for the table.

    I don't like using tables for layout, because the markup code can get very messy, large in volume and difficult to maintain very quickly - especially if you use nested tables.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles