All geek questions in one place

Make the width of the div div the width to the left, not the right

I have a div on my site that contains a list of elements that act like menus. I set CSS width:auto to resize if the menu item is too long. At the moment, it will expand to the right and “push” the rest of my content to the right.

It is difficult to explain, for example, if you go to http://redsquirrelsoftware.co.uk/ and click on the Support menu item, you will see the content moves. I want the div to expand to the empty space to the left of the menu.

The CSS I have for the div at the moment is:

 .sidebar1 { float: left; width: auto; min-width: 25%; max-width: 29%; margin-top: 65px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 12px; }

Is there any way to expand it? Thanks in advance.

+4
source share
2 answers

This idea needs to be tested, but it works in Chrome at least:

  • Change .content and .sidebar1 to float: right instead of float: left .
  • In HTML, move .sidebar1 after .content .
+2
source

Another way I found for this without using floats or absolute positioning is to use direction: rtl for the parent and then reset for the children:

 .parent { direction: rtl; } .parent > * { direction: ltr; } .child { width: 200px; } .child:hover { width: 400px; }

Pen Code: http://codepen.io/heisters/pen/gMgboJ

(sorry, I could not base the example on the OP website, as the link seems dead).

+4
source

Source: https://habr.com/ru/post/1436355/

More articles:


All Articles