CODEWITHSUNDEEP
htmlcss
Dtorr1981
Dtorr1981

Reputation: 263

Issue having one div under another

Ok, I know this has been asked before but i need some specific advice pretty please?

I'm not sure whether i'm completely losing my mind here, but I cant for the life of me get my .info div underneath the #deals div. I am using a background image thus the height of the first div is fixed (image not supplied for privacy reasons) I can obviously move it by adding padding but this isn't ideal. Can any one help point out what i'm doing wrong here?

    <div class="row" id="deals">
<div class="col-md-12">
<div><p class="lead" id="trans"><strong>Blah blah blah blah bla blah blah<br>blah blah bla blah blah</strong></p></div>
<div class="info"><p>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</p>
<p><strong>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</strong></p>
<p><strong>blah blah bla blah blahblah </strong>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</p></div>
  </div></div>

Css:

#deals {  
  height:600px;
  text-align:center;
  color:#fff;
  width:100%;
  margin:auto;
  }
#trans{
  font-size:25px;position:relative;
  background: rgb(0,0,0); /* Fallback for older browsers without RGBA-support */
  background: rgba(0,0,0, 0.5);
  width:43%;
  margin:auto;
  top:300px;
}
.info {
  color:#000;
}

It must be something really stupid, but what?

Upvotes: 6

Views: 87

Answers (2)

worldofjr
worldofjr

Reputation: 3886

Your info div is nested inside your deals div. If you can you should move it below like this;

<div class="row" id="deals">
    <div class="col-md-12">
        <div>
            <p class="lead" id="trans"><strong>Blah blah blah blah bla blah blah<br>blah blah bla blah blah</strong></p>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
         <div class="info">
            <p>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</p>
            <p><strong>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</strong></p>
            <p><strong>blah blah bla blah blahblah </strong>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</p>
         </div>
    </div>
</div>

Upvotes: 3

Martin Gottweis
Martin Gottweis

Reputation: 2739

The .info is inside the #deals. There is no way to put it under each other

<div class="row" id="deals">
    <div class="col-md-12">
        <div>
            <p class="lead" id="trans"><strong>Blah blah blah blah bla blah blah<br>blah blah bla blah blah</strong></p>
        </div>
        <div class="info">
            <p>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</p>
            <p><strong>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</strong></p>
            <p><strong>blah blah bla blah blahblah </strong>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</p>
        </div>
    </div>
</div>

Try indenting your code properly and you it gets much easier to see these things. If you have a legacy code, you can use an online tool such as http://www.freeformatter.com/html-formatter.html#ad-output to automatically format the html code for you.

Upvotes: 2

Related Questions