Jump to content

[SOLVED] Damn it

waynew

By waynew
in CSS Help

 Share

Recommended Posts

waynew Advanced Member

waynew

Posted
Posted

I've been scratching my head all day trying to fix this one. I need an extra pair of eyes. The problem is that the div id "mainbody" doesn't seem to extend in height in Firefox.

 

File:

 

<?php
require("master/master.php");
$site->set_description("This is just a template page");
$site->set_keywords("Template, Testing, Etc");
$site->set_title("Template");
$site->set_style("global.css");
$site->print_header();
?>
<body>

<!--start wrapper-->
<div id = "wrapper">

    <!--start banner-->
    <div id = "banner">
    
        <!--start logo span-->
        <div id="logo">
            <h1>
            <a href="index.php">
            <img src="images/logo.jpg" alt="Website Design - PHP Developer - Logo Design - Wexford - Ireland" style="border:0px;">
            </a>
            </h1>
        </div>
    <!--end logo span-->
    
        <!--start contact-->
        
        <div id="contact">
        
            <h2><a href="contact.php" style="color:#FFFFFF;">Contact <span style="color:#81DBF5;">Me >> </span></a></h2>
            Simply quote your budget and we'll work things out.
        
        <!--end contact-->
        </div>
    
    <!--end banner-->
    </div>
        
    <div id="nav">
    <ul>
    <li><a href="index.php" title="Website Design Wexford">Home</a></li>
    <li><a href="services.php" title="The services that I offer">Services</a></li>
    <li><a href="portfolio.php" title="Portfolio Works">My Portfolio</a></li>
    <li><a href="blog-section.php" title="Articles relating to website development">My Blog Section</a></li>
    <li><a href="contact.php" title="Contact me">Contact</a></li>
    </ul>
    </div>
    
<!--start mainbody-->
    <div id ="mainbody">
    
        <!--start intro-->
        <div id="homepage_intro">
        
        <!--start intro website design-->
        <div class="intro_box">
        
        	<h2>Website <span style="color:#81DBF5;">Design</span></h2><br/>
            <!--start intro website design text-->
            <div class="intro_text">
                I design table-less websites that are completely structured and styled using CSS and XHTML. With every single project; I aim to create something that is clean, easy to use, nice to look at, fast loading and welcoming to search engines such as Google. I understand that a company's website must not only represent it, but also extend it. 
            </div>
        
        <!--end intro website design-->
        </div>
        
        <!--start intro php-->
        <div class="intro_box">
        <h2>PHP/MySQL <span style="color:#81DBF5;">Freelancer</span></h2><br/>
        
        <!--start intro php text-->
        <div class="intro_text">
        Need a website that allows your visitors to contact you without ever having to leave your website? Need a system that allows you to update the content yourself? I can build blogs, content management systems, news sections, user accounts, contact forms, forum boards and complete online communities.
        </div>
        
        <!--end intro php-->
        </div>
        
        <!--start intro logo design -->
        <div class="intro_box">
        <h2>Logo <span style="color:#81DBF5;">Design </span></h2><br/>
        
        <!-- start intro logo design text -->
        <div class="intro_text">
        I design logos that are clean, simple and unique. I understand that a company's logo must be designed with both the company's personality and target market in mind.
        </div>
        
        <!--end intro logo design-->
        </div>
        
        <!--end intro-->
        </div>
        
        <div id ="mainbodytext">
        <div id ="leftcol">
        <h2>Howdy Yall</h2>
        <p>Welcome to my portfolio website! As you may have guessed from the in-your-face logo and obvious website URL; I raise my ears and answer to the name of Wayne. I am 21 years of age, and I am currently a third year Multimedia Applications Development student at the Waterford Institute of Technology in Ireland. I'm from County Wexford, which is known as the "sunny south east" (I agree with the "south east" part).
          I started out programming in Java and learned PHP/MySQL in my own time. My course deals with Java, Database Systems and Website Development. Other than programming and website development, I like to write, do the whole clubbing thing and waste precious time fooling around with my PlayStation 3.</p>
          
        <p>This is the 7th re-design of my website, which just goes to show how critical I am of my own work. This time, I decided that it was time to create a full-scale website that acted as a place to host my portfolio AND a place to host a blogging system... YEA I KNOW! All at the same time. Anyway, lets wrap this up! Enjoy the website and if you need to contact me, simply <a href="contact.php">click here</a>.</p>
        </div>
        </div>
    
    </div>
</div>

<div id="footer">

<div id ="footer-body">
Design Copyright Wayne Whitty 2008
</div>

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

 

And the CSS file of course:

 

@charset "utf-8";
/* CSS Document */

body{
background-color:#231f20;
background-image:url(images/stripe2.jpg);
background-repeat:repeat-x;
padding:0px;
margin:0px;
color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

.input{
padding:5px;
border:1px #CCCCCC solid;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

.button{
background-color:#81DBF5;
border:0px;
padding:3px;
border:1px #FFFFFF solid;
}

#mainbody a{
text-decoration:none;
color:#FFFFFF;
border-bottom:1px #81DBF5 dotted;
}

#mainbody a:hover{
text-decoration:none;
color:#81DBF5;
border-bottom:1px #FFFFFF dotted;
}

h1,h2,h3,h4,h5{
padding:0px;
margin:0px;
}

h1{
font-size:24px;
}
h2{
font-size:18px;
color:#FFFFFF;
}
h3{
font-size:16px;
color:#FFFFFF;
}

#wrapper{
width:900px;
margin:auto;
padding-top:80px;
}

/*Start banner*/
#banner{
width:895px;
clear:both;
height:60px;
}

#logo{
float:left; 
width:295px;
}

#contact{
float:right; 
width:300px; 
padding-top:7px;
}
/*End banner*/

#nav{
clear:both;
width:900px;
}

#nav ul{
list-style: none;
padding: 0px;
margin: 0px;
}

#nav li{
float: left;
margin: 0 0.15em;
} 

#nav li a{
background-color: #282425;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #333333;
color: #FFFFFF;
text-decoration: none;
text-align: center;
}

#nav li a:hover{
background-color: #282425;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #333333;
color: #81DBF5;
text-decoration: none;
text-align: center;
}

#mainbody{
background-color:#282425;
background-image:url(images/bodytop.jpg);
background-repeat:no-repeat;
width:900px;
clear:both;
margin-bottom:50px;
padding-top:35px; 
padding-bottom:10px;
}

#mainbodytext{
text-align:justify;
width:840px;
clear:both;
margin:auto;
background-color:#282425;

}

#leftcol{
width:410px;
float:left;
padding:10px;
}

#rightcol{
width:410px;
float:right;
padding:10px;
}

/*Start homepage introduction box*/
#homepage_intro{
width:840px; 
margin:auto; 
padding-bottom:20px; 
clear:both; 
height:180px;
border-bottom:1px #333333 solid;
margin-bottom:20px;
}

.intro_box{
width:270px; 
padding-left:10px;
float:left;
}

.intro_text{
width:230px; 
text-align:justify; 
margin:auto;
}
/* End introduction */

#footer{
height:300px;
clear:both;
background-color:#282425;
background-image: url(images/footer-image.jpg);
background-repeat:repeat-x;
}

#footer-body{
width:900px;
margin:auto;
padding-top:35px;
padding-left:5px;
padding-right:5px;
padding-bottom:10px;
}

Link to comment
Share on other sites
waynew Advanced Member

waynew

Posted
  • Author
Posted

Okay, I've thrown the usual pieces into include files. As you can see, I added a load of <p> tags to see if the div id "mainbody" would expand in height with the content in Firefox. It worked. However... the "mainbodytext" div seems to appear outside of "mainbody".

 

<?php
require("inc/master/master.php");
$site->set_description("This is just a template page");
$site->set_keywords("Template, Testing, Etc");
$site->set_title("Template");
$site->set_style("global.css");
$site->print_header();
?>
<body>

<!--start wrapper-->
<div id = "wrapper">


<?php include("inc/html/banner.php"); ?>     
<?php include("inc/html/navigation.php"); ?>
    
<!--start mainbody-->
    <div id ="mainbody">
      <p>s</p>
      <p>s</p>
      <p>s</p>
      <p>s</p>
      <p>s</p>
      <p>s</p>
      <p>s</p>
      <p>s</p>
      <p>s</p>
      <p>s</p>
      <p>ss</p>
      <p>s</p>
      <p>s</p>
      <p></p>
        <!--start mainbodytext-->
      <div id ="mainbodytext">
        
        <!--start left col-->
        <div id ="leftcol">
        <h2>Howdy Yall</h2>
        <p>Welcome to my portfolio website! As you may have guessed from the in-your-face logo and obvious website URL; I raise my ears and answer to the name of Wayne. I am 21 years of age, and I am currently a third year Multimedia Applications Development student at the Waterford Institute of Technology in Ireland. I'm from County Wexford, which is known as the "sunny south east" (I agree with the "south east" part).
          I started out programming in Java and learned PHP/MySQL in my own time. My course deals with Java, Database Systems and Website Development. Other than programming and website development, I like to write, do the whole clubbing thing and waste precious time fooling around with my PlayStation 3.</p>
          
        <p>This is the 7th re-design of my website, which just goes to show how critical I am of my own work. This time, I decided that it was time to create a full-scale website that acted as a place to host my portfolio AND a place to host a blogging system... YEA I KNOW! All at the same time. Anyway, lets wrap this up! Enjoy the website and if you need to contact me, simply <a href="contact.php">click here</a>.</p>
        <!--end left col-->
        </div>
        <!--end mainbodytext-->
      </div>
    
  </div>
