Jump to content
Stef's Coding Community
Sign in to follow this  
jp612

Div container issue

Recommended Posts

For some reason all of a sudden my div wrapper (container) has gotten really small and wont enlarge on its own. Its really weird since the layout was fine before. But

ever since ive told all the elements inside my content wrapper to float left. The wrapper has reduced to really small size and cause the footer to float right up below the header. I have tried everything and i cant fix it. What i dont understand is why the divs wont respect the fact that they need to get bigger as more content is added.

 

anyway here is my index.php

 

<!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>Debes Web Design</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- <link href="css/home.css" rel="stylesheet" type="text/css" /> -->
<!-- <link href="css/contact.css" rel="stylesheet" type="text/css" /> -->
</head>

<body>

<div id="page-wrapper">
<div id="header-wrapper">
 		<div id="header">
  			<div id="logo">
  				<a href="index.php?page"><img src="images/debes-logo.png" width="210" height="88" alt="Debes Web Design Logo"/></a> 
   		</div> 
   		<div id="navbar">

           <ul>
             <li> <a href='index.php?page'>Home</a> </li>	
             <li> <a href='index.php?page=design'>Design</a> </li>
             <li> <a href='index.php?page=gallery'>Gallery</a> </li> 
             <li> <a href='index.php?page=contact'>Contact</a> </li>  
             <li> <a href='index.php?page=about'>About</a> </li>  
           </ul>
  		    </div>
 		</div>
</div>

<?php 

if($_GET['page'] == "design") {
include("includes/design.html");
}else if($_GET['page'] == "gallery") {
include("includes/gallery.html");
}else if($_GET['page'] == "contact") {
include("includes/contact.html");
}else if($_GET['page'] == "about") {
include("includes/about.html");
}else{
include("includes/home.html");
}
?>






<div id="footer">

</div>

</div>
</body>
</html>

 

and the home.html page (although this happens to all pages):

 

<!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>Homepage Debes Web Design Services</title>
<link href="css/home.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="content-wrapper">

	<div id="content-background"> 
   <div id="content"> 
	<div id="content-left-pane">
         <div id="leftpane-right">
         <h3>     Web Design</h3>
         <ul>
         <li>Website Design</li>
         <li>PSD to XHTML</li>
         <li>Drupal</li>
         <li>Wordpress</li>
         <li>Dreamweaver Templates</li>
         <li>Cross Browser Support</li>
         </ul>

         </div>    
       <div id="leftpane-left">
       <img src="images/pictures/ist2_2393284-build-your-website.jpg" width="193" height="151" alt="web-design"  />
       </div>

       <div id="leftpane-left-bottom">
        <img src="images/icons-homepage/Drupal_icon.png" height="69" width="60" alt="drupal" />
        <img src="images/icons-homepage/wordpress-icon.png" height="61" width="60" alt="wordpress" />
        <img src="images/icons-homepage/Adobe_Dreamweaver_CS4_Icon.png" height="60" width="60" alt="dreamweaver" />
        <img src="images/icons-homepage/crossbrowser.png" height="84" width="168" alt="browsers" id="cross-browser-image" />
       </div>

       </div>
	<div id="content-right-pane">
      	  <div id="rightpane-right">
         <h3>     Graphic Design</h3>
         <ul>
         <li>Website Layout Designs</li>
         <li>Logos</li>
         <li>Banners</li>
         <li>Website Re-Designing</li>
         </ul>
         <img src="images/icons-homepage/adobe-icons.png" height="58" width="192" alt="browsers" />
        </div> 

      	 <div id="rightpane-left">

           <img src="images/pictures/graphic-design-pencils.jpg" alt="pencils" width="150" height="148" />

        </div>

       </div>

       <div id="content-bottom-top-left">
			<h3>Thinking About Building A Website?</h3>
<p>Whether you want to find more clients for your business, advertise your services or you just want to create a personal presence, then a webpage is a good 	starting point. with a good webpage you are making yourself accessible to almost everybody on this planet. However these days there are many web pages out there and if not done right your webpage may get lost among many. This is where we come in. We can help you create an affordable, attractive site that is guaranteed to be ranked highly in all search engines.</p>

           <h5>We can help you create:</h5>
           <ul>
           <li> Personal webpages</li>
           <li> Online shops</li>
           <li> Webpages for small business</li>
           <li> Blogs</li>
           </ul>
<p>What ever your needs we are able to provide you with a cost effective solution. For more info visit the <a href="index.php?page=design">build website</a> page.</p>            



     </div>

<div id="content-bottom-top-right">

   <img src="images/pictures/ist2_14869821-thoughtful-businessman-working-with-his-laptop.jpg" width="253" height="380" alt="pic" />
   </div>  

  	<div id="content-bottom-right">
   <h3>Already have a Website?</h3>
   <p>Want to change the look and feel of your website? No problem!</p>

