CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

Positioning 2 icons outside a DIV aligned to the top

I'd like to achieve something similar to the picture below (2 icons, mail and phone outside my Article DIV (in white on the image), aligned to the top of the DIV and under each other (with 1 or 2 pixels space). I tried to set a class with a negative margin for the images but without success. What would be the best way to achieve this? Many thanks

enter image description here

.article {
    clear: right;
    float: right;
    text-align:justify;
    width: 450px;
    min-height:420px;
    height: 60%;
    padding: 50px 32px 49px 62px;
    margin-right:75px;  
    position: relative;
    z-index: 15;
    margin-top: 90px;
    background: #fff;
    /* max-width: 25%; */
    overflow-y: scroll!important;
}

Upvotes: 1

Views: 733

Answers (1)

Alfred Xing
Alfred Xing

Reputation: 4632

I would use position: relative on the article and position: absolute positioning on the icon set (I used a ul for simplicity):

JSFiddle: http://jsfiddle.net/szLsH/

HTML code:

<article>
    <div id="icons">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac libero velit. Proin euismod erat non diam malesuada ac semper purus dapibus. Donec id suscipit metus. Ut eu auctor mauris. Proin sed felis dui. Maecenas congue dapibus dolor, sodales feugiat nisi feugiat ac. Nulla nec massa in mi pharetra sollicitudin. Aliquam eu dui quis odio porttitor viverra ut cursus dui. Nullam quis tristique magna. Aliquam erat volutpat. Suspendisse potenti. Pellentesque rhoncus commodo odio vitae tincidunt. Praesent rutrum, nibh vitae porta luctus, felis quam dignissim risus, non tempus lectus magna non odio. Donec commodo laoreet dolor ut volutpat. Ut lobortis lobortis augue, in placerat arcu dapibus et. Maecenas vitae lectus quis enim suscipit euismod.
    </p>
</article>

CSS:

article {
    width: 200px;
    margin: 0 auto;
    position: relative;
    padding: 10px;
    border: 1px solid #AAA;
}

#icons {
    position: absolute;
    right: 100%;
    top: 0;
}
#icons ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#icons li {
    width: 50px;
    height: 50px;
    background: blue;
    margin: 0 5px 5px;
}

Upvotes: 2

Related Questions