supergrame Posted October 26, 2009 Share Posted October 26, 2009 OK well i know the basic css. I'm just getting a really bad headache from this ie and Firefox compatibility, also my margin is 10px all the way around all my divs yet the two floating divs seem to have 15-20px margin GRRRR. any way here is the code I'm working with I have keep d it really basic. first up we have the not so easy to understand CSS body , html { margin:0; padding:0; } #container { width: 800px ; margin:0 auto; } #header { text-align:center; border:double; height:50px; margin:10px; } #links { text-align:center; border:double; height:25px; margin:10px; } #advertisment { float:left; margin:10px; width:150px; border:double; } #content { float:right; width:580px; border:double; margin:10px; } #footer { clear:both; border:double; margin:10px; } Now for the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><link href="style.css" rel="stylesheet" type="text/css"></head> <title></title> <body> <div id="container"> <div id="header">SMOKING</div> <div id="links"><a href="index.html">Home</a> | <a href="contact.html">Contact</a> | <a href="about.html">About</a></div> <div id="advertisment">THIS IS THE ADVERTISMENT</div> <div id="content">THIS IS THE CONTENT</div> <div id="footer">THIS IS THE FOOTER</div> </div> </body> </html> I think to make this easeir for anyone that is going to help me Ill add screenies :) [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
supergrame Posted October 26, 2009 Author Share Posted October 26, 2009 ok i learnt that i can set my container div to position:relative and the divs inside the container div to position:absolute.. but i also read there is a major flaw with this method... if the text in the divs are two big or the font is to big etc then it wont be visible so the only way to do this would be to use the float method witch im currently using. but that's not working to how I want it as you can see above Please correct me if I'm getting this wrong. Quote Link to comment Share on other sites More sharing options...
supergrame Posted October 26, 2009 Author Share Posted October 26, 2009 ok well no replys yet.. thats ok.. i think i have goten a lil further with my problem here is the new css code body , html { margin:0; padding:0; } #container { width: 800px ; margin:0 auto; } #header { text-align:center; border-style:solid; border-width:1px; height:50px; margin:10px; } #links { text-align:center; border-style:solid; border-width:1px; height:25px; margin:10px; } #advertisment { float:left; width:184px; border-style:solid; border-width:1px; margin-left:5px; } #content { margin-right:5px; float:right; width:584px; border-style:solid; border-width:1px; } #footer { text-align:center; clear:both; border-style:solid; border-width:1px; margin:10px; } it looks pretty bang on in IE. the problem now lies with FF there is no 10px margin between the bottom of the advertisement div and the top of the footer but it looks fine in IE.. man this css is a pain in the ass. But i will be persistent as i want to mover away from tables as table based layouts are getting extinct. Quote Link to comment Share on other sites More sharing options...
haku Posted October 26, 2009 Share Posted October 26, 2009 First: you will save yourself a lot of headaches by making your site look proper in FF first, then adjusting it for IE. Why? Because all other browsers (Safari, Chrome, Opera etc) render code nearly the same as FF. IE goes out on its own though and does things entirely differently. It makes for a lot of headaches (which you are finding out now!) Second - for any floated elements with a margin on the same side as the direction its floating, set: display:inline; to the element, and it will prevent IE6 (which I assume you are using) from doubling the margin on you. This is called the IE6 double margin bug. Finally, don't apply left or right margins/paddings on any element that has a fixed width. Don't apply top or bottom margins/paddings on any element that has a fixed height. Why? IE renders the combinations differently that other browsers, meaning that they will be different sizes in different browsers. The solution? Apply a fixed width/height on a container, then put another div inside that container and apply your paddings/margins to that. This way you never have a combination of a width/height and margins/paddings on any element, and you won't end up with these discrepancies between browsers. And for a trick - if you really can't get it to work, google 'conditional comments' and work from there. Quote Link to comment Share on other sites More sharing options...
Dorky Posted October 26, 2009 Share Posted October 26, 2009 put this as the first entry in your css * { margin: 0px; } and go from there. Quote Link to comment Share on other sites More sharing options...
supergrame Posted October 26, 2009 Author Share Posted October 26, 2009 do you think i should just center my main div and then position every other div inside my container div as absolute? that would work a lot better as far as my knowledge goes. or is there bugs that come with this style of layout as well (I HATE IE) Quote Link to comment Share on other sites More sharing options...
haku Posted October 26, 2009 Share Posted October 26, 2009 No, I don't think you should do that at all. Laying out your site with absolute positioning only ends up bringing on headaches. Quote Link to comment Share on other sites More sharing options...
supergrame Posted October 26, 2009 Author Share Posted October 26, 2009 ok. so with your theory of not applying a margin or padding with elements with fixed width/height... how would i center my container div.. at the moment this is what i have #container { width: 800px; height:1200px; margin:0 auto; } the width seems to work fine but the height has no effect. this was the way I got taught to center a container div from the http://www.w3schools.com website Quote Link to comment Share on other sites More sharing options...
haku Posted October 26, 2009 Share Posted October 26, 2009 The horizontal centering is fine. You can use auto left/right margins on an element with a fixed width with no problems. This is cross browser compatible. Quote Link to comment Share on other sites More sharing options...
supergrame Posted October 26, 2009 Author Share Posted October 26, 2009 ok.. thank you im starting to get the picture. would you use the float method for putting 2 divs beside each other horizontally. div1 { float:left; } div2 { float:right; } I've just being sifting through pages and pages of css tutorials and there is no exact method for anything. does this confuse anyone else? its like using beta software and patching it or something along those lines. Quote Link to comment Share on other sites More sharing options...
haku Posted October 26, 2009 Share Posted October 26, 2009 Yes, it confuses everyone. It takes time and practice to figure everything out and when to use what method. Usually I will float both items left to align them horizontally, but on occasion I will float the right one right. I usually only do that if I need to right align the right element along a gridline. Quote Link to comment Share on other sites More sharing options...
supergrame Posted October 27, 2009 Author Share Posted October 27, 2009 thank you to everyone that helped me I am starting to get my brain around this stuff, kinda fun after a while hehe Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.