Geek Answers Handbook

Make adjacent sibling elements the same width using only CSS

I'm sorry in advance because I can’t show the code / images of what I’m working on for privacy reasons, however I think I can just explain it.

I have an element <h1>that acts as the title of my web page - this name can vary in length based on the title of the specific page on which the user is included, so he could say "Home page", or he could say: Saved projects " etc. Length varies.

<h1>has a sibling element, a <ul>, which acts as a drop-down list to go to these other pages.

My goal is to make the size of the dropdown list the same size as <h1>. Currently, the width is clear, I tried a “car” that didn't work, of course, and now I'm looking for other workarounds, but I decided that I could post here at the same time.

I use LESS, so I know that the variables are large, and it may be a matter of passing the variable as a value for the width of the drop-down list, however, I do not know if these variables can be dynamic depending on the length <h1>. I am new to LESS.

I looked through a couple of posts asking similar questions, but none of them got a very lasting solution. Google was also not very useful, most articles talked about parent-child sizes or relative width / height. Not comparing the widths of siblings.

Thanks for any help!

+4
1

( ). , , ? http://jsbin.com/hekimije/1/edit (jsFiddle :-()

, , :

  • h1 ul
    • , .
    • , ul
  • ul
    • 0, ,
    • 100%

, , , .

:

HTML

  <div id='title-wrapper'>
    <h1>Some title</h1>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul> 
  </div>


#title-wrapper {
  float: left; 
  position: relative;

  ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0; 
  }
}

jsBin - . , , ul . , , ul, ...

+3

More articles:


All Articles