DIV/CSS Layout – Misalignment/Gaps

@JuparisAug 08.2006

Greetings, everyone!
Once more I am in desperate need of your assistance. Any and all help is greatly appreciated!

Ok, so ~~[url=http://juparis.frih.net/randumb/setup.htm]~~here’s the problemed page[/url]. You’ll notice that it’s full of colors, but no pictures. Put simply, I’m having trouble uploading everything, and since it’s pretty graphic-heavy, I thought colors would at least ease my bandwidth and your downloading time for a while. At least until I can find a good compressor, but that’s something entirely different.. Here are the troubles:

1) Directly above the left navigation you’ll notice a gray bar (right above “Home”). It only appears on the left, but the gap actually spans horizontally across the page. I found it’s created by <div id=”base”>, which doesn’t expand around all the divs it contains. I need <div id=”base”> to keep everything aligned horizontally across, but for some reason it doesn’t seem to actually contain the divs that it should. I’m completely stumped on this one…

2)The entire left bar won’t extend to the bottom of the page, as the main content (white) almost does. I had intended that these divs be the same height. Though they are declared that way, they always find a way to allude any perfection. Oddly enough, if I float <div id=”base”> left, everything appears fine. But then nothing is aligned with <div id=”head”>, and the gap remains.

3)The copyright notice at the bottom should (according to the order of tags) be inside the white content area. Somehow it’s escaped, and I have no clue how.

Thanks to anyone with any remedy to this problem! It took me hours just to get this far, but now I think I’m really stuck. ?

to post a comment

CSS

11 Comments(s) _↴

@ewallaceAug 08.2006 — #Here's what I've noticed so far. The grey bar seems to be caused by your ensign div being too short. It's 175px, and the container it is in (head) is 188px. You have it set to 175px, but it's expanded the length to hold the other things on the right. If you make your nametag div only 114px in height, everything should fit properly.

@ewallaceAug 08.2006 — #Sorry to do this in pieces, but that's just how I'm looking at it.

Your third problem (with the copyright) is that it isn't inside the content div. Move it up above the closing div tag on the line above it to get it in.

edit: Note the different background color of the copyright. If you want it to blend in with the content, you'll need to change that. The same color text and background made the copyright a bit hard to find at first.

@ewallaceAug 08.2006 — #I wrote a reply and lost it. This is the short version.

Your content area and your sidebar (navigation, I assume) don't look to be set to the same thing. I tried setting it to %100, but I've had problems with this one in my own pages. From what I've read, it needs to have a height to calculation the %100 from. I've heard that putting the body height at %100 will work, but it hasn't for me.

Anyway, I did what I could, and hopefully someone else will be able to help with that last question.

-E

On a side note, I couldn't find the css code for the Post div. I thought it was causing some sizing issues I was having with the content div, but I couldn't tell for sure.

@JuparisauthorAug 08.2006 — #I thank you, ewallace, for your help.

Ironically, nothing really worked, except for your second suggestion, however I was looking for something else...

The first problem, I discovered, was caused when I had a top-padding of 13px, to keep the first Title align on the bottom. I removed the padding and changed the CSS for that first h3 to the following:

 #firstPostTitle h3{
 display: table;
 float: right;
 margin: 13px 26px 0 25px;
 }

No more misalignments, anywhere!! (solves #1 and part of #2)

For the last problem, the copyright notice, my aim was to keep it at the bottom of the page at all times, hence I kept it outside the "content" div, but inside the "base" div. Now here's something really odd: While everything inside the "base" div now aligns, all of it ends where the "copyright" div begins--which is suppose to remain inside the "base" div. I could move it to the "content" div as you said, but then it seeps skyward, wherever the content ends. I'd rather keep it at the bottom of the page..

So, thank you then for your help. While it didn't solve everything completely, I at least got some results. I guess I was staring at it for too long before--I must have been too tired to remember how wacky padding gets with floated divs.

@ewallaceAug 08.2006 — #Sorry, I thought you said that you wanted it in the content area. I'm not exactly clear on what you want it to do. If you want it at the bottom of your base div, then your content area and sidebar would end where the copyright div begins.

I think that I'm not clear on what you're trying to do.

-E

@JuparisauthorAug 09.2006 — #I mispoke (or.. mis-typed?)..

I intended that the copyright div remain in the base div; that the background of the base div would fill the copyright div. After adding the images, it would [i]appear[/i] to be in the content div, but always at the bottom.

If I do keep the copyright in the content div, then the copyright floats up. The content div has 100% height, however the copyright wouldn't stay at the bottom because the actual content inside the content div won't always be 100%.

I hope that clears things up a bit?

@JuparisauthorAug 09.2006 — #Actually, something just came to mind:

I'd like to keep the copyright div inside the content div, but I need a div to fill in the extra space. The problem is that whenever I use a height of 100% for the filler div, it spreads 100% of the window height, and not 100% of what space there is to fill.

I have that body height set to 100%, but no luck with it. Hopefully this is easier than what I was trying to describe before, though.

@ewallaceAug 09.2006 — #Okay, that was a bit clearer. I'll try playing around with it for a bit and see where I get.

-E

@ewallaceAug 09.2006 — #Move the copyright div back to the container (rather than the content), set its width to 585px, and float:right. That should do it, if I understand what you want it to look like.

-E

edit: It works in IE, but not in FF. Probably something to do with the %100 heights, but I'm afraid I don't know how to fix that.

@JuparisauthorAug 10.2006 — #Well thanks for your help anyway. I'll have to find an alternate way of keeping the copyright at the bottom.

In the end I was trying to find a way to make the filler div expand vertically they way all divs inheritly expand horizontally by default. I think that's a hopeless dream

@akeaneAug 13.2006 — #To fix the footer and the filler (if I understand what you are looking for).

To #filler add:

background:white;

To #copyright add:

bottom:0;

You also might what to change your blue background #336 to something else since it is hard to see...(like #255).

Also in #copyright change your color for text to white so you can see it.

Hope this helps.

TTFN... Andrea

P.S. This works reasonably in Firefox and I.E. but slightly different. But your footer is at the bottom.

Also in #CSS _↴

a:active [RESOLVED] Fun Layout Problem list item background

Success!

Help @Juparis spread the word by sharing this article on Twitter...

Tweet This

DIV/CSS Layout – Misalignment/Gaps

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

DIV/CSS Layout – Misalignment/Gaps

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