Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts

    cant get containers to fill vertical height grrrrrrrr

    I have been using tables for years and have recently been trying to teach myself site structure with css, which i have previously only used for decoration.

    I am getting there probs in a complete backward fashion but I am having some serious vertical problems, my main containers just stop and dont go all the way to the bottom of the page?

    you can see what i mean by visiting

    www.actioncomputing.co.uk/index-css-rebuild.html

    and my code is below.

    All help is once again very appreciated.

    Code:
    @charset "utf-8";
    
    * {margin: 0; padding: 0; border: 0; outline: 0;}
    html, body {font:Tahoma; font-size:14px; background: #FC6 url(http://www.actioncomputing.co.uk/images/actioncomputing_01try.jpg) repeat-x; height:100%; min-height:100%;}
    hr {margin-top:5px; margin-bottom:5px; width: 100%; height: 2px; color: blue;}
    
    
    .header {height: 265px; width: 906px; margin: 0 0 0 47px; background: #f00;}
    .Container{margin-left: auto; margin-right: auto; width:1000px; height:100%; min-height:100%; text-align: left; background-color:#FFFFFF;}
    .Containerleftborder{width:1000px; height:100%; min-height:100%; background: url(http://www.actioncomputing.co.uk/images/actioncomputing_02.jpg) repeat-x left top;  }
    .Containerrightborder{width:1000px; height:100%; min-height:100%; background: url(http://www.actioncomputing.co.uk/images/actioncomputing2_07.jpg) no-repeat right top; }
    .content1container{width:906px; margin: 0 0 0 47px; height:100%; min-height:100%; background-color:#ffffff; position:relative; }
    .contentleft{width:590px; height:100%; min-height:100%;  background:#ffffff; float:left; margin-left:15px;  }
    .contentright{width:291px; height:100%; min-height:100%; background:#ffffff; float:right;}
    .leftcontent-tops{width:590px; height:41px; background-image:url(images/sectiontop.jpg); float:left;}
    .leftcontent-bottom{width:560px; padding-left:10px; padding-right:20px;  background-image:url(images/sectionback.jpg); background-repeat:no-repeat; float:left; margin-bottom:20px; }
    .rightcontent-tops{width:253px; height:41px; background-image:url(images/sectiontop.jpg); float:right; }
    .rightcontent-bottom{width:233px;  background-color:#AAC7E7; padding-left:10px; padding-right:10px; float:right; margin-bottom:20px;  }
    
    .insideleftborder{width:9px; height:100%; min-height:100%;  background-color:#6DA7E6; position:absolute; top:0px; left:0px;}
    .insiderightborder{width:9px; height:100%; min-height:100%;  background-color:#6DA7E6; position:absolute; top:0px; left:897px;}
    
    .Topleftmenu{ background-image:url(images/actioncomputing_03.jpg); width:274px; height:40px; float:left; }
    .topmenuright{background-image:url(images/actioncomputing_04.jpg); width:632px; height:40px; float:left;}
    .menumiddle{background-image:url(images/actioncomputing_06.jpg); clear:both; width:906px; height:84px; float:left;}
    .menubottomimage{background-image: url(images/newcssbottommenuleft.jpg); width:284px; height:141px; float:left;}
    .menubottomright{background-image: url(images/newcssbottommenuright.jpg); width:622px; height:40px; float:left;}
    
    #centralisemenu{ text-align:center;}
    
    	 a.menu:link {color: White; text-decoration:none; font-weight:bolder; font-size:20px !important }
         a.menu:hover {color: Black !important ; text-decoration: underline; font-weight:bolder;  font-size:20px !important  }
    	 a.menu:link {color: White; text-decoration:none; font-weight:bolder;  font-size:20px !important }
    	 a.menu:visited {color: White; text-decoration:none; font-weight:bolder;  font-size:20px !important }


    HTML CODE

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="new-css-rebuild.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div class="Container">
    <div class="Containerleftborder">
    <div class="Containerrightborder">
    
    
    <div class="header">
    <div class="Topleftmenu">
    <p style="text-align:center; padding-top:7px;">
    <a class="menu" href="#">Home |</a> <a class="menu"  href="#">Contact |</a> <a class="menu"  href="#">About |</a></p>
    
    </div>
    <div class="topmenuright"></div>
    <div class="menumiddle"></div>
    <div class="menubottomimage"></div>
    <div class="menubottomright"></div>
    <div class="Flashtop"><img src="images/flashback.jpg"></div></div>
    
    
    
    <div class="content1container">
    <div class="contentleft">
    <div class="insideleftborder"></div>
    <div class="leftcontent-tops"></div>
    <div class="leftcontent-bottom"><p>
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <p>  </p>
    </div>
    <div class="leftcontent-tops"></div>
    <div class="leftcontent-bottom"><p>
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p></div></p>
    </div>
    <div class="contentright">
    <div class="insiderightborder"></div>
    <div class="rightcontent-tops"></div>
    <div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
              duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <div class="rightcontent-tops"></div>
    <div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <div class="rightcontent-tops"></div>
    <div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    any help is greatly appreciated. :-)

  • #2
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts
    I see a few problems here.

    1. The blue border that wraps around all of your content is overlapped by your action computing logo. I'm not sure if that is intentional or not.

    2. The shadow on your background only goes about halfway down the screen. The basic setup of your body bg and then the shadow or outerglow appearance you are giving to your content is a little confusing so I am not sure what you are going for.

    3. Your content area is cutting off before the right column even ends. To get that to stop try putting
    Code:
    <p style="float:none;clear:both;"></p>
    before the closing of your contentcontainer div.

    4. You have not chosen to use and Div Id's only Div Classes .. why is that?

    I'm sorry I couldn't answer more of your questions but I am unclear on alot of the coding here so if you could clarify I may be able to help you more.

    Thanks

    Kristin


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •