What is preventing the clear: right property from clearing the right side of a paragraph element within a two-column text layout?

I've been delving into the concept of float and decided to create a two-column layout using CSS:

* {
  box-sizing: border-box;
}

p {
  float: left;
  background: pink;
}

#p1 {
  width: 50%;
  clear: right;
}

#p2 {
  width: 50%;
}
<p id="p1">Paragraph 1.</p>
<p id="p2">Paragraph 2.</p>

Even though I set #p1 to clear:right, my expectation was that the text in #p2 would appear below it. This is because, from what I understand, clear:right should prevent any other elements from floating on the right side of #p1.

The surprising part is that setting #p2 to float:right yields no change in the document display. It remains identical to before.

I'm having difficulty comprehending why the text in #p2 doesn't shift outside the area of #p1. Can someone provide an explanation, please?

htmlcsscss-float

Answer №1

Clearing involves going below the previous elements rather than the ones that follow. If each element takes up 50% of the width, there is no need to clear from the same side; it must be cleared from the opposite side or even both sides.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

p {
  float: left;
  width: 50%;
  background: pink;
}

#p1 {
  clear: right;
}

#p2 {
  float: right;
  clear: left;
}

#p3 {
  float: left;
  clear: both;
}
<p id="p1">First paragraph.</p>
<p id="p2">Second paragraph (clearing left).</p>
<p id="p3">Third paragraph (cleared in both directions).</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming a pseudo element from horizontal to vertical orientation

I have a unique snippet of code that generates an element at the bottom of a div to serve as an inventive 'arrow/pointer' pointing down. Now, I am seeking assistance in tweaking the script so that the 'arrow/pointer' directs towards th ...

javascriptjqueryhtmlcsspseudo-element

Innovative Combination: Fancybox with onsubmit Button

Does anyone have experience firing Fancybox using an iframe within an onsubmit form? Thanks in advance! ...

javascriptjqueryhtmlfancyboxonsubmit

Suggestions for increasing the slant of italicized text?

Is it possible to enhance the angle of italic text in a logo created using html and css? Can this be achieved with css or javascript? ...

javascriptjqueryhtmlcss

Generated serve IDs are having issues when trying to use tabs

I am encountering an issue with my jQuery file jQuery(document).ready(function() { var orderId= <%= OrderLi.ClientID %>; jQuery("#ApprovalTab").css("display", "block"); jQuery("#ApprovalLi").css("background-color", "#5EA8DE" ...

jqueryasp.netcss

CGI delivers HTML without displaying it properly

In my Python CGI program, I serve HTML content rather than URLs. Here is the flow: 1. Open http://jioworld.jioconnect.com/cgi-bin/loginpp.py 2. You will see an HTML form (since you haven't logged in yet) 3. Enter a dummy username and password, then s ...

pythonhtmlcgi

Adding columns dynamically to a table using jQuery is not functioning as intended

I am attempting to dynamically generate and add columns to a table using jQuery. Despite no errors showing up in the javascript console, the columns are not appearing. Steps of my process get JSON for the table -> generate the HTML -> remove exis ...

javascriptjqueryhtmlerb

Setting the time based on the length of an SVG shape

Currently, I am delving into the world of JavaScript and React, encountering a challenge where I am required to set time based on the length of an SVG image, similar to a progress bar. To simplify, let's consider a scenario where 24 hours equate to 1 ...

javascripthtmlreactjs

Tips for retrieving the user-input value from an HTML text field

Exploring the world of JS, I set out to create a basic calculator after just one week of lessons. However, I hit a roadblock when trying to extract user-input values from my HTML text fields. Here's a snippet of my html: <div class="conta ...

javascripthtml

The Fade In effect in jQuery causes my fixed header to overlap with images on the page

This is the javascript snippet using jquery <script type="text/javascript> $(document).ready(function () { $('#showhidetarget').hide(); $('a#showhidetrigger').click(function () { $('#showhidetarget&apo ...

jquerycssfixedstickyoverlapping

Design a logo to serve as the main button on the navigation bar of the

I've been experimenting with adding a logo instead of the 'Home' text in my navigation bar, but I'm not sure where to implement it. Should I add it within #nav or separately? Also, I want the nav bar to stay fixed without overlapping on ...

javascriptjquerycsshtmltwitter-bootstrap

What was the reason for Vue's decision to deprecate the ""is" attribute for HTML elements?

Vue's eslint rules mention that the is attribute on HTML elements is deprecated (since 3), and should be used on components instead: <template> <!-- ✓ GOOD --> <div /> <component is="foo"> <!-- ✗ BAD --&g ...

htmlvue.jsvuejs3

The system encountered an error stating that the class 'Database' could not be found

Whenever I try to establish a connection to my SQL database using my pdo_object.php file, I encounter the following error in my model.php: Fatal error: Class 'Db' not found in /path/model.php on line 8 I have double-checked that all permissions ...

phphtmlmysqlsqldatabase

Add an HTML block following a designated HTML comment

Is it possible to inject HTML code after a specific HTML comment rather than inside an HTML element like <div>? For instance, I'm interested in adding the opening tags <div id="OUTER"><div id="INNER"> following the first comment tag ...

jqueryhtmltextinsert

Fluid Centered UL with Bullet Points

We have received a unique request from one of our clients. They are asking for the content within a specific <ul> to be centered along with the icons. Centering and adding icons are doable, but the challenge lies in centering the <li> elements ...

htmlcss

What is the best way to insert a vertical line between two 960.gs containers?

Incorporating the 960.gs grid system into my design, I am looking for the optimal method to include a slim separating vertical line between two boxes that allows for customization of width and color. One approach I have considered involves creating div cl ...

cssborder960.gs

Use a positioning method that places items at the top of the container and evenly distributes the space

I'm working on aligning the black boxes at the top of the container in my html code. I want the content to be responsive so that when the window size decreases, the images move down and justify themselves like 'justify-content-between' for t ...

htmlbootstrap-4responsive

Refreshing the Canvas post-submission

I have created a form that allows users to add notes and sign on a Canvas. However, I am facing an issue with clearing the canvas after submission, as it does not seem to work properly. The rest of the form functions correctly. The goal is to clear both t ...

javascripthtml

The video player will only start playing after the source has been changed if it was already in play

I am facing an issue with my video player that has thumbnails. The problem is that the video player does not start playing the selected video unless the video is already playing. This means I have to hit the play button first, and then select the thumbnail ...

javascripthtmlhtml5-video

Create a stylish border around an ion-card using a sleek black bar

I have a card element with a title and subtitle, and I want to add a black bar above the header. <ion-list> <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events"> <ion-card-header> ...

htmlcssionic4

Alignment issue with Div Element detected

I'm currently working on a JavaScript program where I need to create buttons and div elements dynamically. My aim is to have the div elements aligned horizontally. I've successfully created the buttons and div tags, but the issue I'm facing ...

javascripthtmlbootstrap-4