"clear effect" on positioned elements

b_hole · 09-16-2007, 04:06 PM

Hi,

I have a layout of a menu, content and a footer. Nice and normal. the side-menu and the content are wrapped around using a relatively positioned DIV, and the menu has position:absolute.

My problem is that in some pages, the menu is higher than the content, and then the footer is "beneath" the menu.
How can I make the same effect that clear for floated elements make? I can't replace the position to float, although I wish I could (I hate position...)

Thanks a lot.

Code:

<body>
		<div style="position: relative">
			<div style="position: absolute; width: 300px; border: 1px solid blue">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			<div style="margin-left: 320px">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
		<p style="border: 1px solid red">bottom text</p>
	</body>

Fang · 09-16-2007, 04:45 PM

Code:

<body>
<div style="width:100%; overflow:hidden;">
    <div style="float:left; width: 300px; margin-right:20px; border: 1px solid blue">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
<p style="border: 1px solid red">bottom text</p>
</body>

b_hole · 09-17-2007, 08:20 AM

Thank Fang for your effort, but that's not helpful for me, as I wrote before I can't replace the position to float.
Anything else someone can think of?

Thanks again.

jlhaslip · 09-17-2007, 10:36 AM

Code:

<div style="position: relative">
            <div style="position: absolute; width: 300px; border: 1px solid blue; clear:after;">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div style="margin-left: 320px; height:100%;">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <p style="border: 1px solid red; clear:before;margin-top:-3em;">bottom text</p>

Add a Doctype and title and you should be good to go... if I understand correctly... that will work as long as the length of the 'menu' does not exceed the viewport height, then you have the same problem, only lower down the page.
Absolute positioning is a bug-bear some days.

Why can't you lose it and use the previous method? Sounds strange to me, but whatever... due to the fashion by which absolute positioned items are removed from the flow of the document and then inserted back in following the layout of the non-absolutely-positioned items, the items can't be cleared, at least to the best of my knowledge...

b_hole · 09-17-2007, 11:12 AM

Huh? there's no such thing as clear: after.

The reason I'm trying to avoid floating boxes is that the content might contain a floating elements, and a clearing afterwards. That means that if there's a left floated element inside the content, and a left clear somewhere after it - the menu will also get "cleaned", and that's something I cannot afford.
That's why I chose positioning, at lease at the moment. If someone can tell me otherwise, I'll immediately change back to floating elements.

jlhaslip · 09-17-2007, 12:47 PM

Have you actually tried it?
And I sincerely apologize for making the mistake of using a clear:after in an effort to assist you with this problem. How ridiculous of me, at 5 am, to be thinking that would work.
In the meantime, try the code to see if it does what you want it to, please.

http://www.jlhaslip.trap17.com/sampl...est_float.html

And in future, kindly build your questions and code snippets around what you are needing. Your sample should have included a floated element in the place you "may" be using one. Review your opening post and there were restrictions placed on what you needed, but no reasons why, and certainly no 'floated' elements in the content. Having to deal with them after an honest effort to assist you makes me re-consider helping people around here who don't understand that those of us assisting you do so for free, and with little thanks, apparently.

VIPStephan · 09-17-2007, 07:49 PM

In a nutshell: Floats within floated elements are only cleared within that element so you shouldn’t run into problems if you’re using floats properly.