A little layout issue

Discussion in 'CSS' started by iCreate, Aug 25, 2005.

0
  1. #1
    Hi,

    In the design (code below) I am trying to get the edging to start right at the top, instead of under the 'Top-Bar' section.

    Also, I am trying to get the height of 'Main-Cell' and the two edges to be 100% of the window, and to extend as content is added, along with the edging.

    I'm still learning CSS (clearly lol) and this is one problem that keeps cropping up and i can't seem to get anywhere with it.

    If anyone can help i'd appreciate it! I can't seem to get around it no matter what I do :/

    Thanks guys!

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Design</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #F1F1F1;
}
.Main-Cell {
background-color: #FFFFFF;
height: 400px;
width: 710px;
float: none;
clear: both;
}
.Border-Left {
height: 400px;
width: 5px;
float: left;
border: 1px solid #E5E5E5;
background-color: #F1F1F1;
}
.Top-Bar {
background-color: #E5E5E5;
height: 80px;
width: 700px;
top: 0px;
display: block;
left: 15px;
right: 15px;
bottom: auto;
}
.Border-Right {
height: 400px;
width: 5px;
float: right;
background-color: #F1F1F1;
border: 1px solid #E5E5E5;
}
</style>
</head>

<body>
<div align="center">
  <div class="Main-Cell">
    <div class="Top-Bar"></div>
    <div class="Border-Right"></div>
    <div class="Border-Left"></div>
  </div>
</div>
</body>
</html>
    PHP:
     
    iCreate, Aug 25, 2005 IP
  2. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can you post a link to a live example.
     
    SEbasic, Aug 25, 2005 IP
  3. iCreate

    iCreate Guest

    Messages:
    62
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    iCreate, Aug 25, 2005 IP
  4. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Apply the edging to the "center" div...
     
    SEbasic, Aug 25, 2005 IP
  5. iCreate

    iCreate Guest

    Messages:
    62
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi,

    Thanks for your help, I got that working and have uploaded that now. Bit weird that even though it has the position information, you still have to baby feed it (to a certain extent) as to where it needs to go.

    Do you know how I can make it stretch 100% vertically (and beyond if the content calls for it). I have found some tutorials online about it but i've never actually had any luck putting them into practice.

    Many thanks,
     
    iCreate, Aug 25, 2005 IP
  6. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #6
    SEbasic, Aug 25, 2005 IP