CODEWITHSUNDEEP
htmlcss
Andi Rahadian
Andi Rahadian

Reputation: 11

How to make the div inside wrapper bigger than wrapper itself without change the structure

How to make the <div> inside wrapper bigger than wrapper itself without change the structure?

HTML

<div class="page row1">
    <div class="home-wrapper row2">
        <div class="home-slider row3"></div>
    </div>
<div>

CSS

.page { width: 100%; height: 400px; border: 1px solid #000; background: #eee; }
.home-wrapper { width: 90%; height: 400px;border: 1px solid red; background: #ccc; margin: 0 auto;}
.home-slider{ width: 100%; height: 200px; border: 1px solid blue; background:#000; }

http://jsfiddle.net/46vpqmgh/1/

I want the black box is same width with the page <div> without change the structure, using only CSS.

Thanks

Upvotes: 1

Views: 361

Answers (3)

misterManSam
misterManSam

Reputation: 24692

Add:

  • position: absolute to .home-slider to pull it out of the normal flow

  • top: 0 and left: 0 to .home-slider to position it correctly

  • position: relative to .page to make it's children absolute positioned elements relative to it

Percentage height and width will be calculated based on the size of .page.

Have a fiddle!

Added CSS

.page {
    position: relative;
}
.home-slider {
    position: absolute;
    left: 0;
    top: 0;
}

Read more about the CSS position property over on the MDN

Absolute positioning

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.

In our example above, the nearest positioned "ancestor" is .page

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

Change the following class:

.home-slider {
    width: 100%;
    height: 200px;
    border: 1px solid blue;
    background:#000;
    position: absolute;/*Add position absolute*/
    left: 0;/*Add left to 0*/
}

fiddle

Upvotes: 0

mehmetseckin
mehmetseckin

Reputation: 3107

Add the following properties. Looks fair to me. 

.home-slider {
    /* ... */
    z-index: 1;
    margin-left: -5%;
    position: fixed;
}

Upvotes: 0

Related Questions