CSS: Best way to format layout - html

Question

I would like to know what the best way is to format the following layout:
(with eveything aligned and spaced neatly):
Here is the HTML:
<div class"wrapper">
<img alt="Image 1" src="images/image1.png" />
<div class="description">
<h1>Heading 1</h1>
<p>Paragraph 1</h1>
</div>
</div>
I tried the following but the vertical-align property does not seem to be working as I cannot align the top of the h1 with the top of the image:
img, div.description {
float: left;
}
div.description { margin-left: 10px; vertical-align: top; }
h1 { background: blue; }
p { background: red; }
What if instead of how the right hand side part is displayed below,
we wanted the right hand side to also be vertically centered instead
of being top aligned?
Here is the JSFiddle link:
http://jsfiddle.net/johngoche99/ZPKZj/1/
OK, to keep the text from dropping down below when the browser is resized it is necessary to specify the width of the wrapper element to something like 700px. Then it works.
Thanks.

Answer 1

in css you need to do this
img{
float: left;
height: 300px
}
div{
float: left;
}
h1{
padding: 10px;
background-color: #584480;
color: #fff;
font-weight: normal;
font-size: 25px;
margin: 0 0 10px 10px;
}
p{
padding: 10px;
background-color: #E24480;
color: #fff;
font-weight: normal;
font-size: 25px;
margin: 0 0 10px 10px;
}
nothing more ...
Hope this will help you ...

Answer 2

This can be accomplished with simple CSS.
img, div{
float: left;
margin: 10px;
}
http://jsfiddle.net/ZPKZj/2/
IRL, do NOT use this CSS. It is far too generic to be useful in any production environment. You might give your elements IDs or classes to allow the rules to be much more specific.

Answer 3

It looks you markup need a little change to be more, khm right;
HTML:
<div id="all">
<div id="sidebar">
<img class="side_image" alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
</div>
<div id="main">
<h1>Heading 1</h1>
<p>Paragraph 1</h1>
</div>
</div>
CSS:
#sidebar { float: left; }
#sidebar { margin-right: 40px; }
h1 {
margin-bottom: 30px;
margin-top: 0;
}
link to look how it will be:
http://jsfiddle.net/56Z7C/1/

Answer 4

I think you want something like this:
JSFIDDLE
You want to use css here. You will add an ID to the first div like <div id="wrapper"> this is your main div. Then in the second div you add <div id="headings"> for the headings. then in your css add the beneath code. (note: this isn't the best css code ever. but it works :))
html:
<div id="wrapper">
<img alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
<div id="headings">
<h1>Heading 1</h1>
<p>Paragraph 1</h1>
</div>
</div>
css:
#wrapper{
width: 960px;
margin: 0 auto;
}
#wrapper img{
float: left;\
margin-right: 40px;
padding-right: 40px;
}
#headings{
position: relative;
float: left;
}
h1{
margin-top: -5px;
}
Hope it helps!

Answer 5

Vertical-align only works on tables. If you want to do that with divs, you could try using display: table:
<div class="table">
<div class="row">
<div class="cell">
<img alt="Image 1" width="100" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
</div>
<div class="cell" id="stuff">
<h1>Heading 1</h1>
<p>Paragraph 1</p>
</div>
</div>
</div>
And the CSS:
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
#stuff { vertical-align: middle; }
This has the advantage of not being dependent on sizes/margins of elements, but is unsupported in IE7 and below. As all things in life, display: table is a tradeoff.