• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 232
  • 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

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