How to overflow adjacent cell when using negative margin

I want to use negative margins to cause overflow in an adjacent cell table when using a CSS table layout.

Update 3 - here's what I want, but without the green box width explicitly specified:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div style="display: table; margin-left: 300px;">
        <div style="display: table-row;">

            <!--Hack: width: 250px;-->
            <div style="display: table-cell; background-color: green; height: 30px; overflow-x: visible; width: 250px;"></div>


            <div style="display: table-cell; background-color: gray; height: 30px;">

                <div style="position: relative; width: 100%; background-color: azure;">
                    <div style="position: relative; width: 500px; margin-left: -250px; background-color: yellow; height: 5px;"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

      

Update 2

@Per Salbark - The case is pretty simple. The yellow box is user-designed, and the grin and gray are part of the "frame" The yellow center of the box should be aligned with the right edge of the first cell. The width of the nets and the gray box must be the same and equal to the width of the yellow box / 2. (Note: I put a "?" In the green cell to make sure it is visible otherwise it should be blank).

The key point here is that people are building their yellow border, which they don't need to know that green needs to be styled too easily because of negative margins that won't work.

Update 1 -

Q: Why do I need this?

A: I try to keep my layout as dynamic as possible. The green cell contains an unknown width, and the width of the yellow rectangle is also variable. I have to show their content in full. I thought the main div (table) would overflow and expand using the first cell, which was not the case.

http://jsbin.com/koqefomevulu/1/edit?html,output

<div style="display: table; margin-left: 300px;">
    <div style="display: table-row;">
        <div style="display: table-cell; background-color: green; overflow-x: visible; 
         height: 30px">
        ?
        </div>
        <div style="display: table-cell; background-color: gray; height: 30px;">
            <div style="position: relative; width: 100%; background-color: azure;">
                <div style="position: relative; width: 500px;
                 margin-left: -250px; background-color: yellow; height: 5px;">
                </div>
            </div>
        </div>
    </div>
</div>

      

Basically, I want the green cell to expand by 250px

to fit completely into the yellow frame - wondering if it can be achieved?

+3


source to share


1 answer


EDIT : see this: http://jsbin.com/xibeyucelowu/1/ - no need to set a fixed margin or width with this - better than the other fiddle I posted I think ..


Like this: http://jsbin.com/koqefomevulu/29/ ?



It works similarly to the hack of setting the green width to 250px

This works because the width of the yellow is exactly half the negative margin. Maybe some JS sets negative margin after loading dynamic yellow content? You only need to target one item. I don't think you will find a CSS only solution.

Do I need to use a table style?

+1


source







All Articles