css - 关于对齐两行文本的简单 Div/文本问题

Question

这个问题的解决方案可能非常简单，但我现在有大量的大脑放屁和服务器危机(我是新的网页设计师和新手系统管理员......疯狂的日程安排)。

http://www.teetimelawn.com

老板想要两个电话号码，而不是顶部框中的一个。我希望数字对齐，并且“免费估算按钮”保持原样。

我将该部分放在具有相对位置的 DIV 中，但它仍然没有将主标题菜单栏(带有图像映射)进一步向下推。

CSS:

#head {
    float: right;
    width: 500px;
    height: 79px;
    font-size: 1.5em;
    padding-right: 27px;
    padding-bottom: 6px;
    display: block;
    position:relative;
}
#head1 {
    width: 450px;
    float: left;

    font-family: kreon;
    font-size: 1.3em;
}

h1 {
    font-size: 1.6em;
    color: #FFFFFF;
    font-family: kreon;
    text-shadow: 2px 1px 1px #000;
    -webkit-font-smoothing: antialiased;
}


.header {
position: relative;

}



.container {
    width: 1030px;
    margin: 0 auto; 
    z-index: 2;
}

.header {
position: relative;

}

HTML:

<div class="container">
  <div class="header">
    <div id="head1">
      <h1>Safer Products, Better Results!</h1></div><div id="head">
      <h1><img src="topbutn.png" width="182px" height="33px" alt="topbtn"> (618) 632-8873
<br>(636) 272-8873 </h1>
    </div>
  <img src="/mainbar2.png" alt="main" name="Nav Bar"
   border="0" usemap="#Map" id="bar">
      <map name="Map">
        <area shape="rect" coords="33,20,231,159" href="/index.html" alt="Lawn and Landscaping from the pros!">
        <area shape="rect" coords="862,31,949,145" href="/paybal.php" alt="">
        <area shape="rect" coords="741,33,847,148" href="http://www.facebook.com/pages/Tee-Time-Lawn-Care/173861472673451" alt="Expert Advice Blog">
        <area shape="rect" coords="626,33,722,146" href="/landscaping.html" alt="Landscaping services">
        <area shape="rect" coords="516,31,614,146" href="/pestcontrol.html" alt="Pest control">
        <area shape="rect" coords="395,31,508,146" href="/trees.html" alt="Tree and shrub Services">

        <area shape="rect" coords="275,32,379,147" href="/lawncare.html">
      </map>

    <!-- end .header -->
  </div>

Answer 1

从您的 #head div 中删除高度规则。

#head {
float: right;
width: 500px;
height: 79px; /* REMOVE THIS LINE */
font-size: 1.5em;
padding-right: 27px;
padding-bottom: 6px;
display: block;
position: relative;
}