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
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post

    Table height stretching past 100%

    I have got a table which should fill the window. But for some reason the contents of one of the cell's is stretching it past that...

    See Image

    Code:
    <table class="rcontainer" border="1">
    	<tr>
        	     <td class="back_num">
                     Top menu bar
                 </td>
            </td>
                  <td rowspan="2" class="sidebar">
            	  side bar, spans height of page
                  </td>
        </tr>
    	<tr>
        	      <td class="img_con">
            	  This is the cell that is causing the table to stretch. usually it is filled with images, removed all code for simplicity sake. 
    	      </td>
        </tr>
    </table>
    CSS
    Code:
    .rcontainer {
    	margin-left:4em;
    	position:absolute;
    	padding:0px;
    	height:100%;
    }
    .sidebar {
    	width:20%;
    	height:100%;
    	background-color:#333333;
    	text-align:center;
    	border-left:solid;
    	border-left-color:#4a4a4a;
    }
    .sidebar div { padding:4px; margin:5px 0px; }
    .sidebar div:hover { background-color:#4a4a4a; }
    .sidebar span { font-size:24px; margin-bottom:2em; display:block; }
    .sidebar img { margin:8px; cursor:pointer; }
    
    .back {
    	margin-top:1em;
    	padding:5px;
    	font-size:24px;	
    	cursor:pointer;
    	float:left;
    }
    .back_num {
    	height:10px;
    }
    .back:hover { background-color:#333333; }
    .back img { padding:5px; margin-right: 30px; vertical-align:middle; }
    .back span { padding-left:30px; }
    
    .img_con {
    	vertical-align:top;
    	width:80%;
    	overflow:scroll;
    }
    Will I be best re-coding the layout of this page using div's? I saw a table the best option in this situation but it isn't working out...
    Last edited by martynball; 06-28-2013 at 04:09 AM.

  • #2
    New Coder
    Join Date
    Jun 2013
    Posts
    34
    Thanks
    1
    Thanked 2 Times in 2 Posts
    My only suggestion to your problem is that don't use tables. Alternatively, div tag can easily be used to create cells. Use display property of to create rows and columns. For example,
    <div class="table">
    <div class="tblrow">
    <div class="tblcolmn">
    </div>
    <div class="tblcolmn">
    </div>
    </div>
    </div>

    CSS
    .table
    {
    float: left;
    display:Table;
    }
    .tblrow
    {
    float:left;
    display:TableRow;
    }
    .tblcolmn
    {
    float: left;
    display:TableColoumn;
    }

  • Users who have thanked AnnaMaria for this post:

    martynball (06-27-2013)

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,084
    Thanks
    15
    Thanked 245 Times in 245 Posts
    You haven't set a width on the table itself. The table is the container for the td, so the td doesn't know what it is supposed to be 80% of without a table width. If you were making a calender you would set the table at width:100% and the tds at 14%.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    martynball (06-27-2013)

  • #4
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    Edit, fixed it now. Thanks
    Last edited by martynball; 06-28-2013 at 04:08 AM.


  •  

    Posting Permissions

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