Making a div expand with the content?

All about creating websites!
Post Reply
User avatar
ayu
Staff
Staff
Posts: 8109
Joined: 27 Aug 2005, 16:00
18
Contact:

Making a div expand with the content?

Post by ayu »

I googled around and found a couple of solutions to this....

1: Don't use a height
2: Make the height 100%
3: Don't use absolute positioning


None of these have been working at all so far =/

The thing is that I have one "maincarrier" where everything of the site is placed, then inside of it I have a smaller carrier where the content is supposed to turn up when you navigate. So basically it's one div in another div, and I want the outer div (the maincarrier) so expand when the inner one does, because of the content.

For example if I have a page with news, I want it to adapt to the number of news objects on the page....

I think I have done this once before, but I can't figure out how the f*ck I did it last time =/ because now, nothing works

Help! xD


EDIT! : ok so this is weird, I made a small test, and that worked perfectly =/ So I must have made a mistake somewhere =P

http://code.suck-o.com/40


EDIT 2!: Ok so I have analyzed the problem but I can't seem to solve it =/

If I have a div, I can make it adapt to the content inside of it, BUT if I have a div inside another div, the outer div will NOT adapt to the height of the inner div, when the inner div is expanding because of the content inside of it, thus making the outer div overflow. How would I solve this? =/

As in, basically I want a div to inherit the height of a child div (another div that is inside of it)....how? ^^
Last edited by ayu on 11 Jul 2008, 04:51, edited 2 times in total.
"The best place to hide a tree, is in a forest"

User avatar
bad_brain
Site Owner
Site Owner
Posts: 11636
Joined: 06 Apr 2005, 16:00
18
Location: In your eye floaters.
Contact:

Post by bad_brain »

hm, what about doing the layout (height&width) by using CSS and then:

Code: Select all

overflow: scroll;
don't know how good this will work for IE6, but like I said before: to hell with IE6 users... :lol:

User avatar
ayu
Staff
Staff
Posts: 8109
Joined: 27 Aug 2005, 16:00
18
Contact:

Post by ayu »

well, I AM using CSS to make it ^^

It's better if you test and see for yourself =) takes 1 min...

create 2 id's in a stylesheet...

Code: Select all

test {
position: absolute;
top: 0px;
left: 0px;
background-color: red;
}
 
test2 {
position absolute;
top: 0px;
left: 0px;
background-color: blue;
} 
and then apply the first one to a div, and write something in it. As you can see, the div adapts after the content, correct?

Now, put another div INSIDE of the current one, so that the content of the last one is now under two divs, and of course apply test2 to that one.... they stop adapting.

That is my issue... I want one main carrier to hold everything in the site, and then it will expand if the content increases/decreases, like if I have a news page in it, more news will make it bigger of course.

And I have already studied the overflow function, it doesn't do what I want ^^
"The best place to hide a tree, is in a forest"

User avatar
ayu
Staff
Staff
Posts: 8109
Joined: 27 Aug 2005, 16:00
18
Contact:

Double Post : D

Post by ayu »

Solved...


After a LOT of reading today, I have come to the simple conclusion that...

The outer div, as in the "main carrier" has to be positioned relatively to be able to adapt to the divs inside of it (the child divs)
"The best place to hide a tree, is in a forest"

User avatar
ayu
Staff
Staff
Posts: 8109
Joined: 27 Aug 2005, 16:00
18
Contact:

Post by ayu »

EDIT: also....why does my site collapse if I change all divs do spans??! XD that actually seemed like a solution for about 5 seconds

I will make this thread active again since I hit another wall ^^


Isn't there any other way to make the objects adapt to each other then making them relative?

Because if I make them all relative, positioning them will become a pain. For example, I am creating a font page for my site at the moment, which will contain:

1: A box with my latest sites
2: A box with my latest projects
3: news

1 and 2 are already fixed since they are static objects, meaning that they will stay the same.

But 3 is another story, because It's the news, and I want the objects to adapt to the content (all news aren't the same length, ya?). Which is becoming a problem. Because I want the "subject" and the "date" to be placed right next to each other. But if they are relative, they will be placed relative to their position in the document flow, which will result in the objects getting positioned after each other (line break). Of course this could be solved with adding negative coordinates but I don't see this as an effective solution.

Is there anyone else that has another idea that might work? does the objects really have to be relative? isn't there a way to use absolute positioning. There must be some way, seeing that the net is full with sites that work like this, I just can't figure out how.
"The best place to hide a tree, is in a forest"

Post Reply