How do I split a single UL into a two column layout without changing the HTML?

Question

I have this markup from a CMS, which I cannot change. The only thing I could do is add custom classes to every li. With these limitations I need to accomplish a particular layout. Here is my current markup:

<ul class="sub-menu">
  <li><a>something</a></li>
  <li><a>something</a></li>
  <li><a>something</a></li>
  <li><a>something</a></li>
  <li><a>something</a></li>
  <li><a>something</a></li>
  
  <li class="somestuff">some markup</li>
</ul>

What I get with my current CSS is:

What I need to accomplish is:

Is this possible using flexbox or something on .sub-menu ?

Edit: I've made a codepen so it's easier to understand - https://codepen.io/anon/pen/ZRGxNE I need the green block on the right :)

The code you have posted does not in any way match the content of the images. Please post the **relevant** code, and include your existing CSS. — fubar, May 31 '18 at 22:22
@fubar sorry if It is not clear enough, but it could be any markup, styling css doesn't matter, I need only ideas to accomplish this layout with what I have. — MindPhuq, May 31 '18 at 22:47
@MindPhuq - If you already have the majority of CSS and markup, why would you not post it? You've just commented on a perfectly acceptable answer that it doesn't work with your curent code. So obviously your current markup and CSS is relevant. — fubar, May 31 '18 at 22:59

sol · Accepted Answer · 2018-05-31T23:07:11.510

2

An approach using CSS Grid:

#holder {
  background: lightblue;
  padding: 10px 20px;
  display: grid;
  grid-template-columns: auto auto;
  /* define the height of the blocks */
  grid-template-rows: repeat(6, 50px);
  /* use grid-gap instead of margin */
  grid-gap: 18px 0;
}

.left-stuff {
  background: red;
  grid-column: 1;
}

.right-stuff {
  grid-row: 1 / -1;
  grid-column: 2;
  background: green;
  
  border-left: 2px solid blue;
}

<div id="holder">
  <div class="block left-stuff"></div>
  <div class="block left-stuff"></div>
  <div class="block left-stuff"></div>
  <div class="block left-stuff"></div>
  <div class="block left-stuff"></div>
  <div class="block left-stuff"></div>
  <div class="block right-stuff"></div>
</div>

edited May 31 '18 at 23:07

answered May 31 '18 at 22:25

sol

22,311
6
42
59

1

@WOUNDEDStevenJones Sure, updated answer. – sol May 31 '18 at 22:30
Thanks! But this is what I get when using this - https://imgur.com/a/spvhmCo. Also I am little worried about browser support? – MindPhuq May 31 '18 at 22:45
You'll need to add additional HTML and CSS to your question. – sol May 31 '18 at 22:52
edited the post with a codepen, thanks! – MindPhuq May 31 '18 at 22:55
Duplicate: https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns – random_user_name May 31 '18 at 22:57
Here's a pen with your CSS, same problem - https://codepen.io/anon/pen/mKJxNx – MindPhuq May 31 '18 at 22:58
Updated answer based on additional code – sol May 31 '18 at 23:07
@MindPhuq In terms of support, you could consider wrapping the 'grid stuff' in a feature query. Unsupported browsers will get the layout in the image you posted, with the second column stacked below. – sol May 31 '18 at 23:18

How do I split a single UL into a two column layout without changing the HTML?

1 Answers1