CSS Forum

**Reaper2794** · 05:12 PM

Hey guys. I downloaded a small layout from this one site. It had div on the left side for navigation. I would like to make one on the right and I tried by copying the left div and the CSS for it but it didn't work.

Here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Ability Chart - Layout Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body{ 
background-color:#dc8;
font-size:16px; 
margin:0; 
padding:0; 
}

#header{
    background-color:#333;
    height:150px;
    width:100%;
    color:red;
}

#left{ 
float:left;
width:200px;
background-color:#dc8;
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}

#center {
    margin-left:200px;
    background-color:#eec;
    min-height:650px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:650px; /* for IE5.x and IE6 */
}

#footer {
    clear:both;
    background-color:#333;
    height:100px;
    color: red;
    text-align: center;
}
</style>
</head>
<body>
<div id="header">

</div>


<div id="left"></div>

<div id="center">

  <h1 align="center">Home</h1>
  <p><strong>I like this site! Where should I start? </strong></p>
  <p>The very first thing you should do is bookmark and/or favorite our site! You're gonna want to come here often and it's much easier for you when you have our site bookmarked and/or favorited. </p>
  <p>Have you signed up? If not, make sure you do right away. By signing up, you become a member of our site which allows you to access more features and get support faster! You also become a part of our great community! </p>
  <p>After signing up, make sure you join our Forums. Our Forums play a BIG role in our community providing you with instant support, endless entertainment and best of all, a friendly environment where players get to share their thoughts!</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="footer">
  <hr />
Copyright &copy; 2009 National Specialist Group</div>
</body>
</html>

I would like the same bar on the left to be on the right side of the page.

Please correct the code and show me what you had to do to correct it (use different colors please)

Also I have all those &nbsp things (I know it means space). I pressed space to make it editable so can I like make it have more height without having all those spaces in there.

Why is it &nbsp for a space? Is there a meaning to it?

What color is the left navigation panel btw? It says #dc8 but I can't find that with PhotoShop even when I choose web colors.

You see the space on the upper and lower part of the main section? Why are those there? How can I fix that?

And for the last question, what does Min-Height do?

Thanks for your time and effort!

~ Reaper ~

**LadynRed** · 06-03-2009, 06:35 PM

Quote:

Why is it &nbsp for a space? Is there a meaning to it?

It means NON-BREAKING space, exactly what it says.

Your styles for IE6 and below need to be in a SEPARATE css filed called by conditional comments, otherwise ALL browsers will read those styles!

As for adding a column, shouldn't be all that hard. Add another div, give it a defined width, float it right and it should work. Just make sure that all your divs combined don't add up to be wider than the container they're in.

**bindassdelhiite** · 06-08-2009, 10:02 AM

Try this code .. tested at my side and working properly and a lil modified

.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Ability Chart - Layout Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div, h1, h2, h3, h4, h5, h6 { width: auto; height: auto; overflow: hidden; margin: 0; padding: 0; }

body{ 
    width: 100%;
    height: auto;
    overflow: auto;
    margin: 0;
    background-color:#dc8;
    font: 12px/1 Verdana;
}

#outer-wrapper {
    width: auto;
    margin: 0 auto;
    text-align: center;
    }

#header{
    background-color:#333;
    width:100%;
    height: 120px;
    color:red;
    text-align: left;
}
#header h1 {
    padding: 10px 20px 0;
    color: #FFF;
    font: 72px Tahoma;
    }

#content {
    width: 1000px;
    margin: 0 auto;
    text-align: left;
    }
    
#left{ 
    width: 200px;
    min-height:650px; /* for modern browsers */
    height: auto !important; /* for modern browsers */
    float: left;
    background-color:#dc8;
}

#center {
    width: 556px;
    background-color: #eec;
    min-height:650px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    padding: 10px 20px;
    float: left;
}
#center h2 {
    color: #333;
    font: 24px Tahoma;
    text-align: center;
    }
#center p { line-height: 2; }

#right{ 
    width: 200px;
    min-height:650px; /* for modern browsers */
    height: auto !important; /* for modern browsers */
    float: right;
    background-color:#dc8;
}

#footer {
    clear:both;
    background-color:#333;
    height:100px;
    color: red;
    text-align: center;
}
#footer p {
    color: #FFF;
    }
</style>
</head>
<body>
<!-- outer-wrapper begins -->
<div id="outer-wrapper">
    <!-- header begins -->
    <div id="header">
        <h1> Your Title </h1>
    </div>
    <!-- header ends -->

    <!-- content begins -->
    <div id="content">
        <div id="left"></div>

        <div id="center">
            <h2>Home</h1>
            <p><strong>I like this site! Where should I start? </strong></p>
            <p>The very first thing you should do is bookmark and/or favorite our site! You're gonna want to come here often and it's much easier for you when you have our site bookmarked and/or favorited. </p>
            <p>Have you signed up? If not, make sure you do right away. By signing up, you become a member of our site which allows you to access more features and get support faster! You also become a part of our great community! </p>
            <p>After signing up, make sure you join our Forums. Our Forums play a BIG role in our community providing you with instant support, endless entertainment and best of all, a friendly environment where players get to share their thoughts!</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
        </div>

        <div id="right"></div>
    </div>
    <!-- content ends -->
    
    <!-- footer begins -->
    <div id="footer">
        <hr />
        <p> Copyright &copy; 2009 National Specialist Group </p>
    </div>
    <!-- footer ends -->
</div>
<!-- outer-wrapper begins -->
</body>
</html>

I hope that this will be helpful to you.

Thanks,
Bindass Delhiite

enjoy