CODEWITHSUNDEEP
htmlcsscss-float
Joshua
Joshua

Reputation: 439

How to align with css

I want to display my subtitles with unique style. So we use the following css code for style

.title-1 {
    border-bottom: 1px solid #4db2ec;
    margin-bottom: 10px;
    padding-bottom: 4px;
    position: relative;
    font-size: 16px !important;
    color: #FFF }

.title-1 > span { 
    background: #4db2ec;
    width: auto;
    padding: 4px 7px }

Now I am insert advertisement block with following html code with wrap text.

<div style="float: right; margin-left: 20px;"> 
    <img src="http://domain.com/ad.jpg" height="600" width="160">
</div>
<h2 class="title-1"><span id="location">My Sub Title</span></h2>

now my title style is operlap in my advertisement block. how to solve this?

enter image description here

Here is a jsFiddle: http://jsfiddle.net/f025d5Lh/

Upvotes: 1

Views: 72

Answers (1)

NoobEditor
NoobEditor

Reputation: 15921

Simplest is to add z-index:-999; to .title-1, this will push down the relative div below any div

Demo

CSS

.title-1 {
    border-bottom:1px solid #4db2ec;
    margin-bottom:10px;
    padding-bottom:4px;
    position:relative;
    font-size:16px !important;
    z-index:-999;  /* only change */
    color:#FFF
}
.title-1 > span {
    background:#4db2ec;
    width:auto;
    padding:4px 7px
}

Upvotes: 1

Related Questions