Home/ Questions/Q 6242989
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T12:03:16+00:00

In this I want the div #intro to float below the div #navtop .

  • 0

In this I want the div #intro to float below the div #navtop.

At the moment it hovers below on the right side.

   <style> 

  #wrapper {
   width:850px;
   height:auto;
   margin:auto;
   font-family:Arial, Helvetica, sans-serif;
   }

  #header {
   height:100px;
   width:850px;
   margin:0;
   margin-top:25px;
   background:url(img/header.png) no-repeat #000 ;
   border:2px #000 solid;
   }

  #navtop {
   width:auto;
   height:45px;
   float:left;
   background:#000;
   padding-right:8px;
   }

  #navtop a {
   width:500px;
   margin:0px;
   margin-left:8px;
   padding-left:4px;
   padding-right:4px;
   color:#FFF;
   padding-bottom:0px;
   text-decoration:none;
   }

  #logo {
   height:40px; 
   width:40px;
   margin-left:4px;
   }

  #navtop a:link {
   background:#666;
   }

  #navtop a:hover {
   color:#999;
   }

  #intro {
   width:auto;
   height:auto;
   float:left;
   background:#666;
   margin-top:70px;
   padding:4px;
   border:2px #000 solid;
   }

  #about {
   width:500px;;
   height:auto;
   float:right;
   background:#666666;
   margin-top:25px;
   padding:5px;
   border:2px #000 solid;
   }

  h2 {
   font-family:Arial, Helvetica, sans-serif;
   color:#FFF;
   margin:0px;
   padding:0px;
   }

  body {
   background:#999;
   }

 </style>

  </head>

 <body>
 <div id="wrapper">
<div id="header"></div>

<div id="navtop"><img id="logo" src="img/logo.jpg" alt="logo" width="40" height="40" />
<a href="link.php">Home</a>
<a href="link.php">About</a>
<a href="link.php">tour</a>
<a href="link.php">photos</a>
<a href="link.php">contact</a>
</div>
<div id="intro">
   <img src="img/djpic.jpg" width="300" height="450" alt="pic" /></div>
   <div id="about"> <h2>DJ TECHIE LUNCHBOX</h2> 
  <p>DJ Techie Lunchboxis the current dj who knows what an audience thinks , her upside down skiiny fettish style sjing will
  leave any with a head without for for chips and shandy . chocolate malnurishment bring a        chip bang mismosh to her long term goals
 .</p>
 .
 </div>


 </div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s because you have float: left; on #intro.

    Try this:

     #intro {
width:auto;
height:auto;
clear:left;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
 }
 #about {
width:500px;;
height:auto;
float:left;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;

    }

    edited to make the #about div float next to #intro div.

    • 0