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 only CSS to round my div tag area's corners?

    HTML CSS, how to create a Side bar or column

    How to target Microsoft Edge with CSS? [duplicate]

    How to select an element's great-grandchild for CSS rules?

    How can we avoid the shake when we hover over an element and set its border?

    How to underline list items separately with CSS?

    How to make css transform-origin property work in IE7 and IE8?

    How can I add CSS to a form in Rails when the form is rendered in two different locations?

    How to make this CSS layout

    How to display mouseover effect in GridView rows using only CSS?

    How to make a dotted underline link on hover?

    How do you explain this div spacing issue?

    How to add mouse hover properties to pie drawn on a node in d3?

    How can I make make css transition happen when applying width through javascript

    How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located

    How to make a drop-right menu?

    Show specific comment in LESS file when compiled to CSS while keeping all other comments hidden

    How do I iterate through the elements of a table and change the background color of each element in JavaScript?

    How to make horizontal division using html div tag and css

    CSS HTML how to remove whole cell links in tables?

    How to convert external css properties to inline property? [closed]

    css + thymeleaf - How to auto-adjust displayed screen size?

    I'm am trying to have a responsive navigation bar for small screens, how can I change the left links to a css drop-down menu?

    How to create a horizontal calendar with nested lists?

    How can you print a page that has been altered by javascript?

    How do I make a horizontal sitemap using UL?

    show loading image before the content loads through jquery or ajax

    How to format the text below using css

    How do I select columns including colspans in a table?

    How to get asterisk in placeholder with css