Forums

Preeminent

Hi All,
I am having a problem with divs. I have multiple divs contained within the "extras" div as you can see below.
I currently have a jquery/php photo scroller("api"), an rss to html converter("blog"), and a contact form("contact"), all within "extras".
Well as you can see below, I still need to add content to "books" div and the "music" div. Every time I do, the "blog" and "contact" divs are effected and get moved down.

The divs don't really have margins that would be causing this.

What can I do so that this doesn't happen. Do I need to use "clear-both" somewhere?

<div id=\"extras\">
    <div id=\"takepictures\">I also take pictures...	</div>
     <div id=\"api\">
	 <?php echo $flickr ?>	 </div>
	 
    <div id=\"books\">//I need content Here.//
	</div>

<div id=\"music\">//I need content Here.//
</div>
	
	

	
	   
	   
    <div id=\"blog\"> 
	 <?php
require_once '/homepages/37/d221555405/htdocs/carp/carp.php';
 CarpConf('maxitems',1);
 CarpConf('poweredby','');

 CarpCacheShow('http://preem.com/blog/feed/');
?> 
</div>


	  
    <div id=\"contact\">
	  <div id=\"contactme\"><img src=\"contactmenote.png\" alt=\"Contact me anytime!\" />	</div>
	<form action=\"contactform.php\" method=\"post\" name=\"contactForm\" id=\"contactForm\">
      <label class=\"label\">Name
      
      <input name=\"textfield\" type=\"text\"  class=\"border\" maxlength=\"100\" />
      </label>
      <p>
        <label class=\"label\">Email
        
        <input name=\"textfield2\" type=\"text\" class=\"border\" maxlength=\"100\" />
        </label>
      </p>
      <p>
        <label class=\"label\">Message
        <textarea name=\"textarea\" class=\"borders\" ></textarea>
        </label>
        <input name=\"recipient\" type=\"hidden\" id=\"recipient\" value=\"0,1\" />
        <input name=\"subject\" type=\"hidden\" id=\"subject\" />
        <input name=\"required\" type=\"hidden\" id=\"required\" value=\"Name,Email,Message\" />
        <input name=\"Email_Only\" type=\"hidden\" id=\"Email_Only\" value=\"Email\" />
        <input name=\"redirect\" type=\"hidden\" id=\"redirect\" value=\"http://www.preem.com/thankyou.php\" />
        <input name=\"redirect_type\" type=\"hidden\" id=\"redirect_type\" value=\"include\" />
      </p>
      <p>
        <label>
        <input type=\"submit\" name=\"Submit\" class=\"buttonborder\" value=\"Submit\" />
        </label>
      </p>
    </form></div>
</div>
  <!--end extras-->

Here is the css for the divs above:

 #extras {
    background: url(\"api.png\");
	position:relative;
	height:536px;
	width:980px;
	overflow:hidden;

#api {
   position:relative;
   left:60px;
   top:20px;
   width:200px;
   height:200px;
  }

 #blog {
   position:relative;
   left:470px;
	width:150px;
	top:-65px;
   }

 #takepictures {
   position:relative;
   left:83px;
   top:13px;
   width:250px;
   font-size:25px;
   font-family:Georgia, \"Times New Roman\", Times, serif;
   }

#contact {
   position:relative;
  float:right;
   width:200px;
   top:-375px;
   margin-right:70px;
   }
   }

mikeFromBavaria

What do you mean by "Every time I do, the "blog" and "contact" divs are effected and get moved down"?
Do you mean that the output in the browser actually gets moved down?

The first thing that I recognize is that you css definition for the #extras div is not being closed!!
In most cases when I have trouble with css a invalid css definition is the cause for the problems.
Try using a xhtml validator like the http://validator.w3.org/
This (in most cases) will help you identify problems, that are caused by e.g. not closed div tags or wrong definitions!

Greets, Michael

Preeminent

Hello!
Thanks for your reply! Yes, that is what I mean there. Actually in the browser the other divs are being affected.
As for the "extra" div not being closed. Sorry about that. In my actual code, it is closed. I just copy and pasted wrong.

treehouse : what would you like to learn today?

Forums

Having troubles with Divs staying in Place.