Layout: Vertically-aligned links next to div - css

Question

Sample code:
a {
background: tan;
}
div {
width: 100px;
height: 200px;
background: green;
}
Link 1
This is link 2.
3rd
<div></div>
This is the effect I wish to achieve:
It's easy to vertically align the anchor elements by something like display: block, but I have no idea how to put the <div> element next to them.
Note 1: The above is just a sample code. My actual links can be any width.
Note 2: The <div> needs to be the anchors' next sibling. It can be any height.

Answer 1

I would go for a grid:
You can set it to adapt automatically to the inner dimensions.
You only need to set some row and column properties to locate the inner elements
a {
background: tan;
grid-column: 1;
}
a:nth-child(2) {
grid-row: 2;
}
#mydiv {
width: 100px;
height: 200px;
background: green;
grid-column: 2;
grid-row: 1 / 5;
}
.container {
display: grid;
grid-template-columns: max-content auto;
grid-template-rows: auto auto auto 1fr;
}
<div class="container">
Link 1
This is link 2.
3rd
<div id="mydiv"></div>
</div>
It will work also in the case of a huge margin bottom on anchors
a {
background: tan;
grid-column: 1;
margin-bottom: 200px;
}
a:nth-child(2) {
grid-row: 2;
}
#mydiv {
width: 100px;
height: 200px;
background: green;
grid-column: 2;
grid-row: 1 / 5;
}
.container {
display: grid;
grid-template-columns: max-content auto;
grid-template-rows: auto auto auto 1fr;
}
<div class="container">
Link 1
This is link 2, now longer.
3rd
<div id="mydiv"></div>
</div>

Answer 2

Try this solution
First we need two columns, one column for links, second for the DIV
tag. I preferred to take the grid.
Used fit-content to for fit background on links.
The DIV needs to set as position: absolute, because without
absolute position, div will be resize only the first row in the
second column.
For adjustment width of the div, i was create a variable. This
resizes both the second column of the grid and width of the div.
:root {
--second-column: 100px;
}
body {
width: min-content;
display: grid;
grid-template-columns: max-content var(--second-column);
grid-auto-rows: min-content;
row-gap: 1rem;
column-gap: 2rem;
background-color: hsl(201, 27%, 10%);
position: relative;
}
a {
grid-column: 1;
width: fit-content;
background: tan;
}
div {
grid-column: 2;
grid-row: 1 / -1;
width: var(--second-column);
height: 200px;
position: absolute;
background: green;
}
Link 1
This is link 2.
3rd
<div></div>

Answer 3

The good old float
a {
background: tan;
margin: 5px;
/* all the links at the left
above each other */
float: left;
clear: left;
}
div {
width: 100px;
height: 200px;
background: green;
overflow: auto; /* do not overlap the links and stay at the right */
}
Link 1
This is link 2.
3rd
<div></div>

Answer 4

Here, check this out.
a {
background: tan;
display: block;
margin-bottom: 5px;
}
div {
width: 100px;
height: 100px;
display: inline-block;
vertical-align: top;
}
div.div2 {
background: green;
}
<div>
Link 1
This is link 2.
3rd
</div>
<div class="div2"></div>

Answer 5

a {
background: tan;
}
#child-1 {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#child-2 {
width: 100px;
height: 100px;
background: green;
}
#parent {
display: flex;
}
<div id="parent">
<div id="child-1">
Link 1
This is link 2.
3rd
</div>
<div id="child-2"></div>
</div>

Answer 6

