I have a CSS dilemma that's really getting to me. The code I currently have places the description text under the 'title' but I want it to continue over, under the 'button'. I've experimented with different arrangements, but none of them seem to work as intended.
All help is welcome and appreciated!
<html>
<head>
<style>
body { background-color: #fff; color: white; }
.outer { width: 850px; height: 400px; background-color: #000; }
.logo {float: left; width:150px;height:150px;background-color: #00f;}
.button {float: right; height: 60px; width: 80px; background-color: #f00; }
.title { font-size: 60px; float:left;}
.desc {clear:both;}
</style>
</head>
<body>
<div class="outer">
<div class="head">
<div class="logo">oo</div>
<div>
<div class="title">Title</div>
<div class="button">button</div>
<div class="desc">description text description text description text description text description text description text description text description text description text description text description text description text</div>
</div>
</div>
</div>
</body>
</html>
The content should flow beside the blue box in the image above.