Blockquote: Without height added. vs. With height added

HTML & CSS
1

When there’s no height given it pulls from the bottom content, how can I prevent this from happening?
http://newtest180.blogspot.com/

Without Height:

Never let society to turn you into a grain of sand on the beach. Be different, be individual.
Refuse to look alike with others. Leave your herd, only then you will have a real name and till
then your name will remain as the grain sand. ~ Mehmet Murat ildan

--------------------------------------------------------------------------------------------

With Height:

<div style="width:606px" onclick="myq=document.getElementById('myquotee'); myq.style.display='block';this.style.display='none'">

<div style="cursor: pointer; width: 604px; height: 65px; background-color:#000000; border: 1px solid #BF598E;">
</div></div>

<div id="myquotee" style="display: none;">

<blockquote style="background-color:#000000;width:606px; height:67px;margin:0px;overflow: hidden;">

<p style="font-family:'Times New Roman';font-size:16px;color:white;margin:0px;"><q>Never let society to turn you into a grain of sand on the beach. Be different, be individual.<br /> Refuse to look alike with others. Leave your herd, only then you will have a real name and till<br /> then your name will remain as the grain sand.</q> ~ <em>Mehmet Murat ildan</em></p></blockquote></div>
2

Sorry - I don’t understand what you mean by that.

I also don’t understand why you’re still using an HTML structure you have been told is incorrect, even after you have been shown the correct structure and had it explained to you in detail.

Nor do I understand why you’re using <br> tags here incorrectly, when you have another thread explaining the correct (and incorrect) usage of them.

Why ask for advice and guidance if you intend to ignore it?

3

There should be no need to add set heights to any text block elements like this, content should dictate height.
The gap at the bottom is due to the bottom padding on this element

<div class="widget HTML" data-version="1" id="HTML1">

Use padding to control the amount of space around the text within its container.

1 Like
4

Why would I use padding, if it works without height? padding isn’t the issue, the issue is if I set a given height, then the text doesn’t wrap.

5

Which text are you talking about? In the link you posted, I see no text (apart from on the YouTube image).

6

You click on the border box and then it appears. The boxes above the videos.

7

When you click on the 1st one, it pulls the content below. When you click on the one below it doesn’t pull the content at all. The 1st one has no given height set. The 2nd one does.

But when there’s a given height, then the text doesn’t wrap. It works fine with a given height set, but then the text doesn’t wrap.

8

I still don’t really understand what you mean by that. But you are using <br/> incorrectly, so the text wrapping is all wrong if text is zoomed.

9

The first one has padding bottom set by the widget box, as @SamA74 said,

line 351

.main-inner .widget {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #0000ff;
    border-radius: 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
    margin:0 -16px 20px -16px;
    padding: 0 15px 15px;    /* padding bottom assigned here */
}
10

I think I might stick with a given set height and forget about the text wrap.

11

Why?

12

I think I got it, it’s not pulling from the bottom now. I just need to shrink it. http://newtest180.blogspot.com/

13

Just take the width property off the <div>

1 Like
14

Should I get rid of the height also, or is that not possible?

15

There should not be a height assigned.
Content should dictate the height.

1 Like
16

You can do that. The content within it (none there yet) should be allowed to dictate its height.

2 Likes
18

I replaced the height with padding, and it’s still pulling the bottom content. http://newtest180.blogspot.com/

19

What does that mean?

20

it means, when I click on the box, the content below shifts up. The one with a set height, nothing effects the content below.

21

To help you understand the dynamics involved. please open the demo page afresh in Firefox, ZOOM Text Only a few clicks larger on that demo page, THEN click the blank box to show the text that “pulls up” and then click the lower box to show the text in the fixed height box. You will see that once the text is visible, the height of the text box determines the top position of the content below it.