Easiest is to use float:left; on all links as mentioned before. but we probably don't really like float for situations where we also might want to do more complex stuff.
Also you might want to add markup for semantic purposes anyway (like <nav> for the links). The only reason I could make up for the links having to be siblings of the div is javaScript, and bet it will be possible to tune it more performant with slightly more markup around.
To do so you might want to have a look at flexbox like so:
.container{
display:flex;
flex-direction: row;
justify-content: space-between;
border: 1px solid blue;
}
ul{
flex: 1 1 auto;
align-self: flex-start;
display:flex;
flex-direction: column;
padding: 0;
margin: 0;
}
li{
border: 1px solid red;
flex: 1 1 auto;
}
a {
background: tan;
}
div.main {
flex: 0 1 100px;
height: 200px;
background: green;
}
<div class="container">
<ul>
<li>Link 1</li>
<li>This is link 2.</li>
<li>3rd</li>
</ul>
<div class="main">lore ipsum</div>
</div>
No matter how you do it you need a little more markup to solve this if you want a generic answer but not use float. There might be a way around this in certain situations but there is none in a genric scenario. That is if you do not allow javaScript to fix it (which would most likely be an unresasonable solution).
The li of cause is unnecessary for your question but in general its a good idea not to position a tags directly but to wrap them. a-tags also tend to have unforeseen bugs when positioned with flexbox.
The surrounding div.container could be the documents body tag instead. Then you could simplify to:
body{
display:flex;
flex-direction: row;
justify-content: space-between;
border: 1px solid blue;
}
nav{
flex: 1 1 auto;
align-self: flex-start;
display:flex;
flex-direction: column;
padding: 0;
margin: 0;
}
a {
background: tan;
}
div {
flex: 0 1 100px;
height: 200px;
background: green;
}
<nav>
Link 1
This is link 2.
3rd
</nav>
<div>lorem ipsum</div>

Answer 7

i used and change this solution inside my answer.
div element gives links higtht and stays after theme.
body {
display: grid;
grid-template-columns: 1fr max-content;
width: max-content;
}
a {
background: tan;
margin: 50px;
grid-column: 1;
width: fit-content;
}
div {
width: 100px;
min-height: 200px;
background: green;
grid-column: 2;
grid-row: 1 / 9999;
}
Link 1
This is link 2.
3rd
4th long long and too long link. f it Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nostrum quibusdam cupiditate deleniti possimus sit!
<div></div>

Answer 8

You have to use position property and display inline-block or you can use display flex
a {
background: tan;
display:block;
margin-bottom: 16px;
width: 100px;
}
.main {
width: 100px;
height: 100px;
background: green;
position: absolute;
left: 20%;
top: 8px;
}
Link 1
This is link 2.
3rd
<div class="main"></div>

Answer 9

Use CSS clear Property to make anchor elements not allowed to Float on the left side in relation to other element
Using CSS Overflow, the overflow of the div is clipped, and the rest of the content will be invisible, I set it to use hidden, you can also use auto, but auto adds scrollbars only when necessary
a {
background: tan;
float: left;
clear: left;
}
div {
width: 100px;
height: 200px;
background: green;
overflow: hidden;
}
Link 1
This is link 2.
3rd
This is a long string for testing
<div></div>

Answer 10

Flexbox seems to be a good approach. Wrap all the links (anchor tags) in a div element and then wrap that div along with the other div you want to be side by side in another div. See below code example:
CSS
.parentDiv {
display: flex;
}
.links {
display: flex;
flex-direction: column;
}
a {
background: tan;
}
.otherDiv {
width: 100px;
height: 200px;
background: green;
}
HTML
<div class="parentDiv">
<div class="links">
Link 1
This is link 2.
3rd
</div>
<div class="otherDiv"></div>
</div>

Answer 11

As a fan of using flexbox, I came up with this approach
HTML
<div class="parent">
<div>
Link 1
This is link 2.
3rd
</div>
<div></div>
</div>
CSS
a {
background: tan;
}
.parent {
display: flex;
}
.parent div:first-child {
display: flex;
flex-direction: column;
margin-right: 20px;
}
.parent div:first-child a {
margin-bottom: 10px;
}
.parent div:last-child {
width: 100px;
height: 200px;
background: green;
}

Answer 12

Just wrapper your content with one parent class with Flex property and it's done. It will solve your problem.
Refer to below snippet code
.parent {
display: flex;
}
a {
background: tan;
}
.otherclass {
width: 100px;
height: auto;
background: green;
flex: 0 0 1;
}
<div class="parent">
<ul>
<li>
Link 1</li>
<li>
This is link 2.</li>
<li>
3rd</li>
<li>
Link 1</li>
<li>
This is link 2.</li>
<li>
3rd</li>
</ul>
<div class='otherclass'></div>
</div>