how to get absolute div to respect parents height?

[efficacious]

Hi guys!,

 

working on a layout and i'm stuck at getting my middle cell to respect the parent containers height.

I know I can find a workaround for it.. using javascript for one but I'd rather not, if there is a better way to handle it with css.

 

I have 5 total cells two on the left, two on the right and one middle cell.

The left and right cells are floated the middle cell is absolutely positioned within its parent and positioned in the center.

If I don't absolutely position the middle cell then it doesn't sit flush with the floated cells.. which I find odd since they SHOULD be floating around it.

 

heres the code:

 

CSS

#Main {
background-image:url('/style/IMGS/repeat-back.png');
background-color:red;
text-align:center;
width:1024px;
position:relative;
}
#Main #C0 {
position:absolute; right:25%;
width:50%;
background:pink;
}
#Main #C1 {
width:25%;
float:left;
background:blue;
}
#Main #C2 {
width:25%;
float:right;
background:orange;
}
#Main #C3 {
width:25%;
float:left;
background:violet;
}
#Main #C4 {
width:25%;
float:right;
background:green;
}

 

HTML

<!-- DEFAULT HTML START //-->

<div id='Main'>
<div id='C0'>
	ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />
	ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />
	ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />
	ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />ZERO CELL<br />ZERO CELL
</div>
<div id='C1'>CELL 1<br />CELL 1<br />CELL 1<br />CELL 1<br />CELL 1<br />CELL 1<br />CELL 1<br /></div>
<div id='C2'>CELL 2<br />CELL 2<br />CELL 2<br />CELL 2<br />CELL 2<br />CELL 2<br />CELL 2<br /></div>
<div style='clear: both;'></div><br />
<div id='C3' style='float:left;'>CELL 3<br />CELL 3<br />CELL 3<br />CELL 3<br />CELL 3<br />CELL 3<br />CELL 3<br /></div>
<div id='C4' style='float:right';>CELL 4<br />CELL 4<br />CELL 4<br />CELL 4<br />CELL 4<br />CELL 4<br />CELL 4<br /></div>
<div style='clear: both;'></div>
</div>

<!-- DEFAULT HTML END //-->

 

 

[cssfreakie]

I am not sure if i understad you correctly bu i have a feelijg that you expect that if you give something a position of absolute, other elements wil float around it? if that is the case, your wrong. Absolute positioned elemend are taken out of the normal flow. Give it a position relative instead and see what happens.

[efficacious]

no that is not at all what I am saying.

 

I said quite the opposite actually. I said that I HAD to make the div absolute because it wasn't already working as it should. The zero div was in the flow of the document.. the other cells had been set to float but instead of floating around the zero div as I would expect it to. the zero div just rests either on top of or beneath the other cells. So in order to temporarily get the layout to look as i want I added some fixes that I know are probably not the best ways of doing it. I purposefully set the zero div to absolute positioning to remove it from the flow of the document. I want a different way of doing it.

 

I will try to get a image to post to show what I'm talking about it.

[cssfreakie]

please instead of doing that link to an online example. much easier and above faster to fix stuff that way.

[efficacious]

Here are two pictures showing what is happening.. one version is the "fixed" version and the other is the broken.

 

I also attached one that shows what it looks like when there is no absolute position set on the zero cell.

 

[attachment deleted by admin]

[cssfreakie]

so in a nutshell, since this is getting pretty cryptic.

 

You want a red header

underneath that  at the left 2 divs, in the middle a column and than to the right of that again 2 divs?

 

If so there is absolutely no need to use whatever positioning property other than static.

Let me know this can be done in a few seconds.

[efficacious]

you cannot do this layout without using positioning unless you intended to use tables.

Not that I have ever seen. if you believe there is then post here please I will use it.

 

lets not forget that this is all completely scalable and not fixed heights ect..

[cssfreakie]

EDIT: removed the code here, it works but people like you don't deserve it! and trust me overflow hidden can do more than just hide. But you know that ofcourse....

[efficacious]

haha overflow hidden does not work, I said it had to be scalable.

if this is the best you got then nvm i'll stick with my fix thanks

[cssfreakie]

haha overflow hidden does not work, I said it had to be scalable.

if this is the best you got then nevermind i'll stick with my fix thanks

? did you even try it ? to put fuck loads of info in it and see if it scales or not?? well good luck with your design!

[MadTechie]

well that's just ungraceful..

Let me get this straight you get stuck ask for help them throw it back, well that says a lot about you.

[efficacious]

i had already tried using overflow properties before coming here.. it does not properly show the content.  I didn't appreciate the way

cssfreakie was handling his suggestions, as I felt they came across extremely condescending. The fix he gave does not work. But what else can you flame about since you guys have already started? I'd say that says alot about YOU.

[cssfreakie]

i had already tried using overflow properties before coming here.. it does not properly show the content.  I didn't appreciate the way

cssfreakie was handling his suggestions, as I felt they came across extremely condescending. The fix he gave does not work. But what else can you flame about since you guys have already started? I'd say that says alot about YOU.

well i say it's case closed than. You say overflow hidden can't do what you want (you already tried it....and since you tried it no one else can do it), and i say it can do what you want in fact i proofed it. You say you need a position absolute/relative (at least something other than static) and i say you don't and again i proofed it. Indeed I made you a template, and you laughed at me for using the property overflow hidden and saying is that all you got... What's up with that? Do you even know what it can be used for? 

 

anyway good luck with your stuff! I won't bother you again.

[MadTechie]

efficacious, I am not getting in a flame war, but be honest, how would you respond,

 

if Imaulle said the following

 

haha different id does not work,

if this is the best you got then nevermind i'll stick with my fix thanks

 

be honest would you continue to help ?

 

(note the actual response is below)

ughhhh I swear I tried that and it did not work... but now it's working.... lol THANK YOU!

 

I have help a lot of people here and people who reply with "didn't work" or "already tried that" are really not helping themselves, add some mocking into the mix.. and no know wants to helps them!

 

when I started i remember someone helping me and when they told me to do something i thought.. lol yeah right.. but tried it anyways.. and it worked.. i read the code over and over then worked out why it work..

the fact of the matter is either if you ask for "help" then your need to work with that person not against them,

if you want a solution then pay for it. you seam to know CSS quite well so only help would be required (compared to most who need the solution but won't pay for it an insist they just need help)

 

okay that's my 2pence .. well a pound,

 

--MadTechie

[efficacious]

I only responded that way because of the way cssfreakie was talking to me... notice I did not talk to Imaulle in a condescending fashion when helping him.

I didn't suggest things to him in a way that would impose my superiority to him. I simply asked him questions and gave him responses without judgement.

 

And the fact of the matter is that when I suggested something it worked. No suggestions that cssfreakie gave worked plain and simple. I did in fact try the code he gave and it does not work. The overflow:hidden HIDES the content. It does not allow the content to scale with everything else like I said I needed it to do. You want to sit here and act like I'm this horrible person and blah blah blah, but you two are the only ones flamming this thread. I am merely trying to defend myself against your inaccurate accusations. I will not respond to this thread any longer.. if you so choose to continue flamming and wasting your time then by all means have at it.

[MadTechie]

I am hardly "flaming"..

personally I don't care if the code worked or didn't work,

I was only pointing out that your response was disrespectful! to someone who is spending his free time to help.

 

But well as no one is going to respond,

I guess I'm also done!