How to make a child div wider than the parent div

Question

I want to make a child div whose width must wider than the parent div. As I read on some examples, It is written that the child div must have a relative position. I tried lots of combination but didn't help me. Please check below CSS and HTML codes and help me. Normally, I prepared it in jsFiddle but it is hard to understand the problem in there.

I gave an id that called thatDivMustHaveTheSameWidthWithContainer for the div that I want to make the same width with the container.

Css :

        .site-container {
        background-color: #000;
        margin: 0 auto;
        max-width: 1600px;
        min-width: 1180px;
        width: 100%;
        position: relative;
    }

    .container {
        display: block;
        width: 1180px;
        margin: 0 auto;
        position: relative;
    }

    .slider {
        display: block;
        margin-bottom: 40px;
    }

        .slider .slider-container {
            position: relative;
            width: 1180px;
            height: 208px;
        }

            .slider .slider-container .slider-content {
                position: absolute;
                width: 1060px;
                left: 60px;
                height: 208px;
                overflow: hidden;
            }

                .slider .slider-container .slider-content .slider-content-wrapper {
                    width: 1080px;
                    height: 208px;
                }

                    .slider .slider-container .slider-content .slider-content-wrapper .slider-item {
                        width: 158px;
                        height: 206px;
                        border: 1px solid #333;
                        float: left;
                        display: block;
                        margin-right: 20px;
                    }

    .product-item {
        position: relative;
        overflow: hidden;
        width: 158px;
        height: 206px;
        border: 1px solid #333;
        float: left;
        display: block;
        margin-right: 20px;
    }

        .product-item img {
            width: 158px;
            height: 206px;
        }

HTML:

<body>
<div class="site-container">
    <div style="min-height: 700px;">
        <div class="container">
            <div class="slider">
                <div class="slider-container">
                    <div class="slider-content">
                        <div class="slider-content-wrapper">

                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A" alt="">

                            </a>
                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">

                            </a>
                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">

                            </a>

                        </div>
                    </div>
                </div>
            </div>

            <div class="slider" style="background-color: red;" id="thatDivMustHaveTheSameWidthWithContainer">
                <div class="slider-container">
                    <div class="slider-content">
                        <div class="slider-content-wrapper">

                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A" alt="">

                            </a>
                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">

                            </a>
                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">

                            </a>

                        </div>
                    </div>
                </div>
            </div>

            <div class="slider">
                <div class="slider-container">
                    <div class="slider-content">
                        <div class="slider-content-wrapper">

                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">

                            </a>
                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A" alt="">

                            </a>
                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">

                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>

Hi @SunilGehlot . https://jsfiddle.net/ebkkdjpv/ but as I said it is hard to understandt the problem in there:/ — doganilker, Dec 15 '15 at 06:54

score 1 · Answer 1 · answered Dec 15 '15 at 07:05

actually, i can't understand what you really want to do, but i have created a fiddle for you Check This On JsFiddle and i want it helps you ... let me know if it doesn't :)

.parent {
  background-color: orange;
  margin:50px;
  width: 200px;
  position: relative;
  min-height: 200px;
}
.child {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: -30px;
  right:-30px;
  background-color: green;
}

<div class="parent">
  <div class="child"></div>
</div>

How to make a child div wider than the parent div

1 Answers1