CODEWITHSUNDEEP
htmlcss
user2953989
user2953989

Reputation: 2979

Content displaying outside of its div

I have several boxes (only one in the code snippet) which will have different amounts of content in each box, I want them to automatically resize to fit the content. At the moment the content spills over and isn't contained within the box. I have used overflow:hidden; but this doesn't seem to have helped.

Thanks

#leadership_elections_timeline {
  background-color: rgba(92, 177, 255, 0.4);
  padding: 0 10%;
  position: relative;
  display: block;
}
#leadership_elections_timeline .timeline_divider {
  width: 100%;
}
#leadership_elections_timeline .timeline_divider > div {
  width: 150px;
  height: 90px;
  border-right: 2px solid #000;
  box-sizing: content-box;
}
#leadership_elections_timeline .timeline_object {
  width: 100%;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left {
  width: 150px;
  height: 185px;
  float: left;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left .date_circle {
  background-color: #fff;
  border: 6px solid #000;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  right: -11.5px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left p {
  padding: 5px;
  border-top: 2px dashed #c62428;
  color: #000;
  position: absolute;
  top: 41px;
  right: 11px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right {
  overflow: hidden;
  border-left: 2px solid #000;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info {
  width: 93%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 15px;
  max-height: 165px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 5px 5px 0 #c62428;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #fff;
  position: absolute;
  left: -15px;
  top: 26px;
}
<div id="leadership_elections_timeline">
	<div class="timeline_divider"><div></div></div>
	<div class="timeline_object">
		<div class="elections_timeline_left">
			<div class="date_circle"></div>
			<p>17 Jan 2017</p>
		</div>
		<div class="elections_timeline_right">
			<div class="elections_timeline_info">
				<div class="timeline_details">
					<h3>Nominations are now open!</h3>
					<p>Take our quiz to see which role you'd be best suited to.</p>
					<a href="/representation/elections" class="goButton">Nominate Yourself</a>
					<p>Think you know someone who would make a great full-time officer? Follow the link to let us know, and we'll contact them to see if they've considered running.</p>
					<a href="/representation/elections" class="goButton">Nominate a friend</a>
				</div>				
			</div>
		</div>
	</div>
</div>

Upvotes: 1

Views: 48

Answers (4)

Amir Hoseinian
Amir Hoseinian

Reputation: 2352

Just remove themax-heightfrom.elections_timeline_info 

#leadership_elections_timeline {
  background-color: rgba(92, 177, 255, 0.4);
  padding: 0 10%;
  position: relative;
  display: block;
}
#leadership_elections_timeline .timeline_divider {
  width: 100%;
}
#leadership_elections_timeline .timeline_divider > div {
  width: 150px;
  height: 90px;
  border-right: 2px solid #000;
  box-sizing: content-box;
}
#leadership_elections_timeline .timeline_object {
  width: 100%;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left {
  width: 150px;
  height: 185px;
  float: left;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left .date_circle {
  background-color: #fff;
  border: 6px solid #000;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  right: -11.5px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left p {
  padding: 5px;
  border-top: 2px dashed #c62428;
  color: #000;
  position: absolute;
  top: 41px;
  right: 11px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right {
  overflow: hidden;
  border-left: 2px solid #000;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info {
  width: 93%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 15px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 5px 5px 0 #c62428;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #fff;
  position: absolute;
  left: -15px;
  top: 26px;
}
<div id="leadership_elections_timeline">
	<div class="timeline_divider"><div></div></div>
	<div class="timeline_object">
		<div class="elections_timeline_left">
			<div class="date_circle"></div>
			<p>17 Jan 2017</p>
		</div>
		<div class="elections_timeline_right">
			<div class="elections_timeline_info">
				<div class="timeline_details">
					<h3>Nominations are now open!</h3>
					<p>Take our quiz to see which role you'd be best suited to.</p>
					<a href="/representation/elections" class="goButton">Nominate Yourself</a>
					<p>Think you know someone who would make a great full-time officer? Follow the link to let us know, and we'll contact them to see if they've considered running.</p>
					<a href="/representation/elections" class="goButton">Nominate a friend</a>
				</div>				
			</div>
		</div>
	</div>
</div>

Upvotes: 1

Tim Barnett
Tim Barnett

Reputation: 1013

Your problem is you are setting the max-height:165px, remove that and you're set!

#leadership_elections_timeline {
  background-color: rgba(92, 177, 255, 0.4);
  padding: 0 10%;
  position: relative;
  display: block;
}
#leadership_elections_timeline .timeline_divider {
  width: 100%;
}
#leadership_elections_timeline .timeline_divider > div {
  width: 150px;
  height: 90px;
  border-right: 2px solid #000;
  box-sizing: content-box;
}
#leadership_elections_timeline .timeline_object {
  width: 100%;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left {
  width: 150px;
  height: 185px;
  float: left;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left .date_circle {
  background-color: #fff;
  border: 6px solid #000;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  right: -11.5px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left p {
  padding: 5px;
  border-top: 2px dashed #c62428;
  color: #000;
  position: absolute;
  top: 41px;
  right: 11px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right {
  overflow: hidden;
  border-left: 2px solid #000;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info {
  width: 93%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 15px;
  /* max-height: 165px; */
  margin-bottom: 20px;
  position: relative;
  box-shadow: 5px 5px 0 #c62428;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #fff;
  position: absolute;
  left: -15px;
  top: 26px;
}		
<div id="leadership_elections_timeline">
	<div class="timeline_divider"><div></div></div>
	<div class="timeline_object">
		<div class="elections_timeline_left">
			<div class="date_circle"></div>
			<p>17 Jan 2017</p>
		</div>
		<div class="elections_timeline_right">
			<div class="elections_timeline_info">
				<div class="timeline_details">
					<h3>Nominations are now open!</h3>
					<p>Take our quiz to see which role you'd be best suited to.</p>
					<a href="/representation/elections" class="goButton">Nominate Yourself</a>
					<p>Think you know someone who would make a great full-time officer? Follow the link to let us know, and we'll contact them to see if they've considered running.</p>
					<a href="/representation/elections" class="goButton">Nominate a friend</a>
				</div>				
			</div>
		</div>
	</div>
</div>

Upvotes: 1

Gokul P P
Gokul P P

Reputation: 962

change max-height to height:100%. The problem there is you are limiting height with max-height:165px need to remove that restriction

#leadership_elections_timeline {
  background-color: rgba(92, 177, 255, 0.4);
  padding: 0 10%;
  position: relative;
  display: block;
}
#leadership_elections_timeline .timeline_divider {
  width: 100%;
}
#leadership_elections_timeline .timeline_divider > div {
  width: 150px;
  height: 90px;
  border-right: 2px solid #000;
  box-sizing: content-box;
}
#leadership_elections_timeline .timeline_object {
  width: 100%;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left {
  width: 150px;
  height: 185px;
  float: left;
  position: relative;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left .date_circle {
  background-color: #fff;
  border: 6px solid #000;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  right: -11.5px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_left p {
  padding: 5px;
  border-top: 2px dashed #c62428;
  color: #000;
  position: absolute;
  top: 41px;
  right: 11px;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right {
  overflow: hidden;
  border-left: 2px solid #000;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info {
  width: 93%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 15px;
  height: 100%;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 5px 5px 0 #c62428;
}
#leadership_elections_timeline .timeline_object .elections_timeline_right .elections_timeline_info:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #fff;
  position: absolute;
  left: -15px;
  top: 26px;
}
<div id="leadership_elections_timeline">
	<div class="timeline_divider"><div></div></div>
	<div class="timeline_object">
		<div class="elections_timeline_left">
			<div class="date_circle"></div>
			<p>17 Jan 2017</p>
		</div>
		<div class="elections_timeline_right">
			<div class="elections_timeline_info">
				<div class="timeline_details">
					<h3>Nominations are now open!</h3>
					<p>Take our quiz to see which role you'd be best suited to.</p>
					<a href="/representation/elections" class="goButton">Nominate Yourself</a>
					<p>Think you know someone who would make a great full-time officer? Follow the link to let us know, and we'll contact them to see if they've considered running.</p>
					<a href="/representation/elections" class="goButton">Nominate a friend</a>
				</div>				
			</div>
		</div>
	</div>
</div>

Upvotes: 1

Pixeldenker
Pixeldenker

Reputation: 142

Change max-height to min-height. It will automatically change the height of the box if the text is too long to fit in the minimal height given.

Upvotes: 1

Related Questions