How do I set this code up so that the text doest wrap?

HTML & CSS
21

that’s what I was going to go with also.

22

Your HTML cannot be accepted: Closing tag has no matching opening tag: DIV

<div style="text-align:center;">
  <iframe width="400" height="225" src="https://www.youtube.com/embed/?rel=0&showinfo=0" style="border:0;" allowfullscreen></iframe>
  <br>
  <br>
</div>



<div style="float: right;">
  <span style="white-space: nowrap;font-family: Times New Roman;color:red;font-weight:700;font-size:36px;line-height:40px;margin-right:80px;">In Stock </span><span style="white-space: nowrap;font-family: Times New Roman;color:green;font-weight:700;font-size:36px;line-height:40px;">$24.99 USD*</span>
  <br>
</div>

<div style="float: right;clear: both;">
  <span style="white-space: nowrap;font-family: Times New Roman;color:#b45f06;font-weight:400;font-size:20px;line-height:44px;">+ Free Shipping!</span>
</div>
23

I got it, it works.

1 Like
24

I’m guessing you simply made an error in copying and pasting and missed a <div> tag. The code you have there is complete. Try again.

You could make it less cumbersome and easier to read by removing all the repeated styles. Even using inline styles, you can cut down on the clutter by applying shared styles to the parent (in this case, your second <div>) and only adding styles to the <span> tags where they differ.

<div style="float: right; white-space: nowrap;font-family:'Times New Roman'; font-weight:700; font-size:36px; line-height:40px;">
  <span style="color:red;text-indent: 43px ;margin-right:80px;">In Stock </span><span style="color:green;">$24.99 USD*</span>
</div>

instead of

<div style="float: right;">
  <span style="white-space: nowrap;font-family: Times New Roman;color:red;font-weight:700;font-size:36px;line-height:40px;margin-right:80px;">In Stock </span><span style="white-space: nowrap;font-family: Times New Roman;color:green;font-weight:700;font-size:36px;line-height:40px;">$24.99 USD*</span>
  <br>
</div>

You should also remove those <br> tags, as they are not needed. Use margins or padding if you want extra space.

1 Like
25

I like <br> tags.

26

‘Times New Roman’ Why do you put 2 lines next to it?

27

Just because you like something doesn’t make it the right tool for the job. Using <br> tags to control layout is a mistake, not least because it gives you very little control.

The single quotes? I explained that to you months ago. Perhaps you should revisit this topic as a refresher:

The <div style=" and the <span style=" are two different parts, is there a name that each is called? - #56 by TechnoBear and the following few posts.

1 Like
28

padding or margin, which to use. this always gets me.

29

Again, it depends on the situation, and you really need to take time to get to grips with both.

See https://tympanus.net/codrops/css_reference/margin/

and https://tympanus.net/codrops/css_reference/padding/

As a general rule, padding is easier to use, as you don’t need to worry about things like margin-collapse, but as ever, it’s a case of being able to choose the right tool for the job.

1 Like
30

Margin is used for text and padding is used for like increasing the background landscape. Something like that?

31

No. Read the references.

1 Like
32

@ronpat What do you say? Padding or margin here? In the iframe.

 <iframe width="400" height="225" src="https://www.youtube.com/embed/?rel=0&showinfo=0" style="border:0;padding-bottom:15px;" allowfullscreen></iframe>

</div>



<div style="float: right;">
  <span style="white-space: nowrap;font-family: Times New Roman;color:red;font-weight:700;font-size:36px;line-height:40px;margin-right:80px;">In Stock</span><span style="white-space: nowrap;font-family: Times New Roman;color:green;font-weight:700;font-size:36px;line-height:40px;">$24.99 USD*</span>
 
</div>

<div style="float: right;clear: right;">
  <span style="white-space: nowrap;font-family: Times New Roman;color:#b45f06;font-weight:400;font-size:20px;line-height:44px;">+ Free Shipping!</span>
</div>
33

1 br tag is equivalent to how much padding?

34

How many pixels are in 1 <br> tag?

35

That is a trick question, as it is entirely dependent on your line-height, as a <br> tag produces a break in the text, thus moving text to another line.

3 Likes
36

Thanks. I was having trouble thinking of how to explain and all I could think of was “A fence is equal to how much space between houses?” :wink:

1 Like
37

2 posts were merged into an existing topic: Do I have this list code set up correctly?

39

@asasass: if you’re still having trouble understanding the differences between margin and padding and how they behave, have a look at this very simple demo:

margin-padding-demo.html (9.5 KB)

All the divs in the demo are identical; the only things which change are margin and padding. (I’ve added the styles inline, to make it easier for you to understand which styles are applied to which div, but for anybody else reading, inline styles are A Bad Thing. Don’t do it. )

1 Like
40

I wonder if there might be a problem with thinking “visual” (the rendered look) vs. thinking “HTML” (the view-source)

That is, without the colored borders, by looking at the results as seen in the browser, both the 20px margin and the 20px padding result in the same look.

But with the colored borders it becomes clear that the “space” taken by the div element is different.

I guess in some cases it might not make a lot of difference, but float snagging would be one that it does.

41

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.