Jump to content
mechanimal

div box's will not position properly

Recommended Posts

ok basing my code off this w3schools examplehttp://www.w3schools.com/css/tryit.asp?fil...e=trycss_float6My code is prety much the same exept for;my container is limited to 800pxmy side is limited to 195px& my content div is 605(remaining space)For some reason my content div will not sit next to the side div no matter what I do. It always appears under the side div in IE6.Ive tried making the content div smaller, float right & setting the margin larger than the side width but nothing seems to make any diference. even if it is realy small & has heaps of room to go next to it it just wont. It will alwasy be under the side div.Does anyone know what is causing this problem? Ive send my code to many other ppl who have done similar things with their site & they cant see where the problem is either.The onley way I can get it to work is if I copy the example & modify it but I want to write my own code. I cant see what im doing different from the example.Ive even rewritten my code from scratch & double checked everything along the way & still keep getting the same problem.... :) Someone please help me!

Share this post


Link to post
Share on other sites

Welcome to the forums. Please post a link to your work in progress so someone can look at it online.Thanks

Share this post


Link to post
Share on other sites

That isnt my site its the w3schools example I was basing of.I found the problem. The browser includes the borders I set in with the available space but doesnt position the divs acordingly.They get positioned as if the border takes up no space but it takes the border into account when calculating how much room is left.eg.Container width was 800px with 4px borderside was 195px 0px borderso I thought that would leave 605px left for the content div but it actually takes 8px out for the border.So ok then the content will fit if I make it 8px shorter. But the browser will not position the divs acording to the px's taken by the border so it will leave an 8px gap in one side.See what i mean.So the onley way to get it all to sit flush is to have no borders.But I want borders! :) Is there a way to get IE6 to not take the border width out of the available room?oh and I just looked at in firefox & its completely screwed up in that browser!man i got some work ahead of me.

Share this post


Link to post
Share on other sites
Is there a way to get IE6 to not take the border width out of the available room?oh and I just looked at in firefox & its completely screwed up in that browser!man i got some work ahead of me.

Ok, I'm not sure how much help I can be but I will try.a.) I did realize that it wasn't your code and that you were basing it off of the W3 site/tutorials - what I was (and still am) after is a link to what you are building so others can review the code and even play with it to help you out. Are you saying that up to this point you are only trying this in the "Tryit Editor" offered by the tutorial/link you refer to?b.) attempt to blindly help : have you tried adding padding:0px; to any of the divs that do not have that already defined?c.) it IE that is not likely rendering the CSS properly. I use Firefox with the Web Developer extension (among others) which is an immense help. Using the inline CSS editor and the Outline functions might help you track down your issues.Hope this helps.

Share this post


Link to post
Share on other sites

I will also attempt to blindly help by saying try adding a DOCTYPE if there isn't one already. It tends to help this exact type of situations (with borders and such).

Share this post


Link to post
Share on other sites

um.. Ive actually got it the way I want now.I didnt fix the problem but I managed to avoid it :) I was originally having the images choped up into heaps of peices & haveing a seperate image file as the background for each div.I scraped that idea & realised I could make it a lot simpler buy just having the container hold the background image & have the other divs with no background.That way it doesnt matter if everything is sitting flush or not.check this out.But now I have a new problem....In IE6 it looks great & is perfect but for some reason in FirFox everything is compleatly out of wak.Have a look at it in both browsers & see the difference.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×