Jump to content

Text alignment in <div> screwing with me.

Pikachu2000

By Pikachu2000
in CSS Help

 Share

Recommended Posts

Pikachu2000 Prolific Member

Pikachu2000

Posted
Posted

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
Share on other sites
Pikachu2000 Prolific Member

Pikachu2000

Posted
  • Author
Posted

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
Share on other sites
  • 2 weeks later...
mds1256 Advanced Member

mds1256

Posted
Posted

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
Share on other sites
mds1256 Advanced Member

mds1256

Posted
Posted

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
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.