CODEWITHSUNDEEP
htmlcss
EriktheRed
EriktheRed

Reputation: 43

Horizontally aligning items from multiple divs when text is wrapped

I have a numbered list in a div on the left side of the screen. Just to the right of that div, I have another div with items that correspond with the numbered list. When the screen is minimized so the text in the first line wraps to the second line, I'd like the 2 from the numbered list move to the third line to match up with the Second Item entry.

I've tried out a couple different things (using actual numbered lists, using a single div, etc...) and couldn't get anything to work. Using a single div makes the most sense, but I want the numbered list in a separate bar on the left side. this can be seen in the linked fiddle. Any help is appreciated!

  1. Below is how it views when not wrapped.
1   First Item
2   Second Item
  1. Below is how it views currently when wrapped.
1   First
2   Item
    Second
    Item
  1. Below is how I'd like it to view when wrapped.
1   First
    Item
2   Second
    Item

Here is the code:

<div class="xml-block">
<div id="xml-sidebar">
    <p class="xml-number">1</p>
    <p class="xml-number">2</p>
</div>

<div id="xml-group">
  <p class="xml-symbol xml-list">Position of the first entry.</p>
  <p class="xml-symbol xml-list"><span class="xml-text">Position of the second entry.</span></p>
</div>

In the following example, when the window is small enough that the text wraps, the number 2 from the list is not adjusted to stay with the Second Entry.

https://jsfiddle.net/b1Lpeffw/2/

Upvotes: 4

Views: 33

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You could use CSS counters for the line numbers instead. Not only will the number align with the code, but it simplifies your code quite a bit so you don't have to have a separate element with line numbers in your markup.

html {
	background-color: #272822;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
}

#xml-group {
	padding: 0;
  counter-reset: count;
}

#xml-group:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
	width: 3em;
	height: 100%;
	background-color: #1C1C18;
	margin: 0;
	padding: 0;
	border-right: 1px solid #505050;
}

.xml-list {
	font: 18px Monospace;
	color: #FFFFFF;
	text-decoration: none;
	padding: 0;
	margin: 0;
  position: relative;
  padding: 0 0 0 4rem;
}

.xml-list:before {
  counter-increment: count;
  content: counter(count);
  font: 18px Monospace;
	color: #505050;
	text-decoration: none;
  position: absolute;
  left: 0;
  width: 3em;
  text-align: center;
}

.xml-text {
	color: #EA9200;
}

li.xml-text-indent1 {
	margin-left: 1.5em;
}

li.xml-text-indent2 {
	margin-left: 3em;
}

li.xml-text-indent3 {
	margin-left: 4.5em;
}

li.xml-text-indent4 {
	margin-left: 6em;
}

.xml-symbol {
	color: #C177FF;
}

.xml-list li p {
	margin: 0;
	padding: 0;
}
<body>
  <div class="xml-block">

    <div id="xml-group">
      <p class="xml-symbol xml-list">Position of the first entry.</p>
      <p class="xml-symbol xml-list"><span class="xml-text">Position of the second entry.</span></p>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions