how to fix this layout_问答_开发者_运维开发者技术经验分享

i have been trying to get the singer/songwriter title to float to the right of the name on top of page. i also want a separate row with img and the paragraph of text to the right of that.

the problem i am now having is that i cant create a black navigation menu that floats to the right of the girls image and stays below the paragraph of text

ive coded the following up in dreamweaver, this is excluding the nav menu. When i view the document in dreamweaver it all displays correctly. however when i open it in a browser it displays wierd and the paragraph of text is displayed underneath the big image.

could somebody provide help as to why this is happening and once fixing it, how i would add a navigation menu directly underneath the paragraph of text, cheers

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Untitled Document</title>
      <style type="text/css">
         body{margin:0px; padding:0px;}
         #footer{ ba开发者_开发问答ckground:black; height:100px;}
         #top{height:50px; background:black; }
         .logo{float:left;}
         .title{float:left;}
         .alice{float:left;}
         .info{float:left;}
      </style>
   </head>
   <body>
      <div class="wrapper">
         <div id="top">
            Content for id "top" Goes Here
         </div>
         <div class="logo">
            <img src="http://digitalgenesis.com.au/sites/alice/img/namelogo.png" />
         </div>
         <div class="title">
            <h2>Singer/Songwriter</h2>
         </div>
         <div style="clear:both;">
         </div>
         <div class="alice">
            <img src="http://digitalgenesis.com.au/sites/alice/img/alice.png" />
         </div>
         <div class="info">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa est, ultrices quis volutpat vitae, volutpat id mauris. In lacinia, nisi sit amet tincidunt rhoncus, nunc augue pharetra neque, eget sagittis orci justo tincidunt lectus. Phasellus sollicitudin lacus sed nisl eleifend bibendum. Vivamus imperdiet porttitor facilisis. Pellentesque quis metus risus, ac sagittis augue. Vivamus vehicula lacus ullamcorper sapien tincidunt congue. Vivamus diam tellus, faucibus sit amet rutrum ut, mattis eu orci. Fusce ullamcorper, odio et ultricies posuere, lorem orci faucibus orci, vel vehicula mauris arcu vitae metus. Cras congue nulla id quam elementum porttitor. Praesent dapibus odio nec nisl pretium quis pharetra leo suscipit. <br /><br />
               Phasellus vestibulum magna ut tortor sagittis ut pretium tellus feugiat. Integer ullamcorper enim vitae odio ultricies tempor. Donec ullamcorper erat tincidunt tortor laoreet ultricies. Nullam volutpat sollicitudin est, et hendrerit metus aliquam in. Nunc convallis tempus velit, a interdum ipsum ultricies eu. Integer ultrices mollis molestie. Donec augue sem, lacinia quis tempor id, rutrum quis sapien. Nullam sit amet velit vitae justo tempus fermentum sit amet et sapien. Ut pretium metus odio, a tempus nisi. Ut fringilla semper justo. <br /><br />
               Aliquam pellentesque libero sit amet nisi feugiat sagittis. Integer in purus magna. Suspendisse at ipsum id ante fringilla vehicula id eget nibh. Morbi consequat ligula quis mauris sagittis egestas. Maecenas quam odio, posuere nec venenatis non, posuere ut elit. Nulla tincidunt tristique tellus in commodo. Donec aliquet libero et enim porta vel auctor ipsum aliquet. Aenean eget nisl non quam auctor malesuada vitae id felis. In scelerisque massa eu turpis fringilla congue. Cras odio sem, aliquam et blandit nec, semper ut turpis. Curabitur bibendum, magna sed rhoncus placerat, justo quam scelerisque sem, et varius massa nisi ac ligula. In pharetra tincidunt odio, sodales mollis sem congue non. Integer ullamcorper nibh augue, sit amet semper eros. Nunc malesuada odio vel nisi venenatis quis dictum nisi lacinia. Sed imperdiet dapibus sem, a suscipit justo fringilla at. Fusce quis lacus a diam porttitor auctor. Suspendisse potenti.
            </p>
         </div>
         <!-- end info -->
         <div style="clear:both;">
         </div>
         <div id="footer">
            Content for id "footer" Goes Here
         </div>
      </div>
      <!-- end wrapper -->
   </body>
</html>

(EDIT: See this fiddle)

