Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Aug 2006
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts

    "clear effect" on positioned elements

    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>

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    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>
    Last edited by Fang; 09-16-2007 at 04:48 PM.

  • #3
    Regular Coder
    Join Date
    Aug 2006
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    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...
    Last edited by jlhaslip; 09-17-2007 at 10:43 AM.

  • #5
    Regular Coder
    Join Date
    Aug 2006
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    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.
    Last edited by jlhaslip; 09-17-2007 at 12:52 PM.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •