Could someone lend a hand in getting the X to align properly on this div? I've been struggling with it for ages and just can't seem to crack

Question

Could someone lend a hand in getting the X to align properly on this div? I've been struggling with it for ages and just can't seem to crack

This is a demonstration of the CodePen project:

<div class="annotation">
<div class="annotext">
<div class=annobar></div>
<div class="x">✕</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
</div>

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
width:250px;  
  padding:0px;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
}

Struggling to maintain alignment within the "annotation" div and achieve the desired layout like shown below:

https://i.sstatic.net/dWl07.jpg

html css block

Answer 1

Answer №1

To perfectly position the x, you can set the top value to half the margin of the annobar, which in this scenario would be -0.5rem. Also, ensure that the annotext has a relative position so that the x appears in the top-right corner:

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
  width:250px;  
  padding:0px;
  position: relative;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
  position: absolute;
  right: 0;
  top: -0.5rem;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
    width: 90%;
}

<div class="annotation"><div class="annotext"><div class=annobar><div class="x">✕</div></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div></div>

Answer 2

To perfectly position the x, you can set the top value to half the margin of the annobar, which in this scenario would be -0.5rem. Also, ensure that the annotext has a relative position so that the x appears in the top-right corner:

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
  width:250px;  
  padding:0px;
  position: relative;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
  position: absolute;
  right: 0;
  top: -0.5rem;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
    width: 90%;
}

<div class="annotation"><div class="annotext"><div class=annobar><div class="x">✕</div></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div></div>

Answer 3

Answer №2

In order to achieve the desired layout, I first created a header div and placed both the X symbol and the red line inside it. By using float left on these elements, they align properly within the header. Next, I limited the width of the main parent container to control the text width. Remember to add clear:both to the text div to account for the floated elements.

EDIT Updated Codepen Link Here is the revised code.

Use this HTML structure:

<div class="annotation">
  <div class="annotext">
    <div class="header-div">
      <div class=annobar></div>
      <div class="x">✕</div>
    <div/>
    <div class="text">
      lorem ipsum dolor sit amet...
    </div>
  </div>
</div>

Apply the following CSS styles:

.annotation{
  height:auto;
  font-family:cardo;
  width:265px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{  
  padding:0px;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
  float:left;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
    float: left;
    width:250px;
}
.text{
  clear:both;
}

Answer 4

In order to achieve the desired layout, I first created a header div and placed both the X symbol and the red line inside it. By using float left on these elements, they align properly within the header. Next, I limited the width of the main parent container to control the text width. Remember to add clear:both to the text div to account for the floated elements.

EDIT Updated Codepen Link Here is the revised code.

Use this HTML structure:

<div class="annotation">
  <div class="annotext">
    <div class="header-div">
      <div class=annobar></div>
      <div class="x">✕</div>
    <div/>
    <div class="text">
      lorem ipsum dolor sit amet...
    </div>
  </div>
</div>

Apply the following CSS styles:

.annotation{
  height:auto;
  font-family:cardo;
  width:265px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{  
  padding:0px;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
  float:left;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
    float: left;
    width:250px;
}
.text{
  clear:both;
}

Answer 5

Answer №3

Consider trying the following:

float: right;

Add this line of code to the css for element X. By doing this, the X will be positioned on the right side.

In addition, if you place the X inside annotext and set annotext's "float" property to "left", the X will appear on top of the line.

To complete the look, give the X a white background to hide the line underneath.

Take a look at the final outcome below:

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
width:250px;  
  padding:0px;
  float:left;
}

.x{
   padding-left:3px;
  padding-top:3px;
  color:#c73626;
  float:right;
  background-color:white;
}


.annobar{
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
}

<div class="annotation">
  
  <div class="annotext">
    <div class="x">✕</div>
    <div class=annobar></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
  
</div>

Answer 6

Consider trying the following:

float: right;

Add this line of code to the css for element X. By doing this, the X will be positioned on the right side.

In addition, if you place the X inside annotext and set annotext's "float" property to "left", the X will appear on top of the line.

To complete the look, give the X a white background to hide the line underneath.

Take a look at the final outcome below:

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
width:250px;  
  padding:0px;
  float:left;
}

.x{
   padding-left:3px;
  padding-top:3px;
  color:#c73626;
  float:right;
  background-color:white;
}


.annobar{
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
}

<div class="annotation">
  
  <div class="annotext">
    <div class="x">✕</div>
    <div class=annobar></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
  
</div>

Could someone lend a hand in getting the X to align properly on this div? I've been struggling with it for ages and just can't seem to crack

Answer №1

Answer №2

Answer №3

Similar questions

Elements vanish when SHAKE effect is in use

Having trouble retrieving the content within an HTML tag using jQuery?

Tips for choosing a specific cell in a table

IE9 is causing a bizarre problem where the entire page is suddenly jumping. It's

HTML stops a paragraph when encountering a script within the code

What is the most effective way to retrieve the count of users who have logged in within the past three months by utilizing Jquery

Extract content from whole webpage including HTML, CSS, and JavaScript

Graphic aligned with textual content

I aim to decrease the number of decimal places in the code provided below

Banner with video background (not taking up the entire page)

choose from the list of options that appear above the control

Tips for creating a horizontally expandable container that adjusts after overflowing

Utilizing the jQuery slideToggle method on the specified target element

What is the best way to prevent images from being loaded with broken links?

What is the best way to restrict the creation of objects in a JavaScript list?

arranging texts in a vertical stack with wrapping

Tips for displaying JSON data by formatting it into separate div elements for the result object

The redirection to the webpage is not occurring as expected

Tips for identifying when a video's autoplay feature does not function properly on all web browsers

Insert HTML code that is activated when the selection is modified