Pikachu2000 Posted September 25, 2010 Share Posted September 25, 2010 I finally decided it was time for me to move into the 1990s and start using more CSS (something I'm historically not so good with). In fact, I've already managed to crater a layout. It's simple, with a header div, a left nav div, a main div, a right nav div, and a footer div. The problem I'm against is in the footer div. I can't figure out why the text crams itself all the way to the right. The html and css both pass validation, so there's obviously something I did wrong or misused, or whatever. I tested it in both FF 3.6 and Safari 5. stylesheet div.container { border:2px solid blue; margin-left:auto; margin-right:auto; background-color:silver; width:802px; height:100%; } div.header { position:relative; top:0; left:0; background-color:#B0C4DE; width:800px; height:120px; } div.left { position:relative; top:0; left:0; background-color:#B0C4DE; width:120px; height:600px; } div.main { position:relative; top:-600px; left:120px; background-color:white; float:left; width:560px; height:600px; } div.right { position:relative; background-color:#B0C4DE; top:-600px; left:120px; float:left; width:120px; height:600px; } div.footer { border:1px solid black; text-align:left; position:relative; top:0px; bottom:0px; /*background-color:#B0C4DE;*/ height:79px; width:800px; } html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" href="include/style.css" type="text/css"> <title>My Goggie</title> </head> <body> <div class="container"> <div class="header">Header</div> <div class="left">Left</div> <div class="main">Main</div> <div class="right">Right</div> <div class="footer">What the hell is going on with this damn footer?</div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/214395-text-alignment-in-screwing-with-me/ Share on other sites More sharing options...
Pikachu2000 Posted September 26, 2010 Author Share Posted September 26, 2010 I managed to jack with it enough to get the text aligned in the right place, but, since I'm essentially clueless with CSS, I now have a ton of empty space beneath the container <div>. Perhaps someone can explain what I need to do to get rid of it. The edited stylesheet is below. div.container { border:2px solid blue; margin-left:auto; margin-right:auto; background-color:silver; width:802px; height:802px; } div.header { background-color:#B0C4DE; width:800px; height:120px; } div.left { background-color:#B0C4DE; width:120px; height:600px; } div.main { position:relative; top:-600px; left:120px; background-color:white; width:560px; height:600px; } div.right { position:relative; left:680px; top:-1200px; background-color:#B0C4DE; width:120px; height:600px; } div.footer { border:0px solid black; text-align:left; position:relative; top:-1198px; bottom:0px; background-color:#B0C4DE; height:80px; width:800px; } Link to comment https://forums.phpfreaks.com/topic/214395-text-alignment-in-screwing-with-me/#findComment-1115747 Share on other sites More sharing options...
mds1256 Posted October 7, 2010 Share Posted October 7, 2010 think you need to learn the box model CSS #container{position:relative;border:2px solid blue;margin: 0 auto 0 auto;background-color:silver;height:800px;width:800px;}#header{background-color:#B0C4DE;height:120px;margin:0;}#left{float:left;background-color:#B0C4DE;width:120px;height:600px;}#main{float:left;background-color:white;width:560px;height:600px;}#right{float:right;background-color:#B0C4DE;width:120px;height:600px;}#footer{clear:both;border:1px solid black;height:79px;width:800px;} HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" ><link rel="stylesheet" href="style.css" type="text/css"><title>My Goggie</title></head><body><div id="container"><div id="header">Header</div><div id="left">Left</div><div id="main">Main</div><div id="right">Right</div><div id="footer">footer</div></div></body></html> Link to comment https://forums.phpfreaks.com/topic/214395-text-alignment-in-screwing-with-me/#findComment-1119725 Share on other sites More sharing options...
Pikachu2000 Posted October 7, 2010 Author Share Posted October 7, 2010 I need to learn something, that much is clear Link to comment https://forums.phpfreaks.com/topic/214395-text-alignment-in-screwing-with-me/#findComment-1119752 Share on other sites More sharing options...
mds1256 Posted October 7, 2010 Share Posted October 7, 2010 Dont worry I was totally useless at CSS until a few months ago when I eventually understood the box model and now can quickly setup a layout... The code above is just a starting point and was quickly knocked up to show you the principles. If you need the main content box to expand down etc you will have to change the height of the container to 100% and so on. It was just to show you how it can be achieved. The hardest part about CSS is learning all the different browser hacks you need to do!, its a nightmare and im still learning this as im going. Link to comment https://forums.phpfreaks.com/topic/214395-text-alignment-in-screwing-with-me/#findComment-1119753 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.