Layout: Vertically-aligned links next to div

HTML & CSS
1

Sample code:

CSS

a {
  background: tan;
}

div {
  width: 100px;
  height: 100px;
  background: green;
}

HTML

<a href="#1">Link 1</a>
<a href="#2">This is link 2.</a>
<a href="#3">3rd</a>

<div></div>

DEMO

This is the effect I wish to achieve:

enter image description here

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 <div> needs to be the anchors’ next sibling.
Note 2: The above is just a sample code. My actual links can be any width.

2

Check this

CSS

a {
	background:tan;
}

ul {
	list-style-type:none;
	padding-left:20px;
}

.container {
	width:500px;
}

.col-left {
	float:left;
	width:150px;
	height:100px;
}

.col-right {
	float:left;
	width:100px;
	height:100px;
	background:green;
}

HTML

<div class="container">
	<div class="col-left">
		<ul>
			<li><a href="#1">Link</a></li>
			<li><a href="#2">This is link 2.</a></li>
			<li><a href="#3">3rd</a></li>
			</ul>
	</div>
	<div class="col-right"></div>
</div>
1 Like
3

Please read the notes: The <div> needs to be the anchors’ next sibling.

4

Why? The person was showing the way it would work and the design that you were looking for. The two divs are siblings of the class container.

Using Grids and Flexbox would make what you are looking for really easy to achieve - https://codepen.io/Strider64/pen/gOGqrxo

1 Like
5

Unfortunately that doesn’t work for me. As mentioned in my question and markup, the div needs to be the anchor’s next sibling. That’s not the case in the solution provided above.

6

Then assuming that all you have given us is all that there is and there is no other content then you can just add this:

a{float:left;clear:left;margin:0 10px 10px 0;}
div{overflow:auto;}

Screen Shot 2022-01-17 at 13.42.49

However** I would strongly advise** that you adjust the structure (similar to the post from @Zawhether ) but I would go with flex or gid as mentioned by @Pepster64 :slight_smile:

My example is just a trick based on the code you presented.:wink:

1 Like
7

Your solution is great, and exactly what I was looking for. :pray::rose:

I tried flex to no success. And I know almost nothing about the grid layout. :slightly_frowning_face:
It’s completely new to me.

8

You’d need to have a wrapper around the three links to use flex and a parent wrapper around all the items (unless you use the body instead of a main wrapper).

There will only be the contrived solutions if the html has to stay as is.

9

I’m afraid I can’t.

Yes, the HTML is no more than what I showed in the OP.

1 Like
10

Eureka! I studied some basic concepts of the grid layout and came up with the following:
DEMO

Everything seems good, but the problem is the anchors’ height: I’ve explicitly given them a height value, but I want their height to fit their content. Is there a better approach?

11

You don’t need the grid-template-rows property as the grid area gives you the rows you need.

12

Then how can I control the rows height? Their height will increase if I increase the <div>'s height.

13

You didn’t mention that requirement :slight_smile:

I’d expected that you would want the links to spread out and match the height of the green block. I think you may be stuck with an arbitrary height in that grid demo if you want the links to line up under each other (use rems and not px though).

I did have another demo with columns that I didn’t show but does the trick (assuming you don’t change/add to the rules again :slight_smile: )

14

In your grid example you could add a dummy element at the end and it would stop the links from moving and growing.

e.g.

body {
  display: inline-grid;
  grid-template-areas:
    "link1 div"
    "link2 div"
    "link3 div"
    "spare div";
  gap: 1em;
}
a {
  background: tan;
}

It won’t collapse them like my columns example but will stop them growing anymore.

1 Like
15

No, not really: There can be any number of links in the first column and the <div> in the second column can be any height. My code is just a sample and the sizes and values are just arbitrary numbers. Sorry I didn’t mention that in my question. :pray:

Many thanks for the demo, but as I said the number of links can be more than that, so I can’t use this approach. I’m going to stick to your first answer.

1 Like
16

You’re so creative! :ok_hand::ok_hand::ok_hand:

1 Like
17

Thanks for mentioning grid and the demo! :pray:

18

Shortened demo

1 Like
20

Yet another solution with positioning in a grid layout: demo.

1 Like
21

Yes I had something similar that works back to IE8 :slight_smile:

1 Like