1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Problem: 3 Columns in IE and Header

Discussion in 'CSS' started by radical5, Dec 12, 2005.

0
  1. #1
    I've checked my CSS and it validates but I'm having two problems.

    The First is that IE doesn't put the header in the right location even though it's using aboslute position. The othe problem is that the middle column in both IE and firefox is not positioned correctly. I want it aligned with the two other columns. I'm a bit new to the whole CSS thing, so if you can just point me in the general direction I'd appreciate it. I've also put my html and CSS below.

    body { 
background-color: #D4DAE3; 
}
div.header{
background-color: #C62908;
color: #F9FDE8;
height: 40px;
font-size: 38px;
position: absolute;
top: 10px;
width: 100%;
}
div.header2{
background-color: #364D5A;
color: #F9FDE8;
position: absolute;
top: 50px;
height: 10px;
width: 100%;
}
div.left{
position: absolute;
left: 10px;
top: 80px;
width: 200px; 
background-color: #F9FDE8;
}
div.center{
margin-left: 220px;
margin-right: 220px; 
top: 80px;
background-color: #F9FDE8;

}
div.right{
position: absolute;
right: 10px;
top: 80px;
width: 200px; 
background-color: #F9FDE8;
}

body:last-child p.pheader {
	position:absolute;
	top:-35px;
	font-size: 38px;
}
    Code (markup):
    and the HTML

    <html><head><title>Untitled Document</title>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="dealstyles.css" rel="stylesheet" type="text/css">
</head><body>
<div class="header"> 
  <p class="pheader">Deallocator.com</p>
</div>
<div class="header2"> </div>
<div class="left">
  <p id="header">Categories</p>

  <p id="categories">Technology <br>
    Home Furnishings <br>
    Digital Cameras</p>
</div>
<div class="center"><p>This is just a test</p>
  <p>"sfdsdfsdf</p>
  <p>sdfsd</p>

  <p>fsdf</p>
  <p>sdf</p>
  <p>sad</p>
  <p>fsadf</p>
  <p>sadf</p>
</div>
<div class="right">

  <p>This is the right column</p>
</div>
</body></html>
    Code (markup):
    If you see anything else that could cause problems as well, I would appreciate you pointing that out. Thank you in advance and I appreciate any and all replies.
     
    radical5, Dec 12, 2005 IP
  2. mani_

    mani_ Banned

    Messages:
    46
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    u did not use the left:?? or right:?? in your header class... set the position of left or right when you are using absolute position of a div.

    
div.header{
position: absolute;
top: 10px;
left:10px;
width: 100%;
background-color: #C62908;
color: #F9FDE8;
height: 40px;
font-size: 38px;
}
    Code (markup):
     
    mani_, Dec 12, 2005 IP
  3. radical5

    radical5 Guest

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for such a speedy reply. It worked like a charm. Can anyone recommend a book that will teach me CSS instead of just giving me syntax. What I mean by that is a book that will say: If you do this, you can expect this to happen...watch out for this, and although it validates, you shouldn't do things this way.

    Anyone have any ideas on the three column issue?
     
    radical5, Dec 12, 2005 IP
  4. mani_

    mani_ Banned

    Messages:
    46
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    mani_, Dec 12, 2005 IP
  5. radical5

    radical5 Guest

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    For the solution to the problem about the third column:

    overflow: hidden; -- Needs to be added to the middle column and then adjust
    margin-top: 0px to reflect the value needed

    http://www.quirksmode.org/css/overflow.html explains the property.

    Thank you for your help.
     
    radical5, Dec 12, 2005 IP