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 4 of 4

Thread: div css

  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    div css

    ok i have this div inside my middle div, im trying to align this div/table/ to the bottom of the middle div, it starts out correct on the left but scrolls all the way over to the right side of the page, i can correct it if i change the width but isnt there another way of doing this?

    css code:
    Code:
    #bottomheader { 
       display: table; 
       background-color: #060607; 
       width: 100%; 
       height: 20px;
       position: absolute;
       bottom: 0; 
    }
    html code:
    Code:
      <div id="middle">
      <div class="column-in">  
      middle
      </div>
      <div id="bottomheader"></div>
      </div>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,354
    Thanks
    23
    Thanked 618 Times in 617 Posts
    Setting the width in #bottomheader will give you a fixed width. Another way is to remove the width and let your content dictate the width. These are the only ways i know of.

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope didnt seem to work unless i adjust the width to a fixed setting. This is my code, the div that is messing up is defined as 'specialtbl'

    CSS
    Code:
    * { font-family: verdana, tahoma, helvetica, geneva, sans-serif; font-size: 11px; }
    
    html, body {
      margin: 0 0 0 5px; 
      height: 100%; 
    }
    
    .column-in {
      margin: 0; 
      padding: 5px;
    }
    
    .cleaner {
      clear:both;
      height:1px;
      font-size:1px;
      border:none;
      margin:0; 
      padding:0;
      background:transparent;
      display:none;
    }
    
    
    /* divs */
    
    #container {
      width: 600px;
      height: 100%; 
      padding: 0;
      display: table;
    }
    
    #row {
      display: table-row;
    }
    
    #left, #right {
      width: 150px;
      background-color: #dedfdf;
      display: table-cell;
    }
    
    #middle {
      width: 300px;
      background-color: #f7f7f7;
      display: table-cell;
    }
    
    #header {
      padding: 5px;
      width: 100%;
      background-color: #060607;
      color: #fff;
      display: table;
    }
    
    
    #specialtbl {
    
      width: 100%;
      height: 20px;
      background-color: #060607;
      display: table;
      position: absolute;
      bottom: 0;
    
    }
    
    
    /* div links */
    
    .header a, a:link, a:visited, a:hover, a:active { color: #b9c6d7; }
    
    
    /* IE only */
    
    * html #container {
      height: 100%;
    }
    * html #left {
      float:left;
    }
    * html #right {
      float:right;
    }
    * html #middle {
      float: left;
      height: 1%;
    }
    HTML
    Code:
    <body>
    
     <div id="container">
      <div id="row">
    
      <div id="left">
      <div class="column-in">
      left
      </div>
      </div>
    
      <div id="middle">
      <div id="header">&nbsp;&nbsp;&nbsp;&nbsp;<a class="header" href="http://www.quotejerk.com">quotejerk.com</a>&nbsp;> home page</div>
      <div class="column-in">  
      middle
      </div>
      <div id="specialtbl"></div>
      </div>
    
      <div id="right">
      <div class="column-in">
      right
      </div>
      </div>
    
      <div class="cleaner">&nbsp;</div>
    
      </div>
     </div>
    
    </body>
    Last edited by hwnd; 04-16-2011 at 08:42 PM.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,354
    Thanks
    23
    Thanked 618 Times in 617 Posts
    Quote Originally Posted by hwnd View Post
    Nope didnt seem to work unless i adjust the width to a fixed setting.
    Yeah! That's what I said. Remove width: 100%; and replace it with width: 300px;

    Or do you the div placed some where else? Or centered in the middle div? Where and how wide do you want it???


  •  

    Posting Permissions

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