CODEWITHSUNDEEP
htmlcssbackground-color
ARGO
ARGO

Reputation: 5291

Can't get the background color for fill in the proper section in my page (HTML/ CSS)

Hi im having a problem with my html and css code. Im trying to put all the contents center aligned in the browser whenever, it is resized, but keep the background color to flow continuously horizontally. I have the following codes but seems that the background color is overlapping some sections in my page. What did I missed or incorrectly done? Thanks so much

<!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>Untitled Document</title>
</head>

<style>
body {
    width:auto;
    font-family:Century Gothic, Arial, Verdana;
}

.wrapper {
    width:850px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
}

h4 {
    color: #db870a;
    font-size:16px;
}

.threeCol {
    display:block;
    float:left;
    width:30.50%;
    padding:30px 0px;
    text-align:justify;
}

/*Alterations*/
.noSpaces {
    margin:0px;
    padding:0px;
}

.float {
    float:left;
}

.alignR {
    text-align:right;
}

.paddingR {
    padding:10px 30px 10px 0px;
}

.paddingL {
    padding:10px 0px 10px 30px;
}

.noPadding {
    padding: 10px 0px 10px 0px;
}


/*footer*/

#footer {
    display:block;
    background-color:#F60;

}


/*Other Articles*/

#otherArticles {
    font-size:12px;
}

</style>



<body>

<section id="otherArticles">
    <div class="wrapper">
    <article class="threeCol paddingR">
      <header><h4 class="noSpaces">Lorem ipsum dolor sit amet</h4></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>

      <article class="threeCol paddingR">
      <header><h4 class="noSpaces">Lorem ipsum dolor sit amet</h4></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna1leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article> 

        <article class="threeCol noPadding">
      <header><h4 class="noSpaces">Lorem ipsum dolor sit amet</h4></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>
    </div
></section>

<br />

<footer id="footer">
<div class="wrapper">
    Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscin</div>
</footer>

</body>
</html>

Upvotes: 0

Views: 426

Answers (4)

Aram Mkrtchyan
Aram Mkrtchyan

Reputation: 2700

example

http://jsfiddle.net/amkrtchyan/DtgQR/

and when you write a html5 actualy a html5 doctype <!DOCTYPE html>

Upvotes: 2

Bernat
Bernat

Reputation: 1556

More correct code... you should use an external CSS.

Untitled Document 

<style>
body {
    width:auto;
    font-family:Century Gothic, Arial, Verdana;
}

section {
    width:850px;
    margin:0 auto;
    overflow:auto;
}

h4 {
    color: #db870a;
    font-size:16px;
}

article {
    display:block;
    float:left;
    padding:30px 0px;
    text-align:justify;
    width:30%;
    margin-right:3%;
}

article.last{margin-right:0;}


/*footer*/

footer {
    display:block;
    background-color:#F60;
}


</style>



<body>

<section>
    <article >
      <h4>Lorem ipsum dolor sit amet</h4>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>

      <article>
      <h4>Lorem ipsum dolor sit amet</h4>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna1leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article> 

        <article class="last">
      <h4>Lorem ipsum dolor sit amet</h4>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>
</section>

<footer>
    Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscin
</footer>

</body>
</html>

Upvotes: 0

Jagdev Singh
Jagdev Singh

Reputation: 895


The problem with yours code is you are only setting color for footer.
Start your footer tag right after the body tag. Only need to change starting of footer tag.

Upvotes: 0

Bernat
Bernat

Reputation: 1556

try changing

.wrapper {
    width:850px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
}

to

#otherArticles{
width:850px;
margin:0 auto;
}

Upvotes: 0

Related Questions