SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute positioning and overflow

    This might be one for Paul O'b

    I've got a little problem which I have solved but wondered if there was a better approach. Unfortunately I can't post any code or a link at the moment as it's for a client but I'll try and explain the problem.

    I've basically got a container <div> which has a few child elements which are floated.

    On the parent <div> I've used overflow: hidden; to force it to contain it's children which all works fine as expected.

    Now comes the tricky part. The design is quite complex with a couple of overlapping images which need to be separate due to the content management system the client is using so what I've deemed the easiest solution is to use relative positioning to place a background image in the top right corner of the parent div which will overlap the rest of the content.

    To do this I've needed to add position: absolute; to the container which obviously takes it out of the document flow and causes it to no longer expand for it's children.

    So, to get around this, I've introduced an extra <div> which does nothing more than position: absolute; but it has meant introducing an extra div.

    Is there an easier or better solution that anyone can think of that would solve this problem or is this the best solution given the complex layout?

    Thanks for any input or suggestions and sorry for not being able to provide a link or code although I could probably put together an example if it would help explain it better.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Linky linky?

    I personally never use relative positioning. I don't understand why you say you have needed to use absolute positioning on the container so that you can use relative positioning within. That's not how it works.

    You can always nudge an element from it's original position without doing anything to the parent.

    If you need to contain the region for absolute positioning then you give position: relative; ( or anything other than static ) to a parent element that you want to act as the boundary for the absolute positioning.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've used relative positioning on occasion. Dave, would it be possible for you to recreate this as a plain wireframe with example images and placeholder background/foreground colors (I prefer pastels for this)?

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't tend to use relative or absolute positioning but for this I think it's necessary unfortunately but am open to suggestions of how to achieve this.

    I've put a demo together for this although for some reason within this, it's absolute position that works better.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Absolute example</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;    
    }
    body {
        padding: 10px;
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 75&#37;;
    }
    #container {
        width: 700px;
        background-color: #CCC;
        overflow: hidden;
    }
    #absolute {
        position: absolute;    
    }
    #maincolumn {
        background-color: #D9D1B2;
        float: left;
        width: 500px;
    }
    #navigation {
        float: left;
        width: 194px;
        background-color: #99CC99;
        padding: 3px;
    }
    ul {
        list-style: none;    
    }
    #maincolumn img {
        width: 298px;
        border: 1px solid #000;
        height: 400px;
        float: left;
    }
    #subcontentcolumn {
        float: left;
        width: 200px;
        background-color: #B2C2D9;
        padding-top: 3em;
    }
    h3 {
        position: absolute;
        background-color: #DADB60;
        width: 250px;
        top: 5px;
        right: 0;
        border: solid 1px #000;
        padding: 3px;
    }
    p {
        padding: 0 10px 10px;    
    }
    </style>
    </head>
    <body>
    <div id="absolute">
        <div id="container">    
            <div id="maincolumn">
                <ul id="navigation">
                    <li><a href="#">Example menu</a></li>
                    <li><a href="#">Example menu</a></li>
                    <li><a href="#">Example menu</a></li>
                    <li><a href="#">Example menu</a></li>
                </ul>
                <img src="#" alt="Placeholder image">
            </div>
            <div id="subcontentcolumn">
                <h3>Sub Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
                <p>Pellentesque ornare luctus lectus. Quisque rutrum nibh ac arcu. <p>
                <p>In volutpat aliquet augue. Integer a est. In elit. Aliquam est turpis, molestie in, rhoncus sed, lacinia a, odio. Suspendisse feugiat diam. </p>
            </div>
        </div>
    </div>
    </body>
    </html>
    The same scenario exists though in that I've had to put an extra div in called #absolute so that the <h3> can be positioned to the top right of this.

    Please note: this is only part of the page, so an h1, h2 do exist as well but I've only put together the problem part of the page so it's easier to understand.

    Hope that all makes sense?

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps something like this then?

    Code HTML 4.01 Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Absolute example</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;    
    }
     
    body {
    	font-size: 75%;
    	font-family: verdana, arial, helvetica, sans-serif;
    	padding: 10px;
    }
     
    ul {
    	list-style: none;
    }
     
    h3 {
    	background: #DADB60;
    	border: solid 1px #000;
    	padding: 3px;
    	position: absolute;
    		top: 5px;
    		right: 0;
    	width: 250px;
    }
     
    p {
    	padding: 0 10px 10px;
    }
     
    #container {
    	background: #CCC;
    	overflow: hidden;
    	width: 700px;
    }
    	#maincolumn {
    		background: #D9D1B2;
    		color: inherit;
    		float: left;
    		width: 500px;
    	}
    		#navigation {
    			background: #99CC99;
    			float: left;
    			padding: 3px;
    			width: 194px;
    		}
     
    		#maincolumn img {
    			border: 1px solid #000;
    			float: left;
    			height: 400px;
    			width: 298px;
    		}
     
    	#subcontentcolumn {
    		background: #B2C2D9;
    		float: left;
    		padding-top: 3em;
    		position: relative;
    		width: 200px;
    	}
     
    </style>
    </head>
    <body>
    <div id="container">    
    	<div id="maincolumn">
    		<ul id="navigation">
    			<li><a href="#">Example menu</a></li>
    			<li><a href="#">Example menu</a></li>
    			<li><a href="#">Example menu</a></li>
    			<li><a href="#">Example menu</a></li>
    		</ul>
    		<img src="#" alt="Placeholder image">
    	</div>
    	<div id="subcontentcolumn">
    		<h3>Sub Heading</h3>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
    		<p>Pellentesque ornare luctus lectus. Quisque rutrum nibh ac arcu. <p>
    		<p>In volutpat aliquet augue. Integer a est. In elit. Aliquam est turpis, molestie in, rhoncus sed, lacinia a, odio. Suspendisse feugiat diam. </p>
    	</div>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, think that'll probably do the job

    The way I'd done it did work but it felt a bit wrong having to insert the extra div so that's much better, thanks

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Dave
    The way I'd done it did work but it felt a bit wrong having to insert the extra div s
    I'm a little confused Dave - Why did you have to add an absolutely placed wrapper? Surely you could have just created a local stacking context on the existing container.

    Code:
    #container {
        width: 700px;
        background-color: #CCC;
        overflow: hidden;
            position:relative
    }
    Or am I missing something here?

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, look up a couple posts.

    Anyway, the relative positoning doesn't need to be put on #container, it can easily go in #subcontentcolumn (as with my example).

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Dan
    Yeah, look up a couple posts.
    Yes but I'm I'm still not sure where Dave was going with this and if the h3 is at the top of the column it could have simply been shifted with a negative margin and retained the flow without needing to compensate with padding to preserve the flow.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True, but this is but a code snippet. Who knows how many other H3s he has in there, or where they're at. Though normally I'd use a negative margin here as well...

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I don't tend to use relative or absolute positioning for much to be honest so it's probably the one area that I should look a bit more at.

    It was one of those situations where I was thinking that I'd have to use absolute positioning to get it to overlap the two columns and was kind of stuck in that mindset when putting it together that using relative and a negative margin didn't occur until you just suggested it. There may have been something else that was conflicting that though as this is just code that I put together off the top of my head and may not quite accurately reflect the code I was dealing with but it's answered my question and given me plenty of alternatives to work from.

    Plus it was getting late when I posted the problem

    Thanks for the input guys

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Dan
    True, but this is but a code snippet
    Yes I guess you're right and there's more going on than what we see

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I was just after a few other suggestions as to how this could be approached
    I'm always surprised at how many different ways the same thing can be done so it's always good to see different solutions

  14. #14
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Same here. I would have used a negative margin, but I didn't know if Dave would have wanted it.

  15. #15
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, I'll probably go down that route to be honest.... I initially posted just to see what other thoughts people had so was just after ideas really so am greatful for both of your input


Bookmarks

Posting Permissions

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