HTML Columns

**seismologik** · 07-23-2010 06:34 PM

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>

**tirna** · 07-23-2010 06:49 PM

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 {
width: 500px;
overflow: hidden}
 
#leftCol {
border: 1px solid red;
float: left}
 
#rightCol {
border: 1px solid green;
float: right}

-->
</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>

**importune** · 07-26-2010 03:09 PM

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!

**sohguanh** · 07-26-2010 11:19 PM

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 ?

**tirna** · 07-26-2010 11:28 PM

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: HTML Columns

Thread Tools

Display

HTML Columns

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions