Div text pushes down other divs

Question

If the text within mondaySpecial goes to a second line then it pushes tuesdaySpecial-saturdaySpecial farther down the page, which messes up the formatting of the divs. Same thing happens with any of the other specials. The specials below them get pushed down. How can I prevent this?

<div id="specials"> <img src="SleepingMoonImages/menuSpecials.png" width="360" height="839" alt=""/> <div id="menuSpecials">
            <div id="weeklySpecialsLabel">Weekly Specials </div>
            <div id="redUnderline1"></div>
            <div id="weeklySpecialsDays">
                <div id="mondayLabel">Monday</div>
                <div id="tuesdayLabel">Tuesday</div>
                <div id="wednesdayLabel">Wednesday</div>
                <div id="thursdayLabel">Thursday</div>
                <div id="fridayLabel">Friday</div>
                <div id="saturdayLabel">Saturday</div>
            </div>

            <div class="specialsFormat" id="mondaySpecial">Monday Special Goes Here df  dsaf fds f sfd</div>
             <div class="specialsFormat" id="tuesdaySpecial">Tuesday Special Goes Here</div>
               <div class="specialsFormat" id="wednesdaySpecial">Wednesday Special Goes Here</div>
                <div class="specialsFormat" id="thursdaySpecial">Thursday Special Goes Here</div>
                 <div class="specialsFormat" id="fridaySpecial">Friday Special Goes Here</div>
                  <div class="specialsFormat" id="saturdaySpecial">Saturday Special Goes Here</div>
      </div> </div>

CSS

.specialsFormat
 {  
  float: left;
  margin-right: 10px;
 }
#mondaySpecial{

    width:300px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    bottom:644px;
    left:41px;
    font-size:12px;
    }
#tuesdaySpecial{

    width:300px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    bottom:557px;
    left:41px;
    font-size:12px;
    }
#wednesdaySpecial{

    width:300px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    bottom:490px;
    left:41px;
    font-size:12px;
    }
#thursdaySpecial{

    width:300px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    bottom:405px;
    left:41px;
    font-size:12px;
    }
#fridaySpecial{

    width:300px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    bottom:317px;
    left:41px;
    font-size:12px;
    }
#saturdaySpecial{

    width:300px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    bottom:227px;
    left:41px;
    font-size:12px;
    }

Answer 1

Hey the problem is that for all your specials you specify a bottom for the element. If you type the div gets higher but the bottom will be the same pushing your content down. I advise you to revise your code a little bit, give all the elements a fixed height that fits your needs:

.specialsFormat {
    margin: 0 auto;
    width: 300px;
    height: 250px; 
}

Example Here

Answer 2

Not 100% sure how you want the layout to look but here some markup to help you along:

  .left { float: left; margin-right: 10px; } .wrapme { max-width: 300px; } 

 <div id="menuSpecials"> <b id="weeklySpecialsLabel">Weekly Specials </b> <div id="redUnderline1"></div> <div id="weeklySpecialsDays"> <div class="left" id="mondayLabel">Monday: </div><br/> <p id="mondaySpecial">Special Goes Here df dsaf fds f sfd</p> <div class="left" id="tuesdayLabel">Tuesday: </div><br/> <p class="wrapme" id="mondaySpecial">Special Goes Here df dsaf fds f sfd Special Goes Here df dsaf fds f sfSpecial Goes Here df dsaf fds f sfSpecial Goes Here df dsaf fds f sf</p> <div class="left" id="wednesdayLabel">Wednesday: </div><br/> <p class="wrapme" id="mondaySpecial">Special Goes Here df dsaf fds f sfd Special Goes Here df dsaf fds f sfSpecial Goes Here df dsaf fds f sf</p> <div class="left" id="thursdayLabel">Thursday: </div><br/> <p class="wrapme" id="mondaySpecial">Special Goes Here df dsaf fds f sfd</p> <div class="left" id="fridayLabel">Friday: </div><br/> <p class="wrapme" id="mondaySpecial">Special Goes Here df dsaf fds f sfd</p> <div class="left" id="saturdayLabel">Saturday: </div><br/> <p class="wrapme" id="mondaySpecial">Special Goes Here df dsaf fds f sfd</p> </div> 

EDIT:

After seeing your website I have updated my answer - the paragraphs now have a max width on them which will force the text to wrap and push down the next day.

Here is also a link to JS fiddle to show this: http://jsfiddle.net/loanburger/vzqohwvf/