Hi dazza_au,

Very rough fix but will do the job: http://jsfiddle.net/MedDj/4/

Basically, you need to add a width to your floated elements if you want them to float next to each other.

Check out the live example above and let me know if you need a further explanation?

Regards, Dan

Here's the code in case you need it straight away:

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
    <div id="top">Content for  id "top" Goes Here</div>
<div class="wrapper">
  <div class="logo"><img src="http://digitalgenesis.com.au/sites/alice/img/namelogo.png" /></div>
  <div class="title"><h2>Singer/Songwriter</h2></div>
<div style="clear:both;"></div>
  <div class="alice"><img src="http://digitalgenesis.com.au/sites/alice/img/alice.png" /></div>

  <div class="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa est, ultrices quis volutpat vitae, volutpat id mauris. In lacinia, nisi sit amet tincidunt rhoncus, nunc augue pharetra neque, eget sagittis orci justo tincidunt lectus. Phasellus sollicitudin lacus sed nisl eleifend bibendum. Vivamus imperdiet porttitor facilisis. Pellentesque quis metus risus, ac sagittis augue. Vivamus vehicula lacus ullamcorper sapien tincidunt congue. Vivamus diam tellus, faucibus sit amet rutrum ut, mattis eu orci. Fusce ullamcorper, odio et ultricies posuere, lorem orci faucibus orci, vel vehicula mauris arcu vitae metus. Cras congue nulla id quam elementum porttitor. Praesent dapibus odio nec nisl pretium quis pharetra leo suscipit.
<br /><br />
Phasellus vestibulum magna ut tortor sagittis ut pretium tellus feugiat. Integer ullamcorper enim vitae odio ultricies tempor. Donec ullamcorper erat tincidunt tortor laoreet ultricies. Nullam volutpat sollicitudin est, et hendrerit metus aliquam in. Nunc convallis tempus velit, a interdum ipsum ultricies eu. Integer ultrices mollis molestie. Donec augue sem, lacinia quis tempor id, rutrum quis sapien. Nullam sit amet velit vitae justo tempus fermentum sit amet et sapien. Ut pretium metus odio, a tempus nisi. Ut fringilla semper justo.
<br /><br />
Aliquam pellentesque libero sit amet nisi feugiat sagittis. Integer in purus magna. Suspendisse at ipsum id ante fringilla vehicula id eget nibh. Morbi consequat ligula quis mauris sagittis egestas. Maecenas quam odio, posuere nec venenatis non, posuere ut elit. Nulla tincidunt tristique tellus in commodo. Donec aliquet libero et enim porta vel auctor ipsum aliquet. Aenean eget nisl non quam auctor malesuada vitae id felis. In scelerisque massa eu turpis fringilla congue. Cras odio sem, aliquam et blandit nec, semper ut turpis. Curabitur bibendum, magna sed rhoncus placerat, justo quam scelerisque sem, et varius massa nisi ac ligula. In pharetra tincidunt odio, sodales mollis sem congue non. Integer ullamcorper nibh augue, sit amet semper eros. Nunc malesuada odio vel nisi venenatis quis dictum nisi lacinia. Sed imperdiet dapibus sem, a suscipit justo fringilla at. Fusce quis lacus a diam porttitor auctor. Suspendisse potenti. </p> 
<ul class="nav">
    <li><a href="#">Nav button one</a></li>
    <li><a href="#">Nav button two</a></li>
</ul>

  </div><!-- end info -->

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

</div><!-- end wrapper -->
<div id="footer">Content for  id "footer" Goes Here</div>
</body>
</html>

CSS

.wrapper{min-width:800px;width:800px;}
body{margin:0px; padding:0px;}
#footer{ background:black; height:100px;}
#top{height:50px; background:black; }
.logo{float:left;}
.title{float:right;padding:40px 10px 0 0; font-size:130%;}
.alice{float:left;width:400px; overflow:hidden;}
.info{float:left;width:400px;}
.info ul.nav{
    list-style:none;
    padding:0;
    margin:10px 0;
    overflow:hidden;
}

.info ul.nav li{
    float:left;
    padding-right:10px;
}

.info ul.nav li a{
    background-color:#000;
    color:#fff;
    padding:10px;
    text-decoration:none;
    display:block;
}