Menu
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?
563
Div itself is a block element that means if you add div then it would start from under the another div. Still you can do this by using the css property that is display:block; or assign width:100%; add this to the div which you want under another div.
If you want the two div s to be displayed one above the other, the simplest answer is to remove the float: left; from the css declaration, as this causes them to collapse to the size of their contents (or the css defined size), and, well float up against each other.
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
use clear:left; or clear:both in your css. I meant it should be below the list, not the map.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
