[Solved] Making a div above another div – and both are inside a wrapper

[avisaac]

Ok so first it’s my firstquestion here on Stackoverflow and the first question ever at all… I started learning web development two month ago and I learned HTML CSS and most of JS and some jQuery… I never did any actual thing or experimented but now I’m trying to make my first project to start having practice..

So i’ve got this wrapper div and inside it I have two more divs, one is a kinda main content div and under it should be the other div which have a nice white img to blend with the overall website background. The problem is that I cant get the second div to be under the main div and inside the wrapper div. I’ve simlified it here in the code… Please let me know how to do it… Thanks and sorry if my English made you hit yourself in the face :)

The HTML
    <div class="wrapper">
    <div id="first"></div>
    <div id="second"></div>
</div>

The CSS

.wrapper {
  width:350px;
  height:350px;
  background-color:black;
  margin: 0 auto;
}
#first{
  width:250px;
  height:300px;
  background-color: white;
  margin: 0 auto;
}
#second{
  width:350px;
  height:100px;
  background-color: gray;
}

I’ve made a Pen on CodePen to show you what I mean better… http://codepen.io/Avisaac/pen/DgIzi This should be the resault only the gray div should be under the red div AND on the bottom of the red div, also i want the red div to be centered inside the wrapper. [plz notice that the wrapper should have the abillity to be centered also, as it is the main content area for my site which is centered.

I also attach a prtScr I took of my monitor to explain better: the white square is the main content (meaning #first) the white gradient on the bottom is the second div (#second) which contains this gradient. the main content should be over the gradient so that the main content blend with the pattern background.. Hope I made it clearer http://img841.imageshack.us/img841/2882/qg6j.jpg

[Paulie_D]

Ok so first it’s my firstquestion here on Stackoverflow

Fail! :)

OK…let’s start with this.

one is a kinda main content div and under it should be the other div which have a nice white img to blend with the overall website background.

this being the case, we should probably be looking at a bg image and not, necessarily another div.

[avisaac]

Oh god the shame O: … Yea but its relevant here also.. I need togive a big thank you to chris, I’ve learned a lot from his youtube channel.

any way, yea you are right it’s a bg image. My original code is:

              <div id="mainWrapper">
            <div class="main">
               some code
            </div>
            <img id="white" src="img/white.png" />      
        </div>

[Paulie_D]

I confess I’m struggling to understand what is exactly supposed to be happening, probably because your latest code is not related to the original code.

Anyway, working from the latest code.

I think you are saying the the #mainWrapper has a background image (the bluish checker / pisellated pattern). Right?

What you want to do is somehow fade this bg image into white using another image (or something) so that it disappears by the time we get to the bottom of the page…Is that right?

It would be useful to see what you have so far and a link to the blue image would be helpful.

[Paulie_D]

I have played a bit and you could do something like this: http://codepen.io/Paulie-D/pen/eDLkG

[avisaac]

Your Pen worked!! Tnx a million my friend (I’ve seen in Chris’s video”Let’s Answer Forum Questions” that you help here a lot so thanks in advance!)

[Author]

Posts