how to align the elements properly>

Question

.listElement{
            padding: 0.60rem;

            margin: 10px auto;
            overflow-x: hidden;
            width: 75%;
            /* border: 2px solid red; */
            display: inline-block;
            background-color: #eee
        }
        

        .closeList{
            padding: 0.60rem;
            margin: 5px auto;
            display: inline-block;
            text-align: center;
            background-color: #ddd;
           
            width: 15%;
            cursor: pointer;
        }
        
        .container{
            background-color: red;
        }

<div class="container">
                <div class="listElement">
                    hellooo
                </div>
                <div class="closeList">
                    x
                </div>
</div>

the ####overflow#### property is causing the X to disorient, please tell me how to make it so that it does not happen.

this block of code is supposed to be a to-do element or task , so I want it so that when the task is too long the extra text gets hidden and the X thats supposed to be the cancel button stays on the right.

score 0 · Answer 1 · answered Jan 25 '21 at 17:41

Remove the Overflow and add flex to the container

.listElement{
            padding: 0.60rem;

            margin: 10px auto;
           
            width: 75%;
            /* border: 2px solid red; */
            display: inline-block;
            background-color: #eee
        }
        

        .closeList{
            padding: 0.60rem;
            margin: 5px auto;
            display: inline-block;
            text-align: center;
            background-color: #ddd;
           
            width: 15%;
            cursor: pointer;
        }
        
        .container{
            background-color: red;
            display:flex;

        }

<div class="container">
                <div class="listElement">
                    hellooo
                </div>
                <div class="closeList">
                    x
                </div>
</div>

score 0 · Answer 2 · answered Jan 25 '21 at 20:31

I would recommend you to use a flexbox or grid layout. I'll provide an example of display: grid in a snippet below. (This approach will change/get better once we have better subgrid support)

Also, add white-space: nowrap; to your listElement div to get overflow: hidden to work properly for your text. This will force all your text on one line, so it doesn't just wrap and expand the box height.

Your HTML could also use some tweaks, too. If you overuse div elements, you'll have no semantics/meaning to your content and will be missing some of the default functionality that's built in to many HTML elements. It's generally best to start with the most accurate HTML semantics you can pull off, then style it later (adding div and span tags where needed). To list a few specific changes I would make (and have included in my snippet)...

You have a list of ordered items, so <ol> and <li> tags would be semantically appropriate here (or, at least add list and listitem roles).
Your closeList element is just a faked button. An actual <button> would be better semantically, but would also provide built-in keyboard functionality so you don't need to write JS to handle this yourself. This is better for accessibility, too.
I also think using "x" (or an icon) wouldn't really provide enough information for accessibility. I added aria-label and title attributes to the <button> tags with this in mind, but I'm sure the text could be made more descriptive and there are other ways (possibly better?) to accomplish this, too.
Lastly, I used BEM to make the example a bit clearer, but this point is much more optional than the others.

Full Example

.list {
  padding: 0;
  list-style: none;
}

.list-item {
  /* Layout details */
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) auto;
  align-items: center;
  gap: 5px 10px;
  
  padding: 5px;
  background-color: red;
}

.list-item__text {
  padding: 0.60rem;
  background-color: #eee;
  
  /* Keep content on one line and handle overflow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Optional */
}

.list-item__button {
  padding: 0.60rem;
  background-color: #ddd;
  cursor: pointer;
  text-align: center;
  /* NOTE: may want to override more default button styles */
}

<ol class="list">
  <li class="list-item">
    <span class="list-item__text">Do the thing before we do something else and hopefully this is long enough to demonstrate overflow even on some of the larger screens</span>
    <button class="list-item__button" type="button" aria-label="Cancel task 1" title="Cancel task 1">x</button>
  </li>

  <li class="list-item">
    <span class="list-item__text">Steal the Declaration of Independence</span>
    <button class="list-item__button" type="button" aria-label="Cancel task 2" title="Cancel task 2">x</button>
  </li>

  <li class="list-item">
    <span class="list-item__text">Add googly eyes to laptop</span>
    <button class="list-item__button" type="button" aria-label="Cancel task 3" title="Cancel task 3">x</button>
  </li>
</ol>

how to align the elements properly>

2 Answers2

Full Example