Click to See Complete Forum and Search --> : CSS Positioning


Pream
02-29-2008, 04:45 AM
I am new to CSS i used to do everything with HTML, and this is my situation, i set my site up well and the format was perfect. I then put a form on the maincol to do some DB testing and after the form went up, my positioning is out of whack. My right col is now to the left of my main col and thats so far right its off the screen and my left col is to the left of the footer.

Can some one help me, it would be greatly appreciated, Thank you.

turboraketti
02-29-2008, 05:58 AM
Code or a link, please, or it will be hard to be of service...

Pream
02-29-2008, 07:28 AM
Yeah, sorry
The file is at this site (http://pream.inntecsolutions.com/467063.html)
Test 3 is the right column
Test 4 is the left Column
Test 5 is the footer

Centauri
02-29-2008, 08:13 AM
Well, it displays as it is coded... You should get in the habit of commenting each closing </div> tag as to which div is being closed so you can keep a track of them - there are one or two extra closing tags. Adoption of an indenting scheme to the code would also help this.

Following your navcontainer, you have the wrapper div. First inside this is the twocols div, which is 20% wide and floated right. Inside this is the maincol div which is 80% width - 80% of the 20% that is.. Your form elements are then way too wide (the inputs at 100 characters are too wide anyway - 30 to 35 would be enough) and hang out the right of the site.

Next thing inside the wrapper is the rightcol dv, which being floated right, floats to the left side of twocols. The leftcol div is outside the wrapper div, so it is at the bottom, floated left.

I would suggest the div order inside wrapper should be leftcol floated left first, followed by maincol floated left, followed by rightcol floated left. A negative right margin on rightcol may prevent IE adding up 10% + 80% +10% = 101%. The footer can then come after wrapper closes.

You are also using a framset doctype when not using frames, and are using xhtml tag closing ( /> ) whithout declaring xhtml doctype.