</div>
<?php include("inc/html/footer.php"); ?>

 

CSS:

@charset "utf-8";
/* CSS Document */

body{
background-color:#231f20;
background-image:url(images/stripe2.jpg);
background-repeat:repeat-x;
padding:0px;
margin:0px;
color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

.input{
padding:5px;
border:1px #CCCCCC solid;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

.button{
background-color:#81DBF5;
border:0px;
padding:3px;
border:1px #FFFFFF solid;
}

#mainbody a{
text-decoration:none;
color:#FFFFFF;
border-bottom:1px #81DBF5 dotted;
}

#mainbody a:hover{
text-decoration:none;
color:#81DBF5;
border-bottom:1px #FFFFFF dotted;
}

h1,h2,h3,h4,h5{
padding:0px;
margin:0px;
}

h1{
font-size:24px;
}
h2{
font-size:18px;
color:#FFFFFF;
}
h3{
font-size:16px;
color:#FFFFFF;
}

#wrapper{
width:900px;
margin:auto;
padding-top:80px;
}

/*Start banner*/
#banner{
width:895px;
clear:both;
height:60px;
}

#logo{
float:left; 
width:295px;
}

#contact{
float:right; 
width:300px; 
padding-top:7px;
}
/*End banner*/

#nav{
clear:both;
width:900px;
}

#nav ul{
list-style: none;
padding: 0px;
margin: 0px;
}

#nav li{
float: left;
margin: 0 0.15em;
} 

#nav li a{
background-color: #282425;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #333333;
color: #FFFFFF;
text-decoration: none;
text-align: center;
}

#nav li a:hover{
background-color: #282425;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #333333;
color: #81DBF5;
text-decoration: none;
text-align: center;
}

#mainbody{
background-color:#282425;
background-image:url(images/bodytop.jpg);
background-repeat:no-repeat;
width:900px;
clear:both;
margin-bottom:50px;
padding-top:35px; 
padding-bottom:10px;
border:1px #FF0000 solid;
}

#mainbodytext{
text-align:justify;
width:840px;
clear:both;
margin:auto;
background-color:#282425;

}

#leftcol{
width:410px;
float:left;
padding:10px;
}

#rightcol{
width:410px;
float:right;
padding:10px;
}

/*Start homepage introduction box*/
#homepage_intro{
width:840px; 
margin:auto; 
padding-bottom:20px; 
clear:both; 
height:180px;
border-bottom:1px #333333 solid;
margin-bottom:20px;
}

.intro_box{
width:270px; 
padding-left:10px;
float:left;
}

.intro_text{
width:230px; 
text-align:justify; 
margin:auto;
}
/* End introduction */

#footer{
height:300px;
clear:both;
background-color:#282425;
background-image: url(images/footer-image.jpg);
background-repeat:repeat-x;
}

#footer-body{
width:900px;
margin:auto;
padding-top:35px;
padding-left:5px;
padding-right:5px;
padding-bottom:10px;
}

[/code]

Link to comment
Share on other sites
JasonLewis Member

JasonLewis

Posted
Posted

float:left; is the monster behind this. Clearing the float solves it, why... I can't remember the reason's and what-not, CSS isn't my biggest point. I try to avoid floats when using CSS. It has its uses, but if I don't need it I don't use it.

I usually make a floatclear class, so then I can just call that after I have floated a div so that everything keeps to the layout.

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

Since floats take an element out of the document flow, the element they are contained by will not expand to hold them. The reason being that as far as the parent element is concerned, the child element doesn't even really exist anymore.

 

I don't like adding a cleared div to the content though, as it's adding extra unnecessary content to it. Generally, adding:

 

overflow: auto;

 

to the parent element will cause it to stretch to contain the child element, although if you have a height set to the parent element, this can cause scroll bars to appear if the sum of the heights of the child elements is greater than the height set to the parent element.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.