ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

Relative Positioning Leaves Blank or White Space on Webpage - CSS DIV Position

Updated on November 9, 2010

If You Want Your DIV Content To Layer Correctly, Relative to Its Coded Position, You Need A Different Approach

So, you create a DIV tag to wrap some content, and you use CSS, applied to the DIV tag, to make the content's position Relative, in the mistaken belief that:

  • your content will simply move over to where you want it to be;
  • other elements on the web page will fill the space where it would have been if you had not moved it over;

Instead:

  • the content moves over;
  • AND a big blank space is ALSO left where the content would have been if you had not moved it!

Perhaps you have already tried using Absolute positioning, but found that:

  • this only places the content relative to the full browser window, and not relative to your content, creating havoc with the placement of your content when it is displayed in differently sized browser windows.

These are common problems.

The Relative positioning problem is inherent to the standard for displaying content using relative positioning. Believe it or not, despite many people having a very different "intuitive" grasp of how it should work, display of content using relative positioning is SUPPOSED to leave that frustrating block of space behind.

The Absolute positioning problem is a matter of scope ... you need a way to specify that you want your content placed relative to other content, not to the browser window.

Fortunately, there are solutions to these problems!

How to Get Content to Layer Properly Over Top of Other Content Using DIVs, CSS and HTML

I am creating this page because I had the exact same problems.

  • If I used Absolute positioning, my content (a logo) would float relative to the top left corner of the browser ... but my main content was centered in the browser, and depending on the size of the browser window, the logo would be too far to the left or right.
  • If I used Relative positioning, the logo would float relative to its original position, but it would ALSO leave behind a logo-sized blank space right where it would have been if I had not moved it.

So, how did I get the logo to behave? After a little (ok, a lot) of research into the matter, I finally discovered this solution:

  • Give the DIV containing the content you wish to layer (in my case the logo) the property of position: absolute; and give it the desired offsets, such as top: 150px; left: 200px;
  • Wrap the above DIV in an additional DIV, and give the outer DIV the property of position: relative;
  • Do NOT (unless you need to for some other reason) offset the position of the outer DIV. The idea is that you need to nest an Absolute positioned DIV in this Relative positioned DIV;
  • Now the content you wish to layer will have an Absolute position relative to the outer DIV, not relative to your browser window.

This Is the HTML in Your Web Page

<div id="logo-wrapper">
	<div id="logo">
	<img src="logo.gif">
	</div>
</div>

This Is the CSS for Your DIV Tags

#logo-wrapper {
	position: relative;
}

#logo {
	position: absolute;
	top: 175px;
	left: 84px;
}

CSS Notes

  • Using the # sign in front of a CSS identifier applies the settings to all elements with that name. Thus the settings for the class #logo-wrapper apply to all DIV (and other) elements with the parameter id="logo-wrapper".

Comments - Let Me Know if You Need More Help With This!

    0 of 8192 characters used
    Post Comment

    • profile image

      Mike 4 years ago

      Excellent suggestion, looks like it's been around for awhile! the other posts I found weren't helpful at all. This is a great solution, thanks for posting!

    • profile image

      Josh 4 years ago

      Thank you!!

    • profile image

      Aidan 4 years ago

      Been looking for a solution to this forever and I finally found it.

      Thank you so much!

    • profile image

      Kanyon 5 years ago

      This is amazing!!! Looking for this forever

      Thanks

    • profile image

      Kevin 5 years ago

      Mind = BLOWN!!! Thank you oh so very much!!!

    • profile image

      GOGOwebdesign 5 years ago

      FINALLY!!!! Have been searching for a clear and precise explanation/workaraound for months and found it here! THANK YOU

    • profile image

      Kk 5 years ago

      Great help!

    • profile image

      John 5 years ago

      THanks!!!!!

    • profile image

      Dan from Boston 5 years ago

      Thanks this helps a lot, love the internet

    • profile image

      AyCaramba 5 years ago

      Thanks a lot dude! that's an easy and yet clean solution. Saved me a lot of hours!

    • profile image

      Dready 5 years ago

      Thanks so much... i recognize the frustration you wrote about very well. But this solved it.

    • profile image

      Maria d LA 5 years ago

      Excellent!!!!! Thank you for sharing your wisdom!

    • profile image

      Athiruban SM 5 years ago

      Really Great for sharing this idea.

      Thanks for your help. :)

    • profile image

      5 years ago

      You're a life saver man, thanks!

    • profile image

      USER 5 years ago

      BIG HELP this is. Thanks man, saved me some time

    • profile image

      ??????? 5 years ago

      I read this about a year ago and it really helped a ton, I just never posted then which is why I'm posting now to say thanks a ton. Keep up the good work (and sorry for the late post :p)

    • profile image

      Someone 5 years ago

      I LOVE YOU!!! Thanks for this!!

    • profile image

      Prof Matt Versaggi 5 years ago

      Awesome! This just saved me a TON of time! Bravo!

      FYI: I was able to achieve similar results by putting the original DIV in a table structure and making it's position 'absolute'.

    • profile image

      DVaz 5 years ago

      Thank you very much for sharing that! Just wiped out my frustration with relative positioning. Thanks!

    • profile image

      Yong 5 years ago

      Thank you so much for shareing that!!! puzzle me for so long :)

    • profile image

      Derek 5 years ago

      Thanks man... Just what I needed :)

    • profile image

      Derek 5 years ago

      Thanks man... Just what I needed :)

    • profile image

      KC 5 years ago

      YOU ROCK !!!!!!!!!!!!!!!

      This is secret ninja stuff man.

      My page is finally done !!

    • profile image

      Harrold 5 years ago

      Ok, credit when credit is due. Man have i been searching for this solution. It always stays complicated with the positioning issues and this actually solved my issues as well. Thanks a lot for writing the article Jason

    • profile image

      Xionc 6 years ago

      thanks a lot :)

    • profile image

      Gautam 6 years ago

      Jason, U rock man! spent hours on this and finally thanks to Google and to you that i finally managed to get the div tags in place and working... Phew! Awesome, can finally go off to sleep.. :-)

    • profile image

      Inf 6 years ago

      Thanks! It worked!

    • profile image

      orry 6 years ago

      You saved me here. This was frustrating me for so long!

    • profile image

      Andreas 6 years ago

      Great tip, thanks!

    • profile image

      richard 6 years ago

      Thank You!

      this was a great help. :)

    • profile image

      Vern 6 years ago

      Thank you!

    • profile image

      Sara 6 years ago

      You ROCK! Thank you so much... you saved me hours of time! Sending good karma your way. :) Thanks!

      -Sara

    • profile image

      moo 6 years ago

      Thx for this! :D

    • profile image

      Aymeric 6 years ago

      Thanks! It is nice to find that we are not the only one having the same problem.

    • profile image

      KevinGenius 6 years ago

      Thanks so much.... Needed that

    • samironwebtrack profile image

      samironwebtrack 6 years ago

      nice hub

    • profile image

      kencise 6 years ago

      Use a negative margin-bottom on the moved element. done!

    • profile image

      Dylan 6 years ago

      I stubled across this site with a similar problem however with bookmark links within the page. This solution however does not work for links.

    • profile image

      Ashley 6 years ago

      Thanks!

      This fixed my divs with z-indexs ranging from 0-2, but for some reason it's not working with 2 divs that have z-indexes of 3. Any ideas?

    • profile image

      Maarten 6 years ago

      Great post! Thanks!

    • profile image

      Pedro 7 years ago

      It's important to say that the parent canot be table and child elements. I had to insert a div tag inside my table to make it work.

    • profile image

      alex 7 years ago

      finally! I've been trying to figure this one out and you provided the magic answer -- thank you so much!

    • profile image

      bryan 7 years ago

      this is perfect. thanks for sharing!

    • profile image

      alex 7 years ago

      A very helpful article. I've been spending all day trying to figure this out. Thanks.

    • profile image

      Ryann 7 years ago

      Thank you.. Oh, so very much. :)

    • profile image

      Phil 7 years ago

      This was a great help, thank you Jason

    • profile image

      Alisa 7 years ago

      Hmmmm, for some reason it is doing the same thing as it was before, reserving all the white space. If I take everything out of the encasing div, the div appears over the text on the page...

      html:

      css:

      #homebotpicouter {

      position: relative;

      height: 250px;

      width: 250px;

      float: right;

      }

      #homeboy {

      background-image: url(images/ist2_6253225-young-explorer.png);

      background-repeat: no-repeat;

      position: absolute;

      left: 80px;

      height: 251px;

      width: 251px;

      }

    • profile image

      Ben 7 years ago

      Superb! this article helped me right out.

      Thanks!

    • profile image

      Rafs 7 years ago

      Jason, thanks so much for sharing this article. It took me a lot of research until I reached your site. Your solution is just fantastically simple and smart. Thank you so much for sharing this, you saved me more hours of unsuccessful research.

    • Jason Seale profile image
      Author

      Jason Seale 7 years ago from Stratford, Ontario, Canada

      Pete: It is for hard working people like you that I made this page. I had my own, similar, trouble ... found a solution (very hard for me to find) and wanted to share the joy and leave a solid record for my future self to refer to.

    • profile image

      Pete 7 years ago

      Jason, you are the man!

      This is a "show printable view" type application. I have to position dynamic text over two form images where the 2nd form image can be multiple "continuation" pages (the form is just too complicated to replicate using tables in the time I have available). I'm using @media because this has to be viewable and printable with accuracy. Relative positioning was killing me on having an unknown number of continuation pages. Now, I can use absolute positioning again and each physical page is "relative" for screen and "page-break-before:always" for print. This approach will save me so much time by letting me use identical CSS positioning for the continuation pages with the exception of a constant offset for the screen vertical positioning.

      Thanks again for sharing your solution and to Google for helping me find it!

    • profile image

      Tom 7 years ago

      Awesome, just what I was looking for!

      Much appreciated!

    • profile image

      Francis 7 years ago

      Excellent help

    • profile image

      itsjareds 8 years ago

      Thanks! I will try this when I have time.

      -Jared