Div 텍스트가 다른 div를 밀어 내림

Question

mondaySpecial의 텍스트가 두 번째 줄로 이동하면 tuesdaySpecial-saturdaySpecial이 페이지 아래쪽으로 밀려 div의 서식이 엉망이됩니다. 같은 일이 다른 스페셜 중 하나에서 발생합니다. 그 아래의 스페셜은 아래로 밀려납니다. 이 문제를 어떻게 방지 할 수 있습니까?

<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

야 문제가 모든 스페셜 당신은 요소의 하단을 지정하는 것입니다 : 여기

또한이를 보여 JS 바이올린에 대한 링크입니다. div를 입력하면 div가 높아지지만 하단은 내용을 푸시 다운하는 것과 같습니다. 난, 당신의 코드를 약간 수정하는 당신을 조언 모든 요소를 ​​사용자의 요구에 맞는 고정 된 높이 제공 : 나는 당신이하고있는 일의 아이디어를 사용하는 위의 코드를 업데이트

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

Example Here

Answer 2

100 % 확인 :

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

을 편집 :

귀하의 웹 사이트를 본 후 제 답변을 업데이트했습니다 - 문단의 글자 수를 줄이고 그 다음날을 강제 적용 할 수있는 최대 너비가 있습니다. http://jsfiddle.net/loanburger/vzqohwvf/