Home/ Questions/Q 8098615
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T22:07:34+00:00

Well when designing this site I thought it would be clever to lay everything

  • 0

Well when designing this site I thought it would be clever to lay everything out in either a left-side column or a right-side column. I have a transparent header on the left and another transparent bit on the right, then after that both sides have a white background. Now having spent a small while on it I no longer like the way it looks when one side finishes and the other side continues down to the bottom of the page like so:

enter image description here

In the image above i’d like the left-sides background color to continue down to the bottom, Unfortunately because of the way I’ve laid out my classes so far I can’t see anyway to “fix” this.

It’s a bit cheeky but I wondered if anyone out there with experience could see a way round this? or has any sage advice on the matter?

EDIT: Heres an alternative to walls of copy paste: http://jsfiddle.net/TZucm/
It’s a bit messy but you get the general idea, you can see in the jsfiddle that the rightside column finished long before the left. I was wondering if it was possible to get that bit to continue with the white background without completely re-writing my div structure..

My css (simplified, I edited out any further div classes you didn’t need to know about):

* {margin: 0; padding:0;}
body
{
font: normal 100% 'Poiret One', 'Trebuchet MS', sans-serif;
color: Grey;
background-image: url('Images/background_gradient.png');
background-repeat:repeat-x;
background-color: #d4ffaa;
margin: 0 auto;
height: auto;
max-width: 90%; 
}

h2
{ 
margin: 0.6em 0;
color: Grey;
border-bottom: 2px solid #d4ffaa; 
font: normal 2em 'Poiret One', 'Trebuchet MS', sans-serif;
}

#central_container
{
width: 100%;
margin: 0 auto;
height: 100%;
float: left;
}
#leftside_container
{
float: left;
width: 67.1%; 
clear: left;
}
    #header_container
    {
    width: 100%;
    max-height: 300px;
    height: 15em;
    }
        #header_title
        {
        width: 100%;
        height: 80%;
        }
            #header_title h1{ font-size: 4em; color: Ivory;}

        #navbar_container
        {
        width: 100%;
        height: 20%;
        }
            //edited

        #currentpage_container
        {
        background-color: Ivory;
        width: 100%;
        height: 20%;
        }
            #currentpage_content
            {
            font-family: 'Trebuchet Ms';
            padding: 1em 3em;
            }
            //edited


#rightside_container
{
float: right;
width: 33%;
}
    #register_container
    {
    width: 100%;
    max-height: 300px;
    height: 15em;
    }
        //edited

    #contact_container
    {
    background-color: Ivory;
    width: 100%;
    }
    #contacts_content{ padding: 1em 3em; }
        //edited

    #logos_content
    {
    padding: 0.5em 3em;
    height: 150px;
    }
        //edited

    #social_content
    {
    padding: 1em 3em;
    }

And my html in case it helps (bear in mind, not edited for relevance):

<!DOCTYPE HTML>
<html lang="en">

<head>
    <title>Verge Green IT</title>
    <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    <script type="text/javascript">stLight.options({publisher: "ur-ea3b6db-3e14-19ab-cd0a-b82a99b4706"}); </script>

    {% load static %}
    <script type="text/javascript" src="{% static "JS/CycleLogos.js" %}" defer="defer"></script>
    <link rel="stylesheet" href="{% static "CSS/base.css" %}" type="text/css" />
</head>

<body> 
<div id="central_container">

<!--Left-side Current-page Content-->
<div id="leftside_container">

    <!--Header-->
    <div id="header_container">

        <div id="header_title">
        <h1>Green IT at The Verge</h1>
        </div>

        <!--Navbar-->
        <div id="navbar_container"> 
        <div class="navbar_links">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="About">About</a></li>
            <li><a href="Speakers">Speakers</a></li>
            <li><a href="Exhibitors">Exhibitors</a></li>
            <li><a href="Agenda">Agenda</a></li>
            <li><a href="Location">Location</a></li>
        </ul>
        </div>
        </div>


    </div>
    <!--Current Page Contents-->
    <div id="currentpage_container">
        <div id="currentpage_content">
        <h2>Currentpage Content</h2>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <h2>I'm another header</h2>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididus nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p>
        "Lorem ipsum dolor sit amet, voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>

</div>

<!--Right-side Every-page Content-->
<div id="rightside_container">
    <div id="register_container">
        <div class="bubble"> <p>Register now > For free entry to the expo</p></div>
    </div>
    <div id="contact_container">
        <div id="contacts_content">
        <h2>Contact</h2>
        <p class="text">
        For more information on the event or if your interested in Speaking / Exhibiting don't hesitate to get in touch:  </p>
        <p class="contactNum"> 02082394073 </p>
        <p class="contactEmail"> info@vergegreenit.com </p>
        </div>

        <div id="logos_content">
        <h2>Associates</h2>
        <div id="img0" class="logo">
        <img src="{% static "CSS/Images/phone_icon.gif" %}"/>
        </div>
        <div id="img1" class="logo2">
        <img src="{% static "CSS/Images/email_icon.gif" %}"/>
        </div>
        <div id="img2" class="logo">
        <img src="{% static "CSS/Images/phone_icon2.gif" %}"/>
        </div>
        <div id="img3" class="logo2">
        <img src="{% static "CSS/Images/email_icon2.gif" %}"/>
        </div>
        </div>

        <div id="social_content">
        <h2>Share Event</h2>
        <span class='st_linkedin_large' displayText='LinkedIn'></span>
        <span class='st_twitter_large' displayText='Tweet'></span>
        <span class='st_facebook_large' displayText='Facebook'></span>
        </div>
    </div>
</div>


</div> 
</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could do this in the CSS by using this equal height colums

    You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.

    #container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

    If you just want something without faffing around with the CSS then you could also use jQuery:

    // JQuery function for equal height divs
function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();                                      
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}   

// Set the divs to have the height equaliser applied to them. 
equalHeight($('.equalColumns'));

    If you use the code here and add the class equalColumns to your two columns jQuery should do the rest for you.

    • 0