Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 226
  • Last Modified:

cant increase container size

I am using master pages with asp.net.
I have a layout problem as the content area which is the main page area has an unfixed size.
If the content area has a size greater than left area then the left area wont also increase in size.

How do i change the left area container to increase in height if the container next to it does (content)? I have dynamic  height size pages.
<style  type ="text/css" >
     body { 
    margin: 0px;
    padding: 0px;
       background-color :#e8feff;
         width:1100px;
} 
/*to float an image or area you change the normal webflow and objects can appear to the sid eof it on the same level.
you must clear float to stop using it eg clear: left;*/
 
.top { 
        height : 200px;
        border  :1px outset  black;
        background-color :#850d0d;
        width:1100px;
  
        }
 
   
.top2 { 
        
        border  :1px outset  black;
      background-color :black;
        width:1100px;
       
}     
 
.left  
{        float:left; 
        border  :1px outset  black;
        /*background-color :#000000;*/
        background-color :#850d0d;
        
        width:180px;
         height:900px;
                  }
        
.content {  
        float:left;
       
        background-color :black;
        width:915px;
       /* height:900px;*/
        border  :1px outset  black;
        
          }   
             
 
  .footer{  clear:left;
        border  :1px outset  green;
         background-color :black;
        width:1100px;
        font-size:10px;
    	font-family:verdana;
    	font-weight:bold;
    	color:yellow;
        }

Open in new window

0
jagguy
Asked:
jagguy
1 Solution
 
myderrickCommented:
You will have to put all the divs (left and content) in on div container and set a specific height for it. You can then set the left and content height to 100%
eg

#wrap { position: relative; height: 900px; } etc

Now set the left and content div to height 100%.

see the sample codes below.

You can read more from here:
http://www.positioniseverything.net/articles/onetruelayout/equalheight

Good luck

MD
<!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>
  <title>Title here</title>
      <style type="text/css" >
     
#wrap { position:relative; height:900px; width:1100px}
 
.left  
{        float:left; 
        border  :1px outset  black;
        background-color :#850d0d;
        width:180px;
        height:100%;
                  }
  
.content {  
        float:left;
        background-color :black;
        width:915px;
       height:100%;
        border  :1px outset  black;
        
          }
 
 
 
 
 
       </style> 
</head>
<body>
 
<div id="wrap">
<div class="left">I am on the left</div>
<div class="content">I am on the left too</div>
 
 
</div>
 
 
 
</body>
</html>

Open in new window

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now