CODEWITHSUNDEEP
css
user379888
user379888

Reputation:

Sidebar border not getting displayed

I am writing a website code but I am unable to display the border for the sidebar. Here it is. And below is the code,

<!DOCTYPE html >
<!--HTML WEBSITE
/*********************************************************************************************************************************************************NAME:FAHAD UDDIN*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The New Boston</title>
<style type="text/css">
#container
{
    padding:0px;
    margin:0px;
    background:#BFBFBF;
}
#header
{
    height:100px;
    background-color:#333;

}
#header logo
{

}
#navigation
{
    padding:0px;
    margin:0px; 
}
#navigation ul
{
        background-color:#F00;
}
#navigation ul li
{
    text-decoration:none;
    display:inline;
    color:white;
    font-size:16px;
    padding-right:40px;
    padding-top: 0px;
}
#sidebar
{
    display: inline;
    margin-left: 20px;
    width: 300px;
    height:800px;
    border-bottom-color:#666;
    border:thin;
    background-color: white;
    background-repeat:repeat;
}
#content
{
    float:left;
    height: 800px;
    width: 800px;
    background-color:#FFF;
    display:inline;

}
#footer
{
    clear:both;
    height:200px;
    background-color:#333;
}
</style>

</head>

<body>
    <div id="container">
            <div id="header">
            </div>
            <div id="navigation">
                <ul>
                    <li><a href="#"><a/>Home</li>
                    <li><a href="#"><a/>Home</li>
                    <li><a href="#"><a/>Home</li>
                    <li><a href="#"><a/>Home</li>
                    <li><a href="#"><a/>Home</li>

                </ul>
            </div><!--Header Ends-->
        <div id="content">
        <p>This is the complain area. Fill complains here</p>
        </div><!--Content ENDS-->
        <div id="sidebar">
        <p>This is a website.</p>
        </div><!--SIDEBAR ENDS-->
        <div id="footer">
        </div><!--FOOTER ENDS-->
    </div><!--CONTAINER ENds-->
</body>
</html>

Upvotes: 0

Views: 240

Answers (1)

Ninja
Ninja

Reputation: 5152

1) Your html has a bug- you've given a/ instead of /a:

<li><a href="#"><a/>Home</li>

2) float to the rescue: give this property in:

<p style="float: left">This is a website.</p>

and add float: right to #sidbar

3) What is border: thin in #sidebar? Give border: 1px solid. Read this for allowed attributes and their values: http://www.w3schools.com/css/css_border.asp

UPDATE

Check here: http://jsfiddle.net/FPJTn/1/ The sidebar was breaking to the next line because of the value given for width for content. I have changed in #content css from width: 800px to width: auto.

Upvotes: 2

Related Questions