I recommend to use flexbox to locate your divs. And use classes instead inline styles.
.todo-list {
display: flex;
}
.todo-list__ul {
margin: 0 20px;
}
<div class="todo-list">
<div>
<ul class="todo-list__ul">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<ul>
</div>
<div>
<textarea rows="10" cols="50" ></textarea>
</div>
</div>
I am quite new to html/css and I am currently trying to basically create a to-do list website with a note section for each item.
Should look like this:
To-Do | Notes
------|-------------------------
IB | IB
Item1 | Notes about item 1
Item2 | Notes about item 1
IB – Input box
Assuming item 1 is selected
I want to have the to-do list and the notes separate with their own scrolling functions.
I currently got the to-do list to work but when I start working on the notes section, everything shifts down on the in the notes when a new to-do item is added. You can see my current HTML below and I can include css and js if needed. In essence, I am trying to split the screen vertically resulting in two different div sections that don’t interfere with each other. Thank you for any kind of help.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="temppagestylesheet.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Task Planner</title>
</head>
<body>
<!-- Heading -->
<div>
<h1 id="logo"> <a class="link" href="#">Task Planner</a></h1>
<h2 class="profile"> Name Placeholder </h2>
<hr style="clear:both;" color="black">
</div>
<!-- Left Subsection -->
<div class="vertical"></div>
<!-- To-Do List -->
<div>
<h2 id="todotitle">My To Do List</h2>
<input type="text" id="myInput" placeholder="Task...">
<div onclick="newElement()" class="addBtn">Add</div>
<hr style="width:24%;text-align:left;margin-left:0">
<ul id="todoList"></ul>
<script src="todolist.js"></script>
</div>
<!-- Right Subsection -->
<!-- Notes Section -->
<div>
<textarea rows="10" cols="50" style="resize: none; float: right;" ></textarea>
</div>
</body>
</html>
