Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 7, 2021 at 1:30 pm #1270861
    steviger

    Hi,

    For a project I’d like to have a lay-out as shown in the attachment (see red frame).
    I guess I need two 1/2 elements with the right (text) side having some kind of negative left margin and a z-index.
    I’ve been fiddling around for quite some time but I can’t seem to get it to work.

    BTW, it’s only about the postitioning of the elements. Rounded corners, shadow etc. are not an issue ;)

    Could you point me in the right direction?
    Thanks in advance!

    Best regards,

    Steven

    January 8, 2021 at 5:12 am #1271009
    Rikard

    Hi Steven,

    You should be able to achieve that using two 1/2 elements, then place a div in right right one, and give it negative left margin like so:

    <div style="margin-left: -200px;">Your content goes here</div>

    Please give that a try. If you don’t have any luck then please post a link to where we can see the actual elements on your site.

    Best regards,
    Rikard

    January 9, 2021 at 5:02 pm #1271232
    steviger

    Hi Rikard,
    Thanks for the great support (as always…) It works like a charm. One thing I cannot seem to get right is the box-shadow on the right of the div (see screendump here).
    I use:

    background-color: #fff;
-webkit-box-shadow: rgba(0,0,0,0.08) 0 4px 14px;
box-shadow: rgba(0,0,0,0.08) 0 4px 14px;

    Please see privat content for work in progress …

    Best regards,

    Steven

    January 11, 2021 at 4:08 am #1271451
    Rikard

    Hi Steven,

    You need to give it some margin to the right as well, since it’s all the way to the right as it is now. That means the box shadow won’t show.

    margin-right: 20px;

    That will push it a bit to the left, and your box shadow will show after that.

    Best regards,
    Rikard

    January 11, 2021 at 4:18 pm #1271621
    steviger

    Hi Rikard,

    Of course ….

    Thanks again!

    Regards,

    Steven

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘[SOLVED] Horizontal overlapping elements’ is closed to new replies.