Jump to content
Stef's Coding Community
Sign in to follow this  
papa5murf

Alignment issue

Recommended Posts

This is probably a very simple fix, but I just can't seem to figure it out.

 

Basically, I can't get the side bar to line up properly. It's fine in Explorer but for some odd reason it goes under the banner in Firefox.

 

If you click the link below, I'm talking about the white box on the left.

http://www.dylanpearson.com/websites/ciodash/index.html

 

http://www.dylanpearson.com/websites/ciodash/style.css

 

This side bar will have additional links in it (which shouldn't be a problem once I get the alignment of the box itself sorted). I will be adding another box on the right and a footer at a later time.

 

Thanks in advance for any help.

Share this post


Link to post
Share on other sites

In Firefox, Opera and Safari it shows up under the banner. Add 20px to the top margin in the sidebar div to move it down the page.

Edited by virtual

Share this post


Link to post
Share on other sites

I am not sure why you need all those position: relative but you should establish your bannercontainer to have a fixed height that will fit all those other child divs. This will then clear the bodycontainer thus pushing the sidebar down naturally.

Share this post


Link to post
Share on other sites

Neither of those worked.

 

I've refined the coding, the URL's are the same as posted above.

 

There is a further underlying issue. The problem now is that in Firefox the spacing between the bottom of the banner and the top of the side bar is massive, it's perfect in Explorer. I need the spacing between the two browsers to be the same.

Share this post


Link to post
Share on other sites

First add a background-color to #bannercontainer:-

#bannercontainer { background-color: skyblue;

text-align: left;

width: 851px;

height: 300px;

}

This shows you that the white div with blah blah is tight up under the #bannercontainer in IE7 and Firefox.

 

It also shows that Firefox has placed the logo.jpg right up at the top of #bannercontainer which has raised the banner.gif below so that there appears to be a bigger space above the white div. This is because Firefox has not applied the top margin of 20px to the h3 tag, so I changed it from margin to padding and it works in Firefox so IE7 is unchanged and Firefox shows to 20px top space above logo.jpg:-

 

#bannercontainer h3 {

height: 61px;

width: 169px;

text-align: left;

margin: 0 0 0 20px;/*20px 0px 0px 20px;*/

padding: 20px 0 0 0;/*0px 0px 0px 0px;*/

z-index: 1;

}

 

I don't know why Firefox doesn't apply the margin to the top.

 

I used the files as they were in your first post within the last few minutes (in case you've changed them); I didn't apply Virtual's or newseed's suggestions.

Edited by Wickham

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...