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 make a image stay at the bottom but not rise up

    With Watin, how do I wait until an element gets a certain CSS class?

    How to trigger css3 rotate effect by clicking?

    Javascript slide showing the last image 5 times

    How to make a div 100% of page (not screen) height?

    How to wrap text to the next line inside a DIV and not go off the screen

    How to prevent default title behavior with CSS or JavaScript [duplicate]

    How to have a bold header text?

    jQuery - how to “reset” a .css() rotated icon?

    How to position two elements side by side?

    How * tag can be used in CSS?

    How to make text appear under div without moving other items in list?

    How to add css to a single mvc Helper method when validation fails - from within the model

    How can I create an addin in Visual Studio to generate javascript, CSS and other code from a settings file

    How to properly center steps in bootstrap?

    How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

    How could I achieve the same navigation using CSS3? (currently flash AS3)

    How to override\edit Zurb Foundation base CSS styles?

    How can I set a CSS property on the html element with jQuery?

    unexpected script/css conflict, how to resolve?

    How to specify a CSS border on hover around thumbnails?

    how to make target link work giving different css properities

    How to add style to android app

    How to change the Attribute background color in css code

    How to speed up a slow loading PHP page that is processing several large arrays?

    How do you get multiple views in one window like JSFiddle does [closed]

    Hide/Show table in my Email with the use of a button

    Can't figure out how to set color for specific div's in the loop

    How to load CSS into CodeIgniter

    How to extend the background of a CSS-arrow to the whole page width?