<p>We cant assist you in making your website more attractive, easier to navigate or fixing cross browser compatibility issues. We understand that every website is unique and therefore your problems may be unique too! So we tackle every problem using our logic and intuition. </p>

<p>For more information about your specific situation <a href="index.php?page=contact"> contact us.</a> </p>
</div>
<div id="content-bottom-SEO">



<h3> What about SEO and Marketting? </h3>

<p>We make sure that all Websites we design or edit are as search engine friendly as possible. All our designs use the latest scripting languages. Such as HTML5, XHTML 1.0 and CSS3 </p>


</div>



     </div>

     </div> 
   	<div id="maincontentborder-bottom"></div> 
    </div> 

</body>
</html>

 

and finally my style.css:


html, body {
   margin: 0;
   padding: 0;
   border: 0;

} 

img {
 border-style: none;
}

#logo {
 	float: left;
width: 210px;
height: 88px;
position: relative; 
margin-top: 17px;
}

#header-wrapper {
height: 174px;
background-image: url(../images/header-repeatcapable.gif);
background-repeat: repeat-x;
position: relative;
}


#header {
width: 868px;  
height: 174px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/header-repeatcapable.gif);
background-repeat: repeat-x;
position: relative;
}

#page-wrapper {

background-image: url(../images/background-color.gif);
background-repeat: repeat-x;
background-color: #F2FFFF;	/*use #F2FFFF; */


}

/* main content */

#content-wrapper {
padding-left: 3px;

width: 873px;
margin-left: auto;
margin-right: auto;


} 

#content-background {

width: 873px;	
background-image:url(../images/content-background-repeat-capable.gif);
background-repeat: repeat-y;
float: left;
}





/* main content borders */


#maincontentborder-bottom {


width: 873px;
height: 11px;
background-image: url(../images/maincontentborder-bottom.gif);		
background-repeat: no-repeat;
padding-left: 0px;
margin-left: 0.5px;  /*there is an issue since the background wont fill from left to right */
float: left;


}

#content {
width: 844px;
margin-left: 24px;
margin-top: 0;

}

/* main content borders end */


/* navbar */

#navbar {

width: 868px;
height: 40px;
background-image: url(../images/navbar.gif);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto; 
margin-top: 0;
position: relative;
top: 126px;
} 

#navbar ul {

position: absolute;	
margin-top: 13px;
margin-bottom: auto;
margin-left: 5px;
padding: 0;

}

#navbar li {


float: left;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 13px;
font-weight: bold;
list-style: none;
margin-left: 15px;
margin-right: 15px;
margin-top: 0;
} 

#navbar a:hover { text-decoration: none; color:#FFF;}
#navbar a { text-decoration: none; color:#000;}

/* navbar ends */

#footer {
height: 50px;
background-image: url(../images/footerdark-repeatcapable.gif); 
background-repeat: repeat-x;
position: relative;


}

/* Fonts etc */

h3, h4, h2, h1, h5, h6 {
   font-family: "Tahoma", Geneva, sans-serif;
}

p {
font-size: 0.8em;	
color: #333;
}

html, body {
margin: 0;
padding: 0;
border: 0;


}

h2 {
font-family: "Tahoma", Geneva, sans-serif;
margin: 0;   			/* Dont change margin-top, Seems to bugger up page use padding instead */
margin-left: 0px;
border: 0;
padding-top: 10px;;

}

#form-contact {
margin-left: 35px;
margin-top: 10px;
float: left;
height: 330px;
width: 624px;

}

#content {
margin-left: 30px;
width: auto;
width
}
/* Contact Us forms */

span#name,#company,#website,#email,#enquiry {
font-size:13px;
}

span#enquiry {

position: relative;
bottom: 150px;

}

#input-name {
;
margin-left: 15px;
}

#input-website {

margin-left: -26px;
}

#input-email {

margin-left: -39.5px;

}

#input-enquiry {
float: left;
margin-left: 4px;
}

#input-submit {
float: right;
margin-right: 44px;
}

#input-name, #input-website, #input-company, #input-email, #input-enquiry {
margin-bottom: 10px;
}

 

I did create a seperate css file just for the homepage since there was alot of css just for that but the layout isnt defined in there.

 

Thanks!

Share this post


Link to post
Share on other sites

It's best to always work with content - often, you just can't see how a division will really act if it's empty.

 

So, first - a few words into each div.

 

Then, I find it very helpful to give each div a different background color - )and while it's best practice to use hex or RBG colors, for this purpose, I use color names - I now 'red' is red, but I never know if FFFFFF or 000000 is black - or white)

 

I also like to keep the css in the order the divs appear.

 

You don't need all those 'position relatives' , but after floated divisions, add a 'clear: both' to the next division.

 

Do you have the page up somewhere? I played with the code, but without also having the images, I don't quite get what you're after.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...