Geek Answers Handbook

Problem with one div under another

Ok, I know this was asked before, but I need some specific advice, please, please?

I'm not sure that I completely lost my mind here, but I can’t get my .info div under the #deals div in my life. I use a background image, so the height of the first div is fixed (the image is not provided for privacy reasons). I can obviously move it by adding an add-on, but this is not ideal. Can someone help indicate 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?

+6
source share
2 answers

Your info div is nested in your div deals . 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>
+3
source

.info is inside #deals . Unable 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 inserting your code correctly, and it becomes much easier for you to see these things. If you have legacy code, you can use an online tool like http://www.freeformatter.com/html-formatter.html#ad-output to automatically format the HTML code for you.

+2
source

More articles:


All Articles