Divs Overlapping???

[randled]

Guess who's back. Back again. Randy's back. Tell a friend.

Anyway...

So, I can't quite figure this one out (hence my post). My first div at the beginning seems to fit just fine. It has the same class as all of the other divs. The other divs on the page actually overlap to the next one. I've added overflow:none and such to the parent, but that doesn't seem to be working. I believe that should only matter for the content anyway.

Can someone take a look at my CSS and page and give me some input? Thanks!

http://rdldew.com/gfx/gfxlanding.html

Edit: I should clarify. You can see the overlap best when you hover over the divs. I changed the color of each div to demonstrate.

 

[Brodzko]

If I got you right, why don't you try giving float: left; to all the .outerWrapper divs (supposing they are enclosed in center-positioned container) and set some margin-top/bottom values so there are spaces between each of them?

If I didn't get you right, then sorry O

 

[chrishirst]

That is what positioning does.

http://webmaster-talk.eu/en/articles/8-website-development-and-design/13-css-positioning

 

[randled]

I did use float and margin to get this how I want. It's not perfect, but it's coming right along. Take a look.

 

[Brodzko]

So they're not overlapping any more But please, get ridof that horizontal scrollbar (displays for me), and me be on your place, I'd add also margin-bottom to those divs - to make sure that contact will not be "glued" to the bottom of the screen

 

[randled]

So they're not overlapping any more But please, get ridof that horizontal scrollbar (displays for me), and me be on your place, I'd add also margin-bottom to those divs - to make sure that contact will not be "glued" to the bottom of the screen

I tried adding margin-bottom, but it doesn't do anything for some reason. If I go too big on the amount of margin, it completely messes up the size of the sections.

I'm not sure how to get rid of that scroll bar either.

My CSS is pretty bloated at the moment. I will need to go through and trim the fat when I can.

Any other tips on how to pull those sections off the bottom and get rid of the scroll bar?

 

[chrishirst]

Why is the #bannerBio element using position: absolute; and a right property value of NEGATIVE 108%???

Unless you understand and follow precisely the "laws" of positioning, position: absolute; only truly works correctly at ONE browser width, which is the one you created it at. Browser width not always being the same as screen resolution.

[By the way. Before someone has a go at me over the word "law" it is not meant in the legal or judicial sense, it is used in the same context as "the laws of nature" or "the laws of physics" are, where there are fundamental principles to observe and obey.]


Meanwhile back to the script. For me (Firefox) at a width of around 1100px, there is a horizontal scroll bar and #bannerBio hangs over the parent right edge by a few px, whereas none of the other "#bannerXXXX" elements do.

.outerWrapper, body, html (line 9)

{

height: 100%;

width: 100%;

float: none;

clear: both;

margin-bottom: 55px;

left: 250px;

}

The left property in the above ruleset is superfluous (fortunately) as the positional offset values are only applied when the element is explicitly positioned ie: OTHER than static.

It would be a help if we knew what the layout is that you are trying to get to. Do you have a screenshot or an image of the actual design you are working to?

 

[randled]

Just a quick reply, longer one later...

"Why is the #bannerBio element using position: absolute; and a right property value of NEGATIVE 108%???"

That's used for my CSS Transition animation. I place it over screen using right: and -108. I apply the class to move it back over as you can see below that.

I'll talk more about the rest of the post later.

 

[chrishirst]

You don't need to use absolute positioning for something like that, relative positioning will allow you to do that without messing up the normal flow.