Hi all,

 

I have just finished coding the home page of my first personal project, everything validates 100% but I have just noticed that when resizing or restoring down the browser window it pushes all the content out of position. I have floated content, images etc. Is there something I am missing? how do I retain the position of all my elements when restoring down the window size?

 

If you require the html and css I can provide

 

Thanks

All depends on how it's been coded. Also, you may want to learn about the new fad - responsive web design.

Edited February 12, 201214 yr by andyl

All depends on how it's been coded. Also, you may want to learn about the new fad - responsive web design.

 

Would you like to see the code? I also had a look at the link you provided, but it refers to css3, i'm using css2.

have solved the issue, by using relative positioning in the wrapper div and specifying a width, seems to keep everything in it's place.

 

Thanks all the same

You shouldn't be using absolute positioning for layout, but ok..!

You shouldn't be using absolute positioning for layout, but ok..!

 

 

I wasn't, it was positioned relative, not absolute which is completly different is it not? I positioned my wrapper div relative and the content stopped shifting, I have used this before in a tutorial from nettuts.com I think it was.

I've only ever used position:relative; for a wrapper of elements using position:absolute;

 

Just me?

I've only ever used position:relative; for a wrapper of elements using position:absolute;

 

Just me?

 

 

Do you mean you would only use it when you are positioning elements inside the wrapping div as absolute? If so then I haven't done that, the content is floated left and right and has no absolute positioning within the relative positioned wrapping div. If this is the wrong way to do it then I need to look at some other way of positioning my content with the floats or substitute the float for absolute positioning? I know that what I have done seems to have fixed the issue but I want to make sure that my code is free of any bad habits and is done with good practice.

 

If I switch from floating the content to positioning absolute though, then i'm side-stepping the issue and when it comes to using float in later designs I'm not going to get it right. I tried floating the content after watching a couple of video tutorials but it didn't turn out as I intended which resulted in me changing the content round in order to create the desired effect. What would you recommend?

I'm not trying to insinuate that your code is poor - I'm just confused as to how adding position:relative; fixed this!

 

Floats for layout = good. Absolute positioning (in general) = bad. Absolute is for sliders, widgets, etc..

 

Have you got a link?

Ha ha ha...I didn't think you were insulting my code, I only meant that when ever write code I want to ensure that my code is written well and that I follow best practice.

 

I actually thought about this for a while after my last reply and run a few options round in my head. The result was that I was determined as ever to get this right and solve the problem. When I got home from work I moved all the html back to the way it was first laid out, then started moving the css to match the div's. It was then that I noticed something didn't quite add up, a simple mistake that took literally 2 mins to put right. I was floating what I suppose would be the child elements within the wrapping div rather than the wrapping div itself.

 

I took away the relative positioning and restored the window down and everything was fine.

 

This is my first real design which is just a personal page meant to test my code and is still a work in progress. I do intend to make it live at some point, but for now it's purely to test myself.

 

Thanks for your help, you actually made me question my use of relative positioning to fix the problem and look at it from another perspective

No problem, glad you've got it worked out. You only need to use relative positioning if you're making a slider or something similar which uses absolute positioning for child elements.

 

Good to see someone actually listening and creating solutions for themselves, makes somewhat of a change round here