CODEWITHSUNDEEP
csshtml
vincent kleine
vincent kleine

Reputation: 724

Strange container div behaviour

I'm asking this for learning purposes; there aren't any negative aspects on this behaviour, but I just wonder if this could have any negative consequences in the future.

So I have a container div: content_wrap, which has two other div's: side_bar and main_content. The container div is 980px width, and is used to center its contents using margin-left and margin-right.

It's doing this correctly, however, when I was debugging the page (in Firefox), I noticed that the browser renders the div as being 0x0px and renders the parent div off-screen. However, it does position the child divs correctly. See this JSFiddle for an example: http://jsfiddle.net/7fsXp/7/

I Googled this and most of the answers have something to do with floats and are solved by using clear:both, but I don't use any floats. I did notice that if I change the main_content div from position:absolute; to position:relative;, the content_wrap is displayed correctly. Or I can fix it by setting a height for content_wrap.

I don't actually need to be able to see the content_wrap, so there isn't really a problem, as it is doing its job in means of centering the child divs. I just wondered if it would be a bad practice to leave it like this? Is it a bad thing, or does it matter?

Upvotes: 0

Views: 143

Answers (3)

sitilge
sitilge

Reputation: 3737

It depends on what you are willing to do, but because the default position for div is position: static; changing the position: relative; will avoid the collapse of parent div.

Upvotes: 1

Kaloyan
Kaloyan

Reputation: 7352

Try adding other elements to this HTML and enjoy the horror :D

There are actually many things in your code, that I wouldn't do. First of all, when an element is with position: absolute or position: fixed its layout is "ignored" by other elements or in other words cannot "push" any element and that is why your container is having 0 height. It's like they are ethereal (best explanation ever, I know).

You should check this article on positioning -- http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

The fact that they are in the place you expect them to be is that there are actually no other elements in the HTML and the absolute element is positioned relatively to the body and so is the fixed one (but that's what elements with position: fixed always do). Looks what happens when I add some other content to the parent div -- http://jsfiddle.net/7fsXp/13/

So long story short - you shouldn't form your layout with absolute or fixed elements if you can do it without them.

Upvotes: 1

brouxhaha
brouxhaha

Reputation: 4093

position: fixed and position: absolute take the elements out of the flow, so using either of these positions on all child divs will collapse the parent div entirely.

If you have content below a collapsed div, it will flow up and over/under that content like this.

You don't need to position the main_content div absolutely, but you'll need to change a few things to top align the sidebar and main_content.

DEMO

Since sidebar is fixed, it's using the document, not the container div as a reference for top, while main_content would use the body (unless you add position: relative to the container). Getting rid of the body's default padding/margin will fix the small alignment difference.

body {
    padding: 0;
    margin: 0;
}

#main_content {
    //remove position: absolute;
    margin-top:70px; //top: 70px won't work unless you specify position
}

Upvotes: 1

Related Questions