Question 180409 in Html Question posted in
Some basic documentation can be found here.

How can I wrap a nested HTML element around content to the right using CSS?

Edited Image:

Here is the CSS:

    .assignment-list {
        padding: 5px;
        text-align: left;
        width: 650px;
        margin-top: 10px;
        margin-bottom: 10px;
        list-style-type: circle;
        display: flex;
        flex-wrap: wrap;
}

assignmentlist is a div that shows a nest of assignments within categories (based on a JS function (not relavent, just background information, here’s a visual:))
assignmentlist is a div that shows a nest of assignments within categories (based on a JS function (not relavent, just background information, here’s a visual)) It is the one with the nested categories and assignments](https://phpout.com/wp-content/uploads/2023/06/qxR45.png)

I want that whole div element to be wraped around to the right side. How does one go about this? I’ve already tried to mess with some CSS settings, and tried to look up solutions, but couldn’t solve it. Thanks in advance.

I have been stuck for an hour, and I know it’s a simple solution, I’m just too dumb to find it.

I want that whole div element to be wraped around to the right side. How does one go about this? I’ve already tried to mess with some CSS settings, and tried to look up solutions, but couldn’t solve it. Thanks in advance.

And, yes, I do have the html class set as .assignment-list.

Tags:

3

Answers


  1. 0

    I dont understand your question in total, but if you want that container to stick to the right side, you might just wanna add
    margin-left: auto; to your css class. 🙂

    EDIT:

    .wrapper {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.wrapper > div {
  width: 100%;
}
    <div class="wrapper">
  <div style="background-color: blue;">
    <p>Left Side</p>
  </div>
  <div style="background-color: green;">
    <p>Right Side</p>
  </div>
</div>

    If you want you can try this one out 🙂

    Login or Signup to reply.
  2. 0

    I did not understand your question

    If you want to rtl your content, use the following steps:

    You can use direction to put any type of content on the right direction:

    direction:right;

    And for text, you can use the text-align property:

    text-align:right;

    And if you want to place only your content on the right side, use the float property:

    float:right;

    More information

    Login or Signup to reply.
  3. 0

    I’m not entirely sure I understand your question but if you want elements to lay out side-by-side you’d generally put them under a common parent and use flex or grid:

    .container {
  display: grid;
  grid-template-columns: 35% 65%;
}

/*
the rest isn't really relevant.
just makes it easier to see what's where
*/

.container > div {
  padding: 2rem;
  background: tomato;
}

.container > :nth-child(2) {
  background: bisque;
}
    <div class="container">
  <div>div 1</div>
  <div>div 2</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search