<div style="float: right;">
<span style="font-family: Times New Roman;color:red;font-weight:700;font-size:36px;line-height:40px;text-indent: 43px ;margin-right:80px;">In Stock </span><span style="font-family: Times New Roman;color:green;font-weight:700;font-size:36px;line-height:40px;">$24.99</span></div>
white-space: nowrap;
Is this correct so far?
<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;text-indent: 43px ;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;">
<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>
<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;text-indent: 43px ;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;">
<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>
or like this
<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;text-indent: 43px ;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 style="float: 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>
I’m way confused, how am I supposed to set this up correctly?
So that it looks like this and doesn’t wrap?
Is it ok not to have a closing div tag after the first float?
<center>
<iframe width="400" height="225" src="https://www.youtube.com/embed/?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe><br><br>
</center>
<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;text-indent: 43px ;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 style="float: 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>
That depends on whether the second div is supposed to be nested (contained) within the first div, or whether it is intended to be separate and come after that div.
Every opening <div> tag must have a closing </div> tag, but where they are placed will depend upon the structure of the page as a whole.
1 Like
What’s causing the free shipping to move over to the left?
<center>
<iframe width="400" height="225" src="https://www.youtube.com/embed/?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe><br><br>
</center>
<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;text-indent: 43px ;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;">
<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>
When I remove the middle </div> it doesn’t move over to the left.
You have floated the first div to the right, then floated the second div (containing the “+Free Shipping” text) to the right. It is behaving as you instructed, because you haven’t included any instruction to clear the first float.
(Why are you using <center> tags and frameborder when you know them to be obsolete?)
That’s not causing it to move over to the left though.
how do I clear the first float? And what does that mean?
When you float an item, you take it out of the normal flow of the document. Unless you tell it otherwise, it will only take up as much space as it requires for its content, rather than stretching the full width of the page. If you then float another item in the same direction, it with move up beside the first, if there is sufficient space.
If you want the second item to appear below the first, then you need to “clear” the float - effectively tell it to appear after the previous float.
In this case, you can add clear: right or clear:both to the styles for the second div.
You can find a full explanation here: https://tympanus.net/codrops/css_reference/clear/
On both or just one of them, it works on just one?
<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;text-indent: 43px ;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: 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>
That’s what I said:
clear:both on both of them
or clear:right on both of them?
You can add clear: right; or clear: both; to the styles for the second div.
You only have one second div.
Either clear: right; or clear: both; will work with the code you’ve posted, but I do urge you to read the link I provided above so that you understand the differences between them.
Which would you use?
It would depend on the full code - what else is going on on the page. Given the code you’ve posted, I’d probably use clear:right.
1 Like