Topic: Small CSS problem Pages that link to <a href="https://ozoneasylum.com/backlink?for=30949" title="Pages that link to Topic: Small CSS problem" rel="nofollow" >Topic: Small CSS problem\

 
Author Thread
Radical Rob
Paranoid (IV) Inmate

From: Lost Angeles Kalifornia, via Hawaii....
Insane since: Jun 2001

IP logged posted posted 04-09-2009 01:07 Edit Quote

Ok, so I've painstakingly pieced this design together, but for some reason I have a div at the bottom above my footer called #fivebox which encloses 5 small content boxes. Everthing works fine but the background stops displaying behind it.

I for the life of my cannot figure out why, nor do I know how to search for a solution as I've never seen this before.

http://www.wayoutwestenterprises.com/clients/caicc/index.html
login: guest
pw: guest

Sorry for the login, it's to keep prying eyes out of my development folder.

Keep in mind, this is just my development stage. I'm totally open to changes I need to do if you see something awkward, or goofy looking. Especially with the CSS.

As always, very much appreciated.

DavidJCobb
Nervous Wreck (II) Inmate

From: United States
Insane since: Mar 2009

IP logged posted posted 04-09-2009 18:09 Edit Quote

Inside #fivebox, add a DIV with CSS clear:both. This DIV should be #fivebox's last child and should have a single space in it. Then, change #fivebox's margin-left:60px to padding-left:60px. Tested this using Firebug in Firefox 3, not sure about IE.

----------------------

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 04-09-2009 20:44 Edit Quote
code:
#fivebox {
	margin: 0 !important;
	padding: 0 0 0 60px;
	overflow: auto;
	display: block !important;
	display: inline-block;
}



(Edited by reisio on 04-09-2009 20:52)

Radical Rob
Paranoid (IV) Inmate

From: Lost Angeles Kalifornia, via Hawaii....
Insane since: Jun 2001

IP logged posted posted 04-10-2009 07:15 Edit Quote

So I understand this correctly, I use the <div class="clear"></div> to remove the left float so the bg continues? I just wnat to make sure I grasp it so I can stop bugging you guys. :-)

It totally worked. Thanks!!

Kyle the Feared
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jan 2009

IP logged posted posted 04-10-2009 17:51 Edit Quote

Floated items normally don't affect the vertical flow of the document, so the height of the container is basically set as if the floats didn't exist.
But the "clear" property specifies that an element can not be adjacent to a floated element.
If it's in the DOM after the floated element it will be displayed below the float rather than next to it.
So in that way you can get the float to affect the flow vertically.
The empty div with style="clear: both;" is a common way to prop up the height of an element containing floated elements.
It's also the basis for one of the "min-height" hacks for IE.

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 04-12-2009 08:30 Edit Quote

... :/

Kyle the Feared
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jan 2009

IP logged posted posted 04-12-2009 09:53 Edit Quote

Hi reisio, :P
Not sure if you're upset at me, I just thought an explanation to accompany the code you guys gave would be good.
I explained the one because it's simpler to understand and it's usually fool proof.
I've never really seen a good explanation of why the overflow works (it's certainly unintuitive) and it can sometimes lead to other complications (such as scrollbars in some places when using auto), so I didn't touch it.

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 04-12-2009 21:54 Edit Quote

The renderer has to know the height of an element to know where to place a scrollbar should it need one, which forces containment.

Unwanted scrollbars are a side effect of not being aware of margins and padding (etc.) that exist, but you can always use 'hidden' instead of 'auto'. One place you'd pretty much always want to use 'hidden' is for a navigation ul, because things like Firefox's outline for last-clicked anchors do produce overflow.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu