DIV allignment help

DeadlyByDesign · 04-09-2010 4:25pm #1

Hi Guys

first here is link
http://dublindogwalking.deadlybydesign.com/

second my prob is that I want to get the logo of the dog and the "Dublin dog walking" part alligning next to each other not top and bottom.

here is the HTML an CSS, Any help at all would be great guys

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Dublin Dog Walking</title>

<link rel="stylesheet" type="text/css" href="mycss.css"/>

</head>

<body>

<div class="wrapper">

<div class="header">

<img src="logo.jpg" width="200" height="200" />

</div>

<div class="header">

<h1>Dublin Dog Walking<h1>

</div>

<div class="navigation">
<ul>

<li><a href ="index.htm">Home<a></li>

<li><a href ="aboutus.htm">About Us<a></li>

<li><a href ="testimonials.htm">Testimonials<a></li>

<li><a href ="contactus.htm">Contact Us<a></li>
</ul>

</div>

<div class="contentWrapper">

<h2> Welcome to Dublin Dog walking!</h2>
<p>Here at Dublin Dog Walking we aim to provide you with <strong>peace of mind</strong> for you and your favourite companion. We will pick your dog up and bring it for walks and lots of free roaming exercise! So no more feeling guilty when you have to go to work. You now have the peace of mind that your dog is being looked after and having the time of his life while you are stuck at work. Call Sinead today for more information and prices!</p>
<img src="pic1.jpg" width="100" height="100" />
<img src="pic2.jpg" width="150" height="100" />
<h3>Areas Covered</h3>
<p> We cover the inner city dublin region. Please call ahead for more information when you consider booking an appointment with us.</p>
</div>

<div class="footer">

This is the footer.

</div>

<div style="clear:both;"></div>

</div>

</body>

</html>

CSS:

body {

margin:0;

padding:0;

font-family:Verdana, Arial, Helvetica, sans-serif;

}
.header {
margin:10px;
float:none;

}

.wrapper {

width:960px;

margin:0 auto;

background:#ffffff;

}

.navigation {

float:left;

width:200px;

min-height:200px;

height:auto !important;

height:200px;

margin:10px;

background:#FF33FF;

}

.contentWrapper {

float:left;

width:600px;

min-height:200px;

height:auto !important;

height:200px;

border:1px solid black;

padding:5px;

margin:10px;

background:#9999FF;

}

.footer {

float:left;

clear:both;

width:960px;

}

lil_lisa · 04-09-2010 4:32pm

Just change the two divs to:

<div class="header" style="float:left; width: 50%">

<img src="logo.jpg" width="200" height="200" />

</div>

<div class="header" style="margin-left:50%; width:50%">

<h1>Dublin Dog Walking<h1>

</div>

DIV allignment help

Comments