Question

I currently working on a practice site and can’t seem to figure out how to stop the left and right sides from shrinking width when the browser resizes. The middle also resizes, but would like to keep that. I Figure it’s something with the CSS layout doing it. See below. I posted the whole thing, but the left and right columns are marked. Under that I have the code I use in the body.

CSS

body{
margin:0;
padding:0;
line-height: 1.5em;
color: black;
}

b{font-size: 110%;}
em{color: red;}
a{color: blue;}


/* text field */
textfield {
border-style: ridge;
background:#000000;
color: #000000;
}

/*TOPSECTION */
#topsection{
background: url('../images/bannerBGbkup.jpg'), url('../images/bannerBGl.jpg');
background-position: left top, left top;
background-repeat: no-repeat, repeat;
height: 200px; /*Height of top section*/
color: White;
text-align:center
}


#topsection a{
color: #FFFF80;
}

#topsection h1{
margin: 0;
padding-top: 25px;
text-align:Left
}

#topsection h2{
margin: 0;
padding-top: 0px;
text-align:Center
}

#topsection h3{
margin: 0;
padding-top: 0px;
text-align:Right
}

/* THIS IS NAV BAR */
ul#list-nav {

  margin:70px;
  margin-left: 20%;
  padding-Left:0;
  list-style:none;
  width:735px; /* 105 each */
}

ul#list-nav li {
  display:inline
}

ul#list-nav li a {
 text-decoration:none;
 padding:5px 0;
 width:100px;
 background:#7D7D7D;
 color:#eee;
 float:left;
}

ul#list-nav li a {
  text-align:center;
  border-left:1px solid #fff;
}

ul#list-nav li a:hover {
  background:red;
  color:#000
}

/* CONTENT */
#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 20% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

/* LEFT COLUMN */
#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
margin-left: -100%;
background: #5f5f5f;
color: White;
}

/* RIGHT COLUMN */
#rightcolumn{
float: left;
width: 20%; /*Width of right column in pixels*/
margin-left: -20%; /*Set margin to that of -(RightColumnWidth)*/
background: #5f5f5f;
color: White;
}

/* FOOTER */
#footer{
clear: left;
width: 100%;
background: black;
color: #5f5f5f;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

/*OTHER*/
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

BODY

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>20%</em></b> 
<table BACKGROUND="images/releases.jpg"width="175px"  Height="350px" border="1" cellspacing="12" cellpadding="15">
    <tr>
        <td>Limbo</td> 
    </tr>
    <tr>
        <td>Limbo was a great game 5 out of 5 stars. Game play takes you threw different levels. blah blah blah  Read More..</td>
    </tr>
</table> 
</div>
</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>20%</em></b> </div>
</div>

How can I resolve this?

Answer 1

Why not use min-width and min-height to the divs which are resizing?

*min-width and min-height makes sure your element does not go below a certain size as defined by them.*