absolute position question

[rawlin]

Hi, I did for a while run a word press blog http://blog.claesdesign.com for fun, it's been inactive for a while now. On this blog when I set absolute position on something it adapted to the window size, for example when I placed the logo with absolute position it followed with the resizing of the window instead of being in place and get out of order.The problem that I have with my own page is that I can get a nice layout with absolute position but it looks like crap as soon as the window size changes. The page I am building is a centered page and what I am currently trying to accomplish is Putting a div next to the centered div with the centered div still centered. I have tried a lot of stuff without finding a solution, when just placing them next to each other both get centered and the div that I would want in middle is moved to the left. but not the other one and also some images ontop in a couple of places. Is there a way to solve this and get them to be in place even if the size change? http://www.svenskamagic.com/news/ seems to have accomplished something similar.I am also trying to put the logo on top on a specific spot and keep it in place.I am new to CSS and the wordpress blog is very advanced and I can't figure out where the code that makes it adapt are.

[ShadowMage]

I'm not certain that absolute positioning is what you want to use. There are situations where it's acceptable (even necessary) and maybe this is one of those situations, but for most things you don't need it. I can certainly think of a way to make it work for what I think you're trying to accomplish, but it's best to avoid positioning if possible.Can you post a screen shot of the layout you're trying to achieve? Or if not, explain it in detail?

[rawlin]

I'm not certain that absolute positioning is what you want to use. There are situations where it's acceptable (even necessary) and maybe this is one of those situations, but for most things you don't need it. I can certainly think of a way to make it work for what I think you're trying to accomplish, but it's best to avoid positioning if possible.Can you post a screen shot of the layout you're trying to achieve? Or if not, explain it in detail?

Hi, thanks for your replyI am new to CSS so ofcourse I am open to suggestions, it's just that on the wordpress blog it was very easy to to get stuff where I wanted them, just by putting in the position.Here is a image of what I am trying to accomplishLayout imageEdit: The center div is supposed to stay in center while the extra div is next to the center div. I have tried a lot, but I am sure that I am missing something on how to do this. I mostly end up with the extra div getting on top of the center div when resizing or that the center div is outside of the screen when the window is smaller.

[dsonesuk]

the outer container div should have position: relative; the extra div should have position:absolute; and placed anywhere within the outer div, but not within another div with position:relative.then use right: -200px; (width of extra div) top:0; to force it outside its parent outer div boundary.

[ShadowMage]

Ok, the only element you'll need absolute positioning for is the extra div. So just follow dsonesuk's advice, and give the outer div (the one with the light blue border in your image) position: relative and place the extra div inside of it with position: absolute. So you'd end up with something like this:

CSS:.container {   position: relative;   width: 500px; /*or any value you want*/   margin: 0px auto; /*this centers the div*/}#extra_div {   position: absolute;   left: 500px /*or whatever the width of .container*/}....HTML:<div class='container'>   <div id='extra_div'>Stuff</div>   ....Rest of content....</div>

[rawlin]

Thanks a lot I am gonna try this when I get home.

[rawlin]

Thanks for the help, I feel kinda dumb though :S I can't solve it even with the help >_< also I got another problem, the page has started to fill outside at the bottom instead of expanding, I think it is better to link the ugly page http://www.claesdesign.com/gamecraft/index.html

[dsonesuk]

there no such style as Owerflow: visible, hidden;should be overflow:hidden;overflow:auto;overflow:visible;overflow:scroll;or overflow-y: hidden; which set overflow hidden to vertical, top and bottom edges.overflow:x: hidden; which set overflow hidden to horizontal, left and right edgesyou can't use two values separated by comma.you also have magin-top: 0em; in body selectorshould be margin-top:0;

[ShadowMage]

you also have magin-top: 0em; in body selectorshould be margin-top:0;

That shouldn't make any difference.0=0px=0pt=0%=0em.....0 is 0 no matter the unit.

[dsonesuk]

That shouldn't make any difference.0=0px=0pt=0%=0em.....0 is 0 no matter the unit.

I know that! (teach grandmother to ###### eggs..comes to mind) I was referring to MAGIN:Oh! so what exactly does magin:0em do then? look before you leap.

[ShadowMage]

I know that! (teach grandmother to ###### eggs..comes to mind) I was referring to MAGIN:Oh! so what exactly does magin:0em do then? look before you leap.

:) Oops. Sorry, dsonesuk! I should indeed look before I leap. At a quick glance the only difference I noticed was the units.....

[rawlin]

Nice did I meantion I ###### at this :)I fixed the spelling errors you guys found and thanks a lot for taking your time to check through that havoc code :)It did fix the part where the text and images started overflowing but now I got a scrollbar instead, is there a simple retard-proof way to get the page to simply expand as I add more content?

[dsonesuk]

try without height:100% and add oveflow:hidden in outerdiv#outer {background-color:white;border-bottom:0 none;border-top:0 none;margin:0 auto;padding:0;position:relative;width:1024px;overflow:hidden;}

[rawlin]

Thanks you saved me that worked. I have followed a lot of tutorials in css but it still is a mysterie to me how it works, to me setting outer div to overflow: hidden; sounded like it would hide the entire page but instead it showed all. Maybe it is like quantum physics, I don't understand that either :)I'm gonna see if I can solve the extra div part nowMany thanks for all the help

[ShadowMage]

overflow only applies to the content within that element. Anything that's not inside the opening and closing tags will not be affected by any overflow setting.