View Full Version : Help fixing a bad CSS layout.

07-04-2011, 04:12 AM
Hi folks..I'm a CSS newbie and am having some difficulty fixing the very bad layout of my site, which I have chosen to use all absolute positioning for and need to fix. I'm having some trouble understanding how to convert some of it to relative to make the layout/css better and cut down on the number of objects on the page. I've read up on CSS generally, but I am getting tripped up attempting to implement it specifically on my page and would love some help recreating it so I can better understand it.

Here's an example of the page I am talking about:

I know the bottom section with the thumbnails could be better off in relative positioning instead of absolute especially, but once again, I am just having trouble rebuilding it/applying what the layout information sites say.

Also, ideally I would like to fix the layout so the entire page could be centered in the window, as right now the space on the right is too big in most browser windows, and I don't know if switching most of the things away from absolute positioning would fix this, but it is something I hope could be done as well.

Any help with my lack of understanding of how to fix this/implement relative positioning (or an alternate to what I have) would be much, much appreciated.

07-04-2011, 05:27 AM
Sup man.

Whoa. Absolute positioning galore. I'm a CSS noob too so I'll try my best:thumbsup:

I apologize in advance for my way of describing code, I can code it but I can't yet explain it in it's proper terms.

Your CSS needs a total overhaul. IMO a better way to lay out this site would be to set widths and float rather than position.

Set a width for a main container, and insert all divs into it. This layout is simple enough that you do not have to exclude a container such as one for the header or footer for example because the backgrounds repeat infinitely.

Set margin: 0 auto to center the page. Also

Nice clean layout, but I see why it's driving you crazy.

PM if you need help. I wouldn't mind helping you code it.

07-04-2011, 06:04 AM

Position: absolute; should be avoided, because it takes an element out of the natural flow of the page. I would suggest using it for position icons or other small items (like a search icon in a search input).

a fixed layout is normally set to

#page {
width: 960px;
margin: auto;

design wise, your website looks pretty nice.

07-04-2011, 07:13 AM
Sub and Sammy--thanks for both of your responses. I will definitely take you up on your offer Sub--I'll PM you for more advice. I understand the container/ float div stuff, I've read about it on the site you sent me Sammy, I just have a hard time understanding how to implement it specifically on my site. Thanks for clearly explaining to me when exactly to use absolute positioning and when not to--and thanks for the compliment about the design from both of you :)

If anyone else has any advice about this or anything else to share, please feel free--it would be much appreciated.

07-04-2011, 07:14 AM
Hello ,

Please do avoid using of position relative and positio:absolute unnecessarily .

it can be used to add z-index for the element. if we use position absolute and position

relative then it is difficult to postion all the element and may create browser issues.

07-04-2011, 11:25 AM

the layout is very simple to style it. Please let me know if you want same layout or there will be any change.

I will share the complete code and also explain to you for your feature work :)