CODEWITHSUNDEEP
csshtmltextindentation
deek
deek

Reputation: 1095

Simple Div/text issue on aligning text on two rows

The solution to this is probably pretty simple, but I'm having massive brain farts and server crises at the moment(I'm the new web designer and noob sysadmin...crazy schedule).

http://www.teetimelawn.com

Boss wanted two phone numbers instead of one in the top box. I want the numbers to be aligned and the "free estimate button" to stay where it is.

I put that part in a DIV with position relative but it's still not pushing the main header menu bar(with image map) further down.

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>

Upvotes: 0

Views: 132

Answers (1)

j08691
j08691

Reputation: 207901

Remove the height rule from your #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;
}

Upvotes: 2

Related Questions