CODEWITHSUNDEEP
css
Dave
Dave

Reputation: 5029

Div that fills width of screen inside Centered Div

Is this possible? I have Div2 specifically positioned inside Div1. The only thing now is I would like Div2 to span the width of the entire screen, instead of just spanning the width of Div1. 

|----------------------------------------------------------|
|                       Browser                            |
|                                                          |
|                                                          |
|                                                          |
|                                                          |
|           --------------------------------               |
|           |        Div1 (relative)       |               |
|           |                              |               |
|           |                              |               |
|-----------|------------------------------|---------------|
|           |           Div2               |               |
|           |(currently absolute & in Div1)|               |
|-----------|------------------------------|---------------|
|           |                              |               |
|           |                              |               |
|           |                              |               |
|           |                              |               |
|           --------------------------------               |
|                                                          |
|                                                          |
|                                                          |
|----------------------------------------------------------|

This is the CSS I have now:

.page{
      height: 300px;
      width: 400px;}

.Div1{
    float:left; 
      left: 50%;
    height:200px; 
    width:100px;
    position:relative;
        background-color: red;
}

.Div2{
    position:absolute; 
    top:21px; 
    width:100%; 
    height:24px;
        background-color: yellow;
}​

Here is JSFiddle for my current problem: http://jsfiddle.net/vBqgT/21/ Thanks.

Upvotes: 1

Views: 126

Answers (3)

KatieK
KatieK

Reputation: 13853

You don't really need CSS3 do accomplish this. Since div2 is inside div1, it's width is constrained by div1. Therefore, to make div2 wider than div1: 

.Div2{
    width:150%; 
}

You can also do this:

.Div2{
    left: -25%;
}

to adjust where the left edge of div2 starts.

See http://jsfiddle.net/jsxvK/.

But if the main goal is for div2 to take on the properties of the body (page in your case), consider putting the markup for div2 inside page, but not inside div. Then adjust the top position of div2 to move it up or down in the document.

Upvotes: 1

Fredy
Fredy

Reputation: 2910

Try this CSS:

.page{
      height: 300px;
      width: 100%;
    border: 0px solid red;
}

.Div1{
    margin: 0 auto;
    height:200px;
    width:100px;
    background-color: red;
}

.Div2{
    position:absolute;
    top:21px;
    width:100%;
    height:24px;
    background-color: yellow;
    left:0;
}

Here is the demo: http://jsfiddle.net/ongisnade/SqG3c/

Upvotes: 1

Tobias Ritzau
Tobias Ritzau

Reputation: 3327

Sure you can do that, but the position of div2 is given relative to div1 (thus left:0 whould place it left aligned to div1) if you make div2 a child of div1. If you don't want to place it relative to div1 you can either make div2 a sibling to div1 or you can remove position: relative; from div1. Another alternative is to use fixed position on div2. All of these have side effects that may not be desirable...

Sometimes it is necessary to use javascript to get exactly what you want. Say for example that you want to align to div1 on one axis and to the body on the other. Then it may be necessary to use scripting.

Upvotes: 1

Related Questions