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 fix position element so that while hovering on one element other two element should remain at same place

    Bootstrap 3 - How to maximize input width inside navbar

    How to style menu in CSS to look like a button

    How to put background after anchor tag throw css?

    How to add styles programmatically?

    How do I vertically center an img in a div?

    How to make a floating page div responsive

    CSS: How to make an image-border

    How to do grid of div elements?

    How to make horizontal division using html div tag and css

    How to create a layout with 2 menu bars in css?

    How to move this structure to the right without using float?

    How to align TH Header with TD in TBody

    How do I avoid using !important?

    How to show “next”, “previous” buttons on an image (on mouseover)?

    How to create change image option on mousehover like in gmail account?

    How to use CSS to create the left - right alignment so the left div does not push the right div

    Div is laying ontop of absolute-positioned element. How to put element above the div?

    How to set div width to the width of the table in it?

    How to apply css to an iframe

    In javascript, how to get a class name from a td cell?

    How to set numerous links in a single line with CSS?

    How can I make an unclickable HTML “Ghost” Div?

    How to make a Bootstrap 3 dropdown menu open by default when it is inside a collapsed navbar

    How can I create a DIV that scrolls with the browser's scroll bar, that contains flexible content

    CSS: How to create colsgroup like semantic-ui way

    how to animate a css grandient change with jquery

    How to set color of the Button with jQuery UI?

    How to apply css styles in embed widget

    Make nav dropdown show above all other divs