...

View Full Version : Gaps in divs?



chevy_ls_6
12-10-2010, 10:51 PM
I've already had one issue fixed here today, so figured I'd try for 2...lol!

Why am I getting gaps in between my divs? Also, is there any way to maintain my rounded [transparent] corner of the header image other than setting the backgrounds of both the header & page-container to "0"??

http://www.yenko.net/R4/test.html

teedoff
12-10-2010, 10:58 PM
Did you try the global style of:

html, body {
margin: 0;
padding: 0;
}

Excavator
12-11-2010, 01:14 AM
Have a look at this chevy_ls_6,
Changes highlighted in red -

#page-container {
width: 960px;
margin: 0 auto;
position: relative;
background: #ff0;
}

#header {
height: 164px;
background: 0;
}

#under {
height: 164px;
width: 960px;
position: absolute;
top: 0;
left: 0;
z-index: 200;
}
#over {
height: 164px;
width: 480px;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}

#topnav {
width:100%;
background:red;
font-size:93%;
/*position: relative;
top: -12px; */
line-height:normal;
z-index: 220;
}
#topnav ul {margin: 0;}
#sidenav {
float:left;
width: 240px;
/*background: yellow;*/
}


Study that a bit and look at where the yellow background color comes from. That will work as long as your #content is taller than your #sidenav. Here is a demo of that same method - 2 column equal-hieght layout (http://nopeople.com/CSS%20tips/simple_2-column/index.html).

chevy_ls_6
12-11-2010, 10:38 PM
Have a look at this chevy_ls_6,
Changes highlighted in red -

#page-container {
width: 960px;
margin: 0 auto;
position: relative;
background: #ff0;
}

#header {
height: 164px;
background: 0;
}

#under {
height: 164px;
width: 960px;
position: absolute;
top: 0;
left: 0;
z-index: 200;
}
#over {
height: 164px;
width: 480px;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}

#topnav {
width:100%;
background:red;
font-size:93%;
/*position: relative;
top: -12px; */
line-height:normal;
z-index: 220;
}
#topnav ul {margin: 0;}
#sidenav {
float:left;
width: 240px;
/*background: yellow;*/
}


Study that a bit and look at where the yellow background color comes from. That will work as long as your #content is taller than your #sidenav. Here is a demo of that same method - 2 column equal-hieght layout (http://nopeople.com/CSS%20tips/simple_2-column/index.html).

Many thanks!

chevy_ls_6
12-11-2010, 10:42 PM
Ok, so with that done, why won't the sidenav <div> fill down to evenly with the content <div>, all the way to the footer <div>? It seems to simply be filling just far enough down to contain the content within that <div>?

http://www.yenko.net/R4/test.html

[Edit: some quick reading reveals that this is how it's supposed to work, being as a floated div will only be as long as it's content. Workaround time...!]

Excavator
12-12-2010, 01:09 AM
Workaround time...!]

This demo shows how you can make the left column as long as the right. Works well when you know the content will always be taller than the other column.
simple 2-column layout (http://nopeople.com/CSS%20tips/simple_2-column/index.html)

This is a solution I came up with that will be equal height no matter which column has more content.
equal height 2 column layout (http://nopeople.com/CSS%20tips/fluid_width/index.html)

chevy_ls_6
12-13-2010, 05:04 PM
This demo shows how you can make the left column as long as the right. Works well when you know the content will always be taller than the other column.

This is a solution I came up with that will be equal height no matter which column has more content.
equal height 2 column layout (http://nopeople.com/CSS%20tips/fluid_width/index.html)

That's certainly a simple, yet effective way to do it! Question though, and I'm still learning, but doesn't that method take away some ability to adjust for screen width, being as those columns are a fixed width? I was planning on changing everything to "%" based widths, and doing something with my header image, to account for different screen sizes, but...? Or maybe [quite possibly!] I'm missing something??

abduraooft
12-13-2010, 05:09 PM
Take a look at a fluid faux column (http://www.communitymx.com/content/article.cfm?cid=afc58) layout

chevy_ls_6
12-13-2010, 07:47 PM
Take a look at a fluid faux column (http://www.communitymx.com/content/article.cfm?cid=afc58) layout

Well now, isn't that something!

chevy_ls_6
12-14-2010, 05:55 PM
I'm slowing gaining on it...!

http://www.yenko.net/R4/test.html

Thanks again, y'all...

chevy_ls_6
12-17-2010, 06:47 PM
The gap is back between my footer & body container...what am I missing here?

chevy_ls_6
12-17-2010, 07:32 PM
Ok, it's the image that is forcing the gap...sooooo?

teedoff
12-17-2010, 07:34 PM
Do you have margin: 0; padding: 0; on the img tag in your css?

chevy_ls_6
12-17-2010, 07:44 PM
Apparently it was a block/inline problem...I changed it to span and float, and we're back in business! Let's hope it stays...lol!

Thanks for looking, though, teedoff!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum