Div Not Positioning Right

HTML & CSS
41

Thanks I came up with a way to make it work on the homepage and seems to work nicely, now the last thing I need help with is the sidebar…

Take this page for example…

http://scholarscanada.com/wordpress/education/?page_id=50

How can I make the sidebar border go right down to the footer so its the same size as the main content div, whats the best way to do this without modifying everything too much and every inside page is different length and will also adding and taking away info from it.

Thanks man!

42

Hi,
The easiest way would be with Faux Columns using a repeating image that includes the border. Then just repeat that image down the right side of your main wrapping div.

Another way is to set a border on your content and sidebar then overlap them with relative positioning.
Example Here with relevant code below.

#sidebar {
    float:left;
    margin-left:-181px;
    width: 180px;
    [COLOR=Blue]left: 1px; /* important for 1px border alignment*/[/COLOR]
   [COLOR=Blue] border-right: 1px solid black;[/COLOR]
    background:    #ADD8E6; /* #9DF */
    position:relative;
    padding-bottom: 10px;
}
#content {
    background: #DDEEFF;
    text-align:justify;
    min-height:300px;
    [COLOR=Blue]border-left: 1px solid black;[/COLOR]
    padding-bottom: 10px;
}
43

Thanks, not really sure how I would implement that within my CSS I’m sure it would be simple to do even though my sidebar is a right probably just flip the info, I tried to do it an easier way with the border on the content and it worked perfectly but then remembered the pages with hardly any content the border will only go down part of the sidebar like this one for example…

http://scholarscanada.com/wordpress/education/?page_id=14

So guess I’ll need to attempt rearranging the code you provided with my CSS…

then my last problem would be lining the text up in the footer, its all weird in IE7 like centered it looks like and too much of an indent on the left, Firefox it looks perfect.

44

The easiest way would to make an image the exact size of the container with the blue strip on it, and repeat-y it on the container :slight_smile:

Just fake equal height :slight_smile:

Edit:

Ignore this post I didn’t refresh this old tab

45

I’m sure it would be simple to do even though my sidebar is a right probably just flip the info,

So guess I’ll need to attempt rearranging the code you provided with my CSS…

Yes, it would be just the opposite of the example I gave. It is the concept that is important here, not whether it is a left or right sidebar.

I don’t think the Faux Column will work for you since you already have your shadow image repeating on the main wrapper. Plus all your pages are not the same, it looks like the homepage is not a 2-column set up.

Let me take a look at your code and see if we can make the RP overlap work.

46

Hey Ryan, what exactly do you mean? Sorry don’t really understand what you mean.

Thanks

47

Thanks Rayzur for taking the time to look at the code for me hopefully you can spot a way to do this. What I have now will most likely work once I populate my pages.

48

Try this


[B]div#contentInside[/B]{
[COLOR=Blue]width:705px; [/COLOR]
[COLOR=Blue]border-right:2px solid #094585;[/COLOR]
padding-top:15px;
padding-bottom:50px;
[COLOR=Red]background:lime;[/COLOR]/*just for testing new width*/
}
[B]div#sidebar[/B]{
width:315px;
background-color:#CBEAFF; 
[COLOR=Blue]border-left:2px solid #094585;
position:relative;
right:2px;[/COLOR]
}
49

hmmm… is it possibly for my sidebar to have a color all the way down instead of it just being blank and the 2px on the right of my sidebar kind of looks weird there as the images don’t go right to the edge as they did before and now the sidebar goes overtop of the spacer image. But where getting there, if its not possible to do this just let me know and I can try to gather content for the sections which will need more and maybe just put a gradient image as the sidebar background fading into a white or something. I appreciate all the help :slight_smile:

50

Read this :slight_smile:
More specifically the last one

51

The best thing for you to do would be to incorporate the right column BG color and border into your existing repeating image.

Then on pages that do not have 2-columns you would need to use that existing BG image.
You would have to start setting up some Page Specific CSS

EDIT:
Or you could do the AP Faux Columns that Ryan was referring to in the link he posted.

52

I don’t think your going to get out of this without altering your html. Each method is going require some sort of change.

  1. Faux Column with repeating image as I mentioned would require page specific css to target the 2-column pages with a new BG image that incorporates the border in it. That will require a class or ID on the body element to target the pages that need it.

  2. AP Faux Columns will require an inner wrapping div with overflow:hidden; set on it since the AP faux columns must be height:999em; for IE6. That is why you have to hide the overflow.

If you go back to the RP overlap method you could have positioned your right column with a negative right margin and lined everything back up with the RP.

EDIT:
This should keep you from having to alter the html.

The gap is actually only 1px on the right side of the sidebar when using the RP method. Just add 1px to the width and give it a 1px negative right margin. It worked fine on a live edit. :wink:


[B]div#contentInside[/B]{
[COLOR=Blue]width:705px; 
border-right:2px solid #094585;[/COLOR]
padding-top:15px;
padding-bottom:50px;
background:lime;/*just for testing new width*/
}
[B]div#sidebar[/B]{
[COLOR=Blue][B]width:316px;[/B][/COLOR]
background-color:#CBEAFF; 
[COLOR=Blue]border-left:2px solid #094585;
position:relative;
right:2px;
[B]margin-right:-1px;[/B][/COLOR]
}
53

Thanks for the help guys, I went and did the gradient thing and modified the boxes on the front page so everything looks good now and works.

Only issue I’m having is in IE with the footer text now, if you take a look at it in Firefox thats the way it should look but looks centered and indented wrong in IE7, any sugesstions for this?

54

Hi, just set the text-align for the <p> :slight_smile:

#bottomline p{text-align:left;}