Best method of aligning content with sidebar

Question

al2henry 7 Newbie Poster

11 Years Ago

The site I have built features a left sidebar carrying links and announcements etc., and a main content page beside it. Sometimes the sidebar is longer than the content but more often the sidebar is much shorter. I need CSS/HTML to always ensure that the 2 page elements are the same length. Google searches have given me two "solutions" in CSS that simply make rubbish of my page. This may be due to my incorrect implementation or misunderstanding as I'm still learning stuff and am prone to error. As folks here have helped me deal with both php & dropdowm menu problems I thought that this would be the place to ask. I've found lots of references in the forum to alignment but have only found discussion of horizontal alignment within page elements.

Click Here

If anyone has a suggestion about the best method of implementing elements of the same length I would be delighted to post/send CSS & HTML code.

Thank you very much!

Alan (al2henry)

web-design

2 Contributors
15 Replies
160 Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by JorgeM

JorgeM 958 Problem Solver

11 Years Ago

I've had this situation in the past and the way that I handled it was to create a JavaScript function that executes onload. The function simply checks the height of both div elements. I checks to see which is greater so that the div element that has less of a height would be adjusted to match the div with the greater height.

Here is my sample code, adapt it to your needs...

    var main = document.getElementById('main').offsetHeight;
    var sidebar = document.getElementById('sidebar').offsetHeight;
    if(sidebar>main){
        main=sidebar;
        document.getElementById('main').style.height = document.getElementById('sidebar').style.height = main + 'px'
    } else {
        sidebar=main;
        document.getElementById('sidebar').style.height = document.getElementById('main').style.height = sidebar + 'px'
    }

JorgeM 958 Problem Solver

11 Years Ago

Unfortunately, the code clips that you provided are difficult to understand because it appears that you clipped them in between sections. For example, it is better if you provide your CSS, HTML, and JavaScript seperate. In the mean time, I have quickly put together an example that you can take a look at and hopefully this will be of use to you.

Copy and paste into a text file and save the file as "demo.html" so that you can open it with a browser.

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
#wrapper {width:500px;margin:0 auto;}
#main {width:325px;float:left;border:1px solid black;}
#sidebar {width:150px;float:right;border:1px solid black; }
#clear {clear:both;}
a {display:block;padding:5px 0px 0px 10px;}
p {padding:0px 20px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<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>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem 

sequi nesciunt.</p>
</div>
<div id="sidebar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
<a href="#">Link 7</a>
</div>
<div id="clear"></div>
</div>

<script>
var main = document.getElementById('main').offsetHeight;
    var sidebar = document.getElementById('sidebar').offsetHeight;
    if(sidebar>main){
        main=sidebar;
        document.getElementById('main').style.height = document.getElementById('sidebar').style.height = main + 'px'
    } else {
        sidebar=main;
        document.getElementById('sidebar').style.height = document.getElementById('main').style.height = sidebar + 'px'
    }
</script>
</body>
</html>

The results of this code is as follows...

demo

JorgeM 958 Problem Solver

11 Years Ago

It has something to do with your script in the head section. As soon as I remove it from the head, the 2 divs render OK.

JorgeM 958 Problem Solver

11 Years Ago

I think this can be resolved. Just for me, I would have to sit and debug your code. That's not as easy for the person that didnt code the page. I'll try to give you a hand with that.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

al2henry 7 Newbie Poster · Answer 1 · 2013-01-23T22:49:18+00:00

Dear JorgeM

Many thanks for your help. I have adapted the script to my local circumstances - assuming that ElementById does refer to the Div's I have used in the page, namely "content" & "navBar." I have copied the code into the <head> section, just above the script that runs the dropdown menus. So far I have not managed to make it work for me - the Komodo Editor I use does display the dropdowns when I click "view in browser" so I assume that the "equal lengthing" would too.

I'm probably messing up the "adapt" bit - can you advise further - I will provide a code excerpt

`<title>Mayne Island Conservancy</title>

<link href="2col_leftNav2ctr.css" rel="stylesheet" type="text/css" />
<link rel="SHORTCUT ICON"  href="./mics.ico" />


<script type="text/javascript">
    var content = document.getElementById('content').offsetHeight;
    var navbar = document.getElementById('navBar').offsetHeight;
    if(navbar>content){
    content=navbar;
    document.getElementById('content').style.height = document.getElementById('navbar').style.height = content + 'px'
    } else {
    navbar=content;
    document.getElementById('navbar').style.height = document.getElementById('content').style.height = navBar + 'px'
    }   
</script>

<script type="text/javascript">
    // Copyright 2006-2007 javascript-array.com    
var timeout = 500;
var closetimer  = 0;
var ddmenuitem  = 0;

// open hidden layer
function mopen(id)
{   
    // cancel close timer
    mcancelclosetime();
and here is the start of the html for main
`</ul>
<div style="clear:both"></div>
    </div>

And here is the beginning of the code for main

</div>
<!-- end masthead -->
<div id="content">
    <div id="breadCrumb">


</div>

<h2 id="pageName">Home</h2>

<div class="feature">
    <img alt="Looking towards Georgeson Island, Edith Point" title="Looking towards Georgeson Island, Edith Point"  src="./edith_pt-450px.jpg" width="470"> <font face ="arial" size = "1"><b>Looking towards Georgeson Island from Edith Point<br><i>Photo credit:</i> Toby Snelgrove</b><br>

    Click <a href="./edith_pt-50.jpg">here</a> to view this image full-screen</font><br><br>
    <!-- <h3><a name="welcome">Welcome to 2012</a></h3> -->
    <p>

And here is where I start the sidebar

`   </p>
    </div>
</div>

<!--end content -->

<div id="navBar">
    <div id="search">

    <iframe style="width:200px; height:35px; margin:0px;" frameborder=0 allowtransparency=yes scrolling=no src="http://search.digitalpoint.com/iframe.php?   site=www.conservancyonmayne.com&s=120&b=1&y=1"></iframe>

    </div>

    <div id="sectionLinks">
        <h3>Quick Links</h3>
        <ul>
            <li><a href="./whatdo.php">What We Do</a></li>

Hope you can have the patience to guide me a little further!

Thank you

Alan

al2henry 7 Newbie Poster · Answer 2 · 2013-01-24T07:28:12+00:00

JorgeM - Many, many thanks. My error was not putting the script at the end of the code, right before </body> as your example demonstrated. I should have realized that's the only place where the required px's could be calculated.

I will be adding the script to all the pages where the "unbalaced" sidebar & main presents a problem.

Once again I really appreciate your help & patience!

Marking it Solved

Alan

al2henry 7 Newbie Poster · Answer 3 · 2013-01-24T16:51:10+00:00

Now I'm having an issue with browser compatibility! The solution provided very kindly by JorgeM works beautifully in Firefox and (surprise!) IE9 but does not work in Chrome. Undoubtedly there is some flaw in my html or css that trips up Chrome but which is ignored by other browsers.

If someone has time to respond to quirky things like this I will post both here and hope to learn something thereby!

Click Here

Thank you in advance for taking a look!

Alan

al2henry 7 Newbie Poster · Answer 4 · 2013-01-24T21:45:52+00:00

Now I'm having an issue with browser compatibility! The solution provided very kindly by JorgeM works beautifully in Firefox and (surprise!) IE9 but does not work in Chrome. Undoubtedly there is some flaw in my html or css that trips up Chrome but which is ignored by other browsers.

If someone has time to respond to quirky things like this I will post both here and hope to learn something thereby!

Click Here

Thank you in advance for taking a look!

Alan

al2henry 7 Newbie Poster · Answer 5 · 2013-01-24T21:47:11+00:00

Thanks for the thought - can't do without drop down menus in Chrome however. I best poke around a bit.

A

al2henry 7 Newbie Poster · Answer 6 · 2013-01-25T01:37:52+00:00

Thank you for the offer JorgeM - I am attaching index.html and will paste in the whole .css (the upload says its not an allowed file type -which seems rather strange.) Just an aside, all the other pages get their dropdowns via a php include statement, but what is inserted is identical to that which appears in "index." The page footer and the sidebar menu and event announcements are treated in the same way.

Here is the .css

`/***********************************************/
/* 2col_leftNav2.css - Mayne Island Conservancy  */
/* Use with template 2col_leftNav2.html          */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

#wrapper {
/*we need to tell the browser the size of the wrapper div*/
width:1012px;

/*align the top left corner of the page to the center
of the browser*/
position: absolute;
left: 50%;
/*offset the page by half the width and height*/

margin-left:-506px;
/*allow us to see wrapper*/
background-color:white;
}



body{
    font-family: Arial,sans-serif;
    color: #000000;
    line-height: 1.166; 

    margin: 0px;
    padding: 0px;
    width: 1024px;
    background: #FFFFFF
}

a:link, a:visited, a:hover {
    color: #006699;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}
/* overrides decoration from previous rule for hovered links */

h1, h2, h3, h4, h5, h6 {
    font-family: Arial,sans-serif;
    margin: 0px;
    padding: 0px;
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 260%;
 color: #265420;
}

h2{
 font-size: 125%;
 color: #006699;
}

h3{
 font-size: 110%;
 color: #0000f8;
 line-height: 1.5;
}

h4{
 font-size: 90%;
 font-weight: bold;
 color: #006699;
}

h5{
 font-size: 100%;
 color: #334d55;
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: circle;
}

ul ul ul ul{
 list-style-type: square;
}

label{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
}


/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#masthead{
    margin: 0;
    padding: 10px 0px;
    border-bottom: 1px solid #265420;
    width: 100%;
}

#masthead img{
    float: left;
    padding: 0px 10px 0px 10px;
    margin: 0 5px 0px 10px;
}

#navBar{

    margin: 0 79% 0 0;
    padding: 0px;
    background-color: #eeeeee;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

}

#content{
    float: right;
    width: 75%;
    margin: 0;
    padding: 0 4% 0 0;
    text-align: justify; text-justify: newspaper;
    background-color: #e7fee6;

}


/***********************************************/
/*Component Divs                               */
/***********************************************/

#siteName{
    margin: 0px;
    padding: 0px 0px 10px 10px;
}


/*************** #pageName styles **************/

#pageName{
    padding: 0px 0px 10px 10px;
}


/************* #globalNav styles **************/

#globalNav{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
   this will force a horizontal scrollbar if there isn't enough room for all links
   remove rule or change value to 'normal' if you want the links to line-wrap */

#globalNav img{
 display: block;
}

#globalNav a {
    font-size: 90%;
    padding: 0px 4px 0px 0px; 
}

/************* #Dropdown styles **************/
#sddm
{   margin: 0;
    padding: 0;
    z-index: 30}

#sddm li
{   margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 14px arial
}

#sddm li a
{   display: block;
    margin: 0 1px 0 0;
    padding: 2px 2px;
    width: 158px;
    background: #265420;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    border: 1px solid #ffffff}

#sddm li a:hover
{   background: #49A3FF}

#sddm div
{   position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border: 1px solid #265420}

    #sddm div a
    {   position: relative;
        display: block;
        margin: 0;
        padding: 5px 10px;
        width: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background: #eeeeee;
        color: #265420;
        font: 14px arial}

    #sddm div a:hover
    {   background: #49A3FF;
        color: #FFF}

#sddm-incl
{   margin: 0;
    padding: 0;
    z-index: 30}

#sddm-incl li
{   margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 13px arial
}

#sddm-incl li a
{   display: block;
    margin: 0 1px 0 0;
    padding: 2px 2px;
    width: 157px;
    background: #265420;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    border: 1px solid #ffffff}

#sddm-incl li a:hover
{   background: #49A3FF}

#sddm-incl div
{   position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border: 1px solid #265420}

    #sddm-incl div a
    {   position: relative;
        display: block;
        margin: 0;
        padding: 5px 10px;
        width: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background: #eeeeee;
        color: #265420;
        font: 13px arial}

    #sddm-incl div a:hover
    {   background: #49A3FF;
        color: #FFF}

/************* #breadCrumb styles *************/

#breadCrumb{
    font-size: 80%;
    padding: 5px 0px 5px 10px;}


/************** .feature styles ***************/

.feature{
    padding: 0px 0px 10px 10px;
    font-size: 90%;
    text-align: justify; text-justify: newspaper;
}

.feature h3{
    padding: 30px 10px 5px 0px;
    text-align: center;
}

.feature img{
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0 5px 5px 0;
}

.feature iframe{
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0 5px 5px 0;
}/*

.feature p{
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0 5px 5px 0;
    font-size: 70%
    text-align: justify; text-justify: newspaper;
}



/************** #thumbnail styles **************/

.thumb {
margin: 3px;
border: 2px solid #A0ACC0;
height: auto;
float: right;
text-align: center;
}
.thumb img {
display: inline;
float: right;
margin: 5px;
border: 1px solid #A0ACC0;
}
.thumb a:hover img {
border: 1px solid black;
}
.thumb p {
text-align: center;
margin: 5px
}
.photocattitle {
text-align: center;
font-weight: normal;
}
.phototitle {
text-align: center;
font-weight: normal;
font-size: 90%;
width: 120px;
margin: 0 3px 3px 3px;
}
.photocredit {
text-align: right;
font-weight: light;
font-size: 60%;
font-style: italic;
width: 120px;
margin: 0 3px 3px 3px;
}
.phototitle_portrait {
text-align: center;
font-weight: normal;
font-size: 90%;
width: 90px;
margin: 0 3px 3px 3px;
}
.photocredit_portrait {
text-align: right;
font-weight: light;
font-size: 60%;
font-style: italic;
width: 90px;
margin: 0 3px 3px 3px;
}


/************** .story styles *****************/

.story{
    clear: both;
    padding: 10px 0px 0px 10px;
    font-size: 80%;
    text-align: justify; text-justify: newspaper;
}

.story p{
    padding: 0px 0px 10px 0px;
    text-align: justify; text-justify: newspaper;
}


/************* #siteInfo styles ***************/

#siteInfo{
    clear: both;
    border: 1px solid #cccccc;
    font-size: 125%;
    color: #cccccc;

    margin-top: 0px;

}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
    the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
    padding: 4px 4px 4px 4px;
    vertical-align: middle;
}

#siteinfo a:link {
    color : #00a ;
    background-color : white ;
}
#siteinfo a:visited {
    color : #009 ;
    background-color : white ;
}
#siteinfo a:hover {
    color : #000 ;
    background-color : #9cf ;
}

/************* #search styles ***************/

#search{
    padding: 5px 0px 5px 10px;
    border-bottom: 1px solid #cccccc;
    font-size: 90%;
}

#search form{
    margin: 0px;
    padding: 0px;
}

#search label{
    display: block;
    margin: 0px;
    padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
    position: relative;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid #cccccc;
    font-size: 90%;
}

#sectionLinks h3{
    padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
    padding: 2px 0px 2px 10px;
    border-top: 1px solid #cccccc;
    width: 100%;
  voice-family: "\"}\""; 
  voice-family:inherit;
    width: auto;
}

#sectionLinks a:visited{
    border-top: 1px solid #cccccc;
    padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
    border-top: 1px solid #cccccc;
    background-color: #dddddd;
    padding: 2px 0px 2px 10px;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
    margin: 0px;
    padding: 0px 0px 10px 10px;
    font-size: 90%;
}

.relatedLinks h3{
    padding: 10px 0px 2px 0px;
}


/************** #advert styles **************/

#advert{
    padding: 10px 0px 0px 10px;
    font-size: 80%;
    border-top: 1px solid #cccccc;
}

#advert img{
    display: block;
}


/************** #headlines styles **************/

#headlines{
    margin: 0px;
    padding: 10px 20px 20px 10px;
    font-size: 100%;
    color: #009900
}

#headlines p{
    padding: 5px 20px 5px 0px;
}

#detail{
    margin: 0px;
    padding: 10px 20px 20px 10px;
    font-size: 80%;
    color: #009900
}   


#detail_next_event{
    margin: 0px;
    padding: 10px 20px 20px 10px;
    font-size: 80%;
    color: #009900

}`

As you might tell this is an old DreamWeaver template with added bits I've found that achieve the end result I need. Apologies for the unschooled (& probably not "well formed") stuff - I'm a volunteer & learning as I go.

Do tell me if I need to send you anything else! Your efforts are already hugely appreciated by me & the community here on Mayne Island!

Alan

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 7 · 2013-01-25T02:14:48+00:00

So, I had a few minutes to take a look at your site (copying your code is not needed since all of the html, css, and javascript can be accessed directly from the online version).

I am having a difficult time following the code. It is most likely because I am not a veteran web developer. There were a few things that I am not familiar with. for instance, your doctype reference and the span element right after?? What is the purpose of the <span> element? the DTD you are referrencing doesnt seem to be valid. xphp1? --> I am not familiar with this xphp1 reference.

<!DOCTYPE html PUBLIC "-//W3C//DTD Xphp 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xphp1-transitional.dtd">

<span xmlns="http://www.w3.org/1999/xphp">

What I did was move the script that you have located in the head section of your page down to the bottom where your other scripts are located. That seemed to resolve the problem, at least on my local copy. However, I am not 100% sure because another thing that I noticed is that when I copy your source code, there are some extra characters that are appended after your closing </html> tag.

When I make these changes, save it in a text file with an .html extension, the height of the divs match. (dont worry about the broken links for the images, my local copy doesnt have the full reference).

capture1

al2henry 7 Newbie Poster · Answer 8 · 2013-01-25T16:02:48+00:00

Yes there are some things inherited from various templates created by the 3 different editors I have used that need cleaning up. I only have a general sense of what the lines before <head> actually signify & I don't think the <span> tag (similar genesis) needs to be there at all! One of those "roundtoit" things!

Meantime Chrome's behaviour is very weird - it seems that whether the dropdown script is in <head> or right before </body> the background colours don't fill the full area but stop an inch or so before the bottom. However on moving off the page via the dropdown navigation and then returning, everything renders properly. Simply reloading the page doesn't do it. As noted Firefox & IE9 don't display this behaviour - guess I should get someone to check Safari & Opera!

So what we have is an annoyance & not something that breaks the page. So I will begin adding your pixel counting script to the end of the code on all the pages and live with the problem for a while.

Once again many thanks for the time you put into this and thank you for the masterful little script - clever stuff!

Alan

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 9 · 2013-01-25T16:12:13+00:00

Ok, so today is your lucky day. I dont know why but i was inspired to figure out what the problem was. I started with a blank, new page and added your components one at a time. I had to change some of your CSS and fixed quite a bit of missing tags, syntax, etc... in your HTML file. The sytnax errors caused different issues depending on what portion of the html was taken out for testing, or what browser was being used.

However, it looks like all of the bugs are fixed. The page renders fine in all browers that I tested.

capture3

The page is still not fully clean. There are references to a few elements such as <font> that are deprecated. The use of html tables in the way they are included is not really the best approach. I had to look up the height and width for your images. It is highly recommended that you include those attributes for all of your image elements. there were a few more things, but I cant remember at the moment, and I really didnt document all of the small changes I made. You will need to compare the files to see the differences.

I'm attaching the new HTML and CSS file for you to use.

al2henry 7 Newbie Poster · Answer 10 · 2013-01-25T17:05:56+00:00

I certainly will do a side by side comparison and will obviously learn lots of stuff - which is the ideal outcome from posting a question. And thanks for pointing out the deprecated font usage; I will work on that. As for the tables - knowing what I want to see will help. I'm afraid that my method of code-look-tweak-look again works better with formatting on the page but I do understand that I shouldn't do this & this discussion will help to correct bad habits!

Thank you for the amazing amount of effort you have put in to understanding my problem - this is brilliant!

A

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 11 · 2013-01-25T21:15:27+00:00

I hope that you'll be able to use the example I provided for you and incorporate it into your site. I'll be more than happy to provide additional help if you have any other questions. Feel free to open a new thread for your different questions/issues.

I also published a working demo online that you (or anyone else that comes accross this thread) can refer to if you need to see a working model. Its a simple demonstration but lays out the structure. source code is available as well.

Dynamically Resize Height of Div Elements