CODEWITHSUNDEEP
htmlcsscss-position
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

How to align an icon to the right of content

I have some contents within a DIV. I want to add an image icon to the right of but not push down the rest of the contents underneath it.

Here is my HTML:

<div id="subpageFooter">
    <div id="subpageFooterLeft">
          <div style="z-index: 15; position: relative; left: 0; padding-left: 20px; padding-top: 30px; font-weight: bold; color: #00A0BE; font-size: 13px;">
                Administrative Office
          </div>
          <div style="z-index: 14; position: relative; left: 0; padding-left: 40px; padding-top: 10px; padding-right: 8px; font-weight: normal; color: #000000; font-size: 12px;">
                1250 Avenue, Purchase, NY 36253-2547<br>
                972.656.0700<br>
          </div>
          <img style="position: relative; display: inline-block; left: 80%; margin-right: 15px; width: 52px; height: 51px;" src="theImages/locateit.png" title="Locate Administrative Office" alt="LocateAdministrative Office" />
    </div>
</div>

Here is my CSS:

#subpageFooter {
    position: relative;
    width: 100%;
    height: 625px;
    background: url('../theImages/bg_90_w.png');
    /*box-shadow: 0 0 10px #FFFFFF;*/
}
#subpageFooterLeft {
    position: absolute;
    left: 0;
    float: left;
    width: 60%;
    height: 100%;
}

With the above code the page displays the following:

enter image description here

What I really want is:

enter image description here

Also when I resize the page the content on the left and the icon on the right will proportion correctly in space taken.

How can I accomplish that?

Upvotes: 0

Views: 100

Answers (2)

Lucky Soni
Lucky Soni

Reputation: 6878

Modern browsers with flexbox support

FIDDLE

<div class="wrapper">
    <div class="sidebar">Sidebar</div>
    <div>Main Content</div>
</div>

.wrapper {
    display: flex;
}

.sidebar {
  width: 260px;
}

Supporting older browsers

FIDDLE

Use floats for the divs that need to appear side by side. Like:

<div class="clearfix">
    <div class="main-content float-l">Content 1</div>
    <div class="sidebar float-l">Content 2</div>
</div>

.float-l {
    float: left;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.main-content {
    width: 700px;
}

.sidebar {
    width: 260px;
}

Also the total width of both the divs floated needs not to be more than 100% (including margin, padding and borders) of the available space

Upvotes: 2

Mark
Mark

Reputation: 1872

If you change your code around a bit it works.

<div id="subpageFooter">
<div id="subpageFooterLeft">
      <div style="z-index: 15; position: relative; left: 0; padding-left: 20px; padding-top: 30px; font-weight: bold; color: #00A0BE; font-size: 13px;">
            Administrative Office
          <img style="position: absolute; float: right; display: inline-block; left: 80%; margin-right: 15px; width: 52px; height: 51px;" src="theImages/locateit.png" title="Locate Administrative Office" alt="LocateAdministrative Office" />
      </div>
      <div style="z-index: 14; position: relative; left: 0; padding-left: 40px; padding-top: 10px; padding-right: 8px; font-weight: normal; color: #000000; font-size: 12px;">
            1250 Avenue, Purchase, NY 36253-2547<br>
            972.656.0700<br>
      </div>
</div>
</div>

Working fiddle:

http://jsfiddle.net/nbx7F/

Upvotes: 2

Related Questions