Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Extend length of Background on Template

Gazza58

Coder
Hello

I'm hoping someone can help me where I'm going wrong.

I'm updating my website as the code is old and uses table rather than css. I have created a Template but the problem I'm having is the Background colours on the containers either side of the Main Content does not extend the full length; it only extends as far as the Text within the container. How can I correct this so the background on these sidebars extends the full length as the Main Content container will vary in length. The code is as follows

HTML

HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSS Portal - Layout</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
    <div id="wrapper">
        <div id="topmenu">
            <p>This is the Header</p>
        </div>


        <div id="teambar">
           <p>This is the Team Bar</p>
        </div>

        <div id="logo">
           <p>Left Logo</p>
        </div>

        <div id="title">
           <p>Website Title bar</p>
       </div>

        <div id="logo">
           <p>Right Logo</p>
        </div>

        <div id="leftmenu">
            <p>Left Hand Menu</p>
        </div>
        <div id="content">
           <p>Main Content of Text</p><p>This is the area where I will display the main content of the website. </p><p>Results, Tables, Cup News, Individual Competition details will appear here. </p><p>The colour of the two sidebars need to extend so that all three are full length colour. </p>
       </div>
        <div id="rightfixtures">
            <p>This is where Todays Fixtures will be displayed.</p>
        </div>


        <div id="leftfooter">
            <p>Left Hand Footer</p>
        </div>
        <div id="centerfooter">
           <p>Centre Footer</p>
       </div>
        <div id="rightfooter">
            <p>Right Hand Footer</p>
        </div>

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

CSS

CSS:
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333;
    }

p {
    padding: 10px;
}

#wrapper {
    margin: 0 auto;
    width: 1179px;
}

#topmenu {

    height: 30px;
    width: 1179px;
    background: #5678BB;
    float: left;
    border-radius: 10px 10px 0px 0px;
    text-align: center;
}


#title {
    background: #33CCFF;
    width: 799px;
    height: 70px;
    float: left;
    text-align: center;
}

#teambar {
    background: #33CCFF;
    width: 200px;
    height: 70px;
    float: left;
    text-align: center;
}

#logo {
    background: #CC33FF;
    width: 90px;
    height: 70px;
    float: left;
    text-align: center;
}


#content {
    background: #D7DBE3;
    width: 700px;
    float: left;
    line-height: 1.15;
}

#leftmenu {
    background-color: #5678BB;
    width: 200px;
    float: left;
    text-align: center;
}

#rightfixtures {
    background-color: #FFFFC0;
    width: 279px;
    float: left;
    text-align: center;
}


#leftfooter {
    background: #CC33FF;
    width: 393px;
    height: 40px;
    float: left;
    text-align: center;
    border-radius: 0px 0px 0px 10px;
}

#centerfooter {
    background: #33CCFF;
    width: 393px;
    height: 40px;
    float: left;
    text-align: center;
}

#rightfooter {
    background: #CC33FF;
    width: 393px;
    height: 40px;
    float: left;
    text-align: center;
    border-radius: 0px 0px 10px 0px;
}
 
Last edited by a moderator:
Hi @Gazza58, try this:

Put all 3 elements (leftmenu, content, rightfixtures) in a <div> element like this:
HTML:
<div id="leftContentRight"> <!--I give it an id: leftContentRight.-->
    <div id="leftmenu">
        <p>Left Hand Menu</p>
    </div>
    <div id="content">
        <p>Main Content of Text</p><p>This is the area where I will display the main content of the website. </p><p>Results, Tables, Cup News, Individual Competition details will appear here. </p><p>The colour of the two sidebars need to extend so that all three are full length colour. </p>
    </div>
    <div id="rightfixtures">
        <p>This is where Todays Fixtures will be displayed.</p>
    </div>
</div>

And then give the <div> element this style:
CSS:
#leftContentRight {
    display: grid;
    grid-auto-flow: column;
    float: left;
}
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom