[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Help getting div boxes to align horizontally

Posted on 2009-02-09
2
Medium Priority
?
333 Views
Last Modified: 2012-05-06
On my page I'm trying to get my search box to sit next to my menu buttons. I have both the buttons and the search box inside separate div tags so that I can give them different top-margin alignments. Both Div tags are set to "float: left;" it looks fine in dreamweaver however in my browser the search box is being pushed down to the next line. Could some one take a look and tell me how to get the search box to sit next to the buttons instead of below them? Thanks.

Page:
http://www.robinbenzle.com/indextemp.html

CSS:
.buttonvertical {
      height: 30px;
      padding-top: 5px;
      float: left;
}
.searchvertical {
      height: 30px;
      padding-top: 5px;
      float: left;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
	<title>Your Company Website</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body leftmargin=0 topmargin=0 marginheight="0" marginwidth="0" bgcolor="#ffffff">
 
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
  <tr>
	<td width="50%" background="images/bg.gif"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
	<td valign="bottom" background="images/bg_left.gif"><img src="images/bg_left.gif" alt="" width="17" height="16" border="0"></td>
	<td valign="top">
      <table width="950" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="images/header.jpg" width="950" height="254"></td>
        </tr>
        <tr>
          <td valign="top">
          
            <div align="center">
              <div class="buttonvertical"><img src="images/buttonhome.jpg" width="89" height="20"><img src="images/buttonrecipe.jpg" width="108" height="20"><img src="images/buttonvideorecipe.jpg" width="138" height="20"><img src="images/buttonfoodarticles.jpg" width="107" height="20"><img src="images/buttontravelvideos.jpg" width="109" height="20"><img src="images/buttontravelarticles.jpg" width="115" height="20">
            </div> 
              <form method="get" action="http://www.google.com/custom">
                <div class="searchvertical">
                <input type="submit" name="btnG" value="Search" />
                &nbsp;
                <input type="text" name="q" size="10" maxlength="255" value="" />
                &nbsp;
                <input type="hidden" name="sitesearch" value="http://www.robinbenzle.com/" />
                </div>
              </form>  
              </div>
              </td>
        </tr>
      </table>
      <table border="0" cellpadding="0" cellspacing="0" width="950">
<tr>
	<td colspan="4" height="19" background="images/fon01.gif"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
<tr>
	<td background="images/fon02.gif" height="87" align="center" width="377">
<table border="0" cellpadding="0" cellspacing="0" background="">
<form action="" method="post">
<tr>
	<td rowspan="2" width="130"><p><img src="images/e06.gif" width="16" height="9" alt="" border="0">&nbsp;&nbsp;<b>Members Login</b></p></td>
	<td><input type="Text" name="" value=" USERNAME" size="15"></td>
</tr>
<tr>
	<td><input type="Text" name="" value=" PASSWORD" size="10"><input type="Image" src="images/b_go.gif" width="19" height="25" alt="" border="0" hspace="10" align="absbottom"></td>
</tr>
</form>
</table>
	</td>
	<td background="images/fon02.gif" height="87"><img src="images/e01.gif" width="2" height="87" alt="" border="0"></td>
	<td background="images/fon02.gif" height="87" align="center" width="380">
<table border="0" cellpadding="0" cellspacing="0" background="">
<form action="" method="post">
<tr>
	<td width="100"><p><img src="images/e06.gif" width="16" height="9" alt="" border="0">&nbsp;&nbsp;<b>Search</b></p></td>
	<td><input type="Text" name="" value="" size="12"></td>
	<td><input type="Image" src="images/b_go.gif" width="19" height="25" alt="" border="0" hspace="10" align="absbottom"></td>
</tr>
</form>
</table>
	</td>
	<td background="images/fon02.gif" height="87" align="right"><img src="images/e02.gif" width="21" height="87" alt="" border="0"></td>
</tr>
<tr>
	<td colspan="4" height="21" background="images/fon03.gif"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="950">
<tr bgcolor="#AFC0D0" valign="top">
	<td width="362">
<p class="t01" style="font-size: 12px;"><img src="images/e05.gif" alt="" width="16" height="9" border="0">&nbsp;&nbsp;<b>Welcome To Our Company</b></p>
<p class="t01">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
	</td>
	<td><img src="images/e03.gif" width="15" height="298" alt="" border="0"></td>
	<td bgcolor="#D1D6DB" background="images/fon01.jpg" width="250" style="background-position: top; background-repeat: repeat-x;">
<p style="font-size: 12px;"><img src="images/e06.gif" width="16" height="9" alt="" border="0">&nbsp;&nbsp;<b>Latest news</b></p>
<p class="left"><img src="images/dot_g.gif" width="5" height="5" alt="" border="0" align="middle">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam nonummy nibh commodo consequat.</p>
<p class="left"><a href="">Read more</a></p>
<p class="left"><img src="images/dot_g.gif" width="5" height="5" alt="" border="0" align="middle">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam nonummy nibh commodo consequat.</p>
<p class="left"><a href="">Read more</a></p>
<p class="left"><img src="images/dot_g.gif" width="5" height="5" alt="" border="0" align="middle">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam nonummy nibh commodo consequat.</p>
<p class="left"><a href="">Read more</a></p>
	</td>
	<td><img src="images/e04.gif" width="14" height="298" alt="" border="0"></td>
	<td width="139"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="780">
<tr>
	<td colspan="2"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
<tr bgcolor="#EE7B10">
	<td height="19" colspan="2"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
<tr>
	<td height="70"><p>Copyright &copy;2003 CompanyName.com</p></td>
	<td>
<p class="menu02">
<a href="">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="">About Us</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="">Support</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="">Services</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="">Contacts</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="">Help</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="">FAQ</a>
</p>
	</td>
</tr>
</table>
	</td>
	<td valign="bottom" background="images/bg_right.gif"><img src="images/bg_right.gif" alt="" width="17" height="16" border="0"></td>
	<td width="50%" background="images/bg.gif"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
</table>
 
</body>
</html>

Open in new window

0
Comment
Question by:elliottbenzle
  • 2
2 Comments
 
LVL 6

Expert Comment

by:Fero45
ID: 23596515
Try putting the navigation buttons and the form in one division
<div align="center">
  <div class="buttonvertical">
   <form method="get" action="http://www.google.com/custom">  
     <img src="images/buttonhome.jpg" width="89" height="20">
     <img src="images/buttonrecipe.jpg" width="108" height="20">
     <img src="images/buttonvideorecipe.jpg" width="138" height="20">
     <img src="images/buttonfoodarticles.jpg" width="107" height="20">
     <img src="images/buttontravelvideos.jpg" width="109" height="20">
     <img src="images/buttontravelarticles.jpg" width="115" height="20">
              
     <input type="submit" name="btnG" value="Search" />&nbsp;
     <input type="text" name="q" size="10" maxlength="255" value="" />&nbsp;
     <input type="hidden" name="sitesearch" value="http://www.robinbenzle.com/" />
    </form>            
  </div>
</div>

Open in new window

0
 
LVL 6

Accepted Solution

by:
Fero45 earned 2000 total points
ID: 23596541
This would work better. Keep the DIVs. Try this.
    <div align="center">
        <div class="buttonvertical">
           <form method="get" action="http://www.google.com/custom">  
             <div style='padding-top: 5px; float: left;'>
              <img src="images/buttonhome.jpg" width="89" height="20">
              <img src="images/buttonrecipe.jpg" width="108" height="20">
              <img src="images/buttonvideorecipe.jpg" width="138" height="20">
              <img src="images/buttonfoodarticles.jpg" width="107" height="20">
              <img src="images/buttontravelvideos.jpg" width="109" height="20">
              <img src="images/buttontravelarticles.jpg" width="115" height="20">
              </div>
  <div style='float: right;'>
    <input type="submit" name="btnG" value="Search" />&nbsp;
    <input type="text" name="q" size="10" maxlength="255" value="" />&nbsp;
    <input type="hidden" name="sitesearch" value="http://www.robinbenzle.com/" />
  </div>
		   </form>            
    	</div>
     </div> 

Open in new window

0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question