CODEWITHSUNDEEP
css
kratos
kratos

Reputation: 101

100% element in a width-fixed container with position property?

My issue on JSBin

I have a div container with text.

<div id="container">
      Some text with normal content flow...
      <div id="wholescreen">Some 100% text</div>
      Some text again, without #wholescreen above the content.
      #wholescreen must respect the content flow.
 </div>

CSS

#container {
   width: 200px; 
   margin: auto;
}

Inside, i want a a 100% element.

#wholescreen {
   position: absolute;
   left: 0;
   width: 100%
}

This works. But it was above the text. So, I tried position: relative:

#wholescreen {
   position: relative;
   left: 0;
   width: 100%
}

Now is not over the element, but it is not 100% too.

What I do? I want this result.

Upvotes: 0

Views: 768

Answers (2)

Di&#233;ssica
Di&#233;ssica

Reputation: 309

If #wholescreen has a fixed height, add a margin-top in the element directly after it:

#wholescreen + * {
  margin-top: /* value */;
}

This will not affect other elements. Like I said, only the element after #wholescreen.

» Example on JSBin

If you can change HTML...

Why do not you try this?

<div class="container">Lorem ipsum dolor sit amet.</div>
<div id="wholescreen">100%</div>
<div class="container">Consectetur adipisicing elit.</div>

The difference is that an element will not be child of another. :P

» Example on JSBin

Upvotes: 2

w3jimmy
w3jimmy

Reputation: 712

give position relative to the parent of container and give position absolute to #wholescreen but if you change css property position for any #wholescreen parent you might break this effect

body{
    position:relative
}
#wholescreen {
   position: absolute;
   left: 0;
   width: 100%;
   top: 50px; // give it a top value
}

in case you want #wholescreen to attach to the window and not move when scrolling, use

#wholescreen{
    position: fixed;
    left: 0;
    width: 100%;
}

check fiddle here: http://jsfiddle.net/AdVL8/6/

New EDIT

I gave it a better look and I've realised that you might not want to have an element hiding the text, so I think this is the effect that you want:

body{
    /* remove position: relative; */
}
#wholescreen{
    position: relative;
    text-align: center;
    left: 50%; /* the property that will help us find the center of the screen */
    width: 2000px; /* a width wider than any screen */
    margin-left: -1000px; /* centers the element (must be 50% of the width) */
}

Upvotes: 0

Related Questions