3

I'm having padding problems. My sidebar is 318px wide, my content is 642px wide, and my footer is 642px wide and lines up with my content. My sidebar and content both have a padding of 20px all around, but my sidebar is supposed to go full height to the bottom of the page and extend whenever there is more content which also pushes down the footer. I'm sorry if this is too much information but I'm trying to give as much detail as possible.

Here is a link to what I have so far You can also view source if needed for the complete HTML. I only figured the elements I'm talking about are needed but that's for just in case there's more to it.

HTML: 

<!-- SIDEBAR -->
<div id="sidebar">
 <h1>Caul / Cbua</h1>


<div class="sidetext">
Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim,     at auctor mi tristique.
</div>

<h1>Commit</h1>
<div class="sidelink">
<ul>
  <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
</ul>
</div>

</div>

<!-- CONTENT -->
<div id="content">
<h1>News</h1>

<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />

<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>

<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>

<!-- FOOTER -->
<div id="footer">
&copy; Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

CSS:

    /* Sidebar */
#sidebar {
background-color: #e7d9c9;
    background-image: url('/imgs/map.png');
    background-repeat: no-repeat;
/* height 100? */
width: 318px;
float: left;
padding-bottom: 20px;
}

.sidetext {
    padding: 5px 20px;
    font-size: 18px;
    font-family: Helvetica Neue;
    padding-bottom: 20px;
}

.sidelink {
    padding-bottom: 20px;
    margin: 0;
    padding: 0; 
    width:300px;
}

.sidelink ul {
    margin: 0; 
    padding: 0;
    margin-left: 20px;
}

.sidelink li {
    display: block;
    list-style: none;
}

.sidelink li a {
    display:block;
    font-family: Helvetica Neue;
    font-size:16px;
    color:#FFF;
    text-decoration:none;
    background-color:#1e416f;
    padding:5px;
    border-left:10px solid #FFF;
    padding-bottom: 20px;
}

.sidelink li a:hover {
    border-left:14px solid #1e416f;
    background-color:#e7d9c9;
    color: #1e416f;
}

h5 {
    font-family: Helvetica Neue: Light;
    font-size: 24px;
    color: #517f9c;
}

/* Content */
#content {
width: 642px;
float: right;
}

.article {
    padding: 5px 20px;
}

.articleimg {
    float: left;
    padding-right: 25px;
}


/* Footer */
#footer {
 font-family: Helvetica Neue: Regular;
 font-size: 12px;
 color: #94b9c4; 
 clear: both;
 width: 100%;
}
4

1 回答 1

0

HTML

<!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>CAUL / CBUA</title>
    <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<!-- HEADER -->
<div id="header">
    <div id="caul-logo">

        <h4>Nova Scotia Community College</h4>

    </div>
</div>

<div id="container">

    <!-- NAVIGATION -->
    <div id="navi">
        <a href="#">Directories</a>
        <a href="#">Committees</a>
        <a href="#">Resources</a>
        <a href="#">About</a>
    </div>

    <!-- CONTENT -->
    <div id="content">
        <h1>News</h1>

        <div class="article">
            <img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />

            <h2>Lorem Ipsum</h2>
            <h3>Friday, August 16th</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                    Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                    Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                        Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                        Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                            Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                            Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                                Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                                Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                                    Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                                    Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                                </div>

                            </div>

                            <!-- SIDEBAR -->
                            <div id="sidebar">
                                <h1>Caul / Cbua</h1>

                                <div class="sidetext">
                                    Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim, at auctor mi tristique.
                                </div>

                                <h1>Commit</h1>
                                <div class="sidelink">
                                    <ul>
                                        <li><a href="#">Lorem Ipsum</a></li>
                                        <li><a href="#">Lorem Ipsum</a></li>
                                        <li><a href="#">Lorem Ipsum</a></li>
                                        <li><a href="#">Lorem Ipsum</a></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- FOOTER -->
                            <div id="footer">
                                <p>&copy; Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </div>
                        </div>
                    </body>
                    </html>

CSS

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

/* Main content styles */

html, body {
position: relative;
height: 100%;
font-family: Helvetica Neue: Regular;
}

h1 {
font-family: Helvetica Neue: Condensed Bold;
font-size: 24px;
color: #1d406f;
text-transform: uppercase;
margin-left: 20px;
}

h2 {
font-size: 18px;
color: #0f2233; 
}

h3, p {
font-size: 16px;
color: #0f2233;
}

a:link { color: #517f9c; }
a:highlight { color: #478ecc; text-decoration: underline; }

img {
display: block;
}

hr {
width: 90%;
margin: 0 auto;
margin-bottom: 20px;
}

/* Container */
#container {
position: relative;
margin: 0 auto;
width: 960px;
height:100%;
}

/* Header */
#header {
width: 960px;
height: 282px;
margin: 0 auto;
margin-top: 0;
background-image: url('http://redsky.incredifull.com/imgs/header.jpg');
}

#caul-logo {
top: 35px;
left: 20px;
width: 298px;
height: 91px;
position: relative;
background-image: url('/imgs/caul-header-logo.png');
}

h4 {
font-family: Helvetica Neue: Condensed;
text-decoration: bold;
font-size: 14px;
color: white;
text-transform: uppercase;
position: relative;
top: 215px;
left: 675px;
}

/* Navigation bar */
#navi {
font-family: Helvetica Neue: Condensed Bold;
font-size: 14px;
color: white;
text-transform: uppercase;
background-color: #1e416f;
height: 45px;   
margin-bottom: 20px;
padding-top: 20px;
}

#navi a {
color: white;
margin-left: 20px;
}

#navi a:hover {
background: white;
color: #1e416f;
}

.login {
color: #517f9c;
}

/* Sidebar */
#sidebar {
background-color: #e7d9c9;
background-image: url('/imgs/map.png');
background-repeat: no-repeat;
width: 33.33333333333333%;
float: left;
padding-bottom: 20px;
position: absolute;
height: 100%;

}

#sidebar.h1 {
border-bottom: thick;
border-bottom-width: 75%;
}

.sidetext {
padding: 5px 20px;
font-size: 18px;
font-family: Helvetica Neue;
padding-bottom: 20px;
}

.sidelink {
padding-bottom: 20px;
margin: 0;
padding: 0; 
width:300px;
}

.sidelink ul {
margin: 0; 
padding: 0;
margin-left: 20px;
}

.sidelink li {
display: block;
list-style: none;
}

.sidelink li a {
display:block;
font-family: Helvetica Neue;
font-size:16px;
color:#FFF;
text-decoration:none;
background-color:#1e416f;
padding:5px;
border-left:10px solid #FFF;
padding-bottom: 20px;
}

.sidelink li a:hover {
border-left:14px solid #1e416f;
background-color:#e7d9c9;
color: #1e416f;
}

h5 {
font-family: Helvetica Neue: Light;
font-size: 24px;
color: #517f9c;
}

/* Content */
#content {
width: 66.66666666666666%;
height: auto;
float: right;
padding-bottom: 20px;
position: relative;
height:100%;
}

.article {
width: 99%;
padding: 5px 20px;
}

.articleimg {
float: left;
padding-right: 25px;
}


/* Footer */
#footer {
text-align: left;
bottom: 0;
font-family: Helvetica Neue: Regular;
font-size: 12px;
width: 66.666666666%;
float: right;
clear: both;
margin-top: -50px;
}

#footer p {
text-indent: 20px;
color: #94b9c4; 
}
于 2013-08-23T01:18:21.767 回答