How do I correctly fromat this div's contents?


Tags: html,css

Problem :

I'm trying to improve my basic design "skills". I'm attempting to recreate this: http://i.imgur.com/WbXsILe.png but I don't know how to format it correctly with the right css.

HTML

<div class="container">
<img class="cover" src="book.png" width="45" height="60"/>
<h3>Title of Something</h3>
<p> Cracking the code </p>
<img class="icon" src="icon.png" width="45" height="40"/>
</div>

CSS

.container {
width: 40%;
height: 107px;
background: #fff;
position: relative;
}

.cover {
position: absolute;
left: 10px;
top: 5px;
}

.icon {
position: absolute;
right: 10px;
bottom: 10px;
}

#container h3, p {
color: #000;
position: absolute;
left: 60px;
top: 15px;
margin: 5px;
}

Any suggestions?



Solution :

Here is the way to fix the issue, your html working fine only the css need to be edit.

CSS

.container {
width: 40%;
height: 107px;
background: #fff;
position: relative;
    float:left
}

.cover {
position: absolute;
left: 10px;
top: 5px;
}

.icon {
position: absolute;
right: 10px;
bottom: 10px;
top: 15px
}

h3, p {
color: #000;
position: relative;
left: 60px;
top: 15px;
margin: 5px;
}

DEMO


    CSS Howto..

    How to use jQueryUI tootip along with my custom css

    HTML – Show menu on hover

    How to achive certain overlapping layout when there is not enough space in parent container?

    how to add JS and CSS tags from module without using header hook

    CSS how to solve -webkit- functions

    How to Make Certain Phrases Appear on One Line Regardless of Screen Size

    How can I make a filter like this? [closed]

    Django Allauth - How to add custom css class to fields?

    How to apply an effect of white lines crossed to a div with css

    how to compute Facebook graph api cover offset_y to pixel?

    How to position this using only CSS and no tables

    How to reload or rerender CSS for a single HTML element? [duplicate]

    How do I display all the data in a MySQL table in a theme? [closed]

    How to position two elements side by side?

    How do I add a placeholder for vertical scrollbar with twitter bootstrap 2.0?

    two divs in one div with img in each two, how to autoresize but keep row formation?

    How would you design the css and html to divide up this rounded widget?

    How do I change gradient color of text inside the Jumbotron?

    How to draw a Normal Distribution Curve (Bell curve) using CSS and JavaScript?

    How to reveal part of blurred image where mouse is hovered?

    CSS Border Color: How to set bottom border color?

    how do I properly position a button element with css?

    How to Include Multiple Javascript Files in .NET (Like they do in rails)

    How to make background image position stay same on all resolutions?

    How to get CSS pulsating effect to work in FireFox and Internet Explorer?

    How to set a child's element 50px narrower to its parent element in css? [closed]

    How to check if two elements are toggled using Jquery?

    How to add a Google icon font to pseudo :before

    How do I create 3D perspective using CSS3?

    How to make a text box have rounded corners?