Divs changing widths and position
I wanted my divs to stay in place when the browser is resized. What happens now, is the widths get smaller the more narrow the window, and divs stack on top of each other. How can they remain stationary, with the bottom of the browser having to scroll to see the other side? I don't want the content itself to scroll. To help, I think it's in the div.content? Ps, be careful when copying the code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Learn Easy Music Theory</title>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<!-- Created by HowRank.com Meta Tag Generator
-->
<META NAME='Description' CONTENT='beginner
music theory/no sheet music/any instrument'>
<META NAME='Keywords' CONTENT='music theory
tutorial tabs sheet music instrument voice'>
<META NAME='author' CONTENT='cogs'>
<META HTTP-EQUIV='CACHE-CONTROL'
CONTENT='PUBLIC'>
<META NAME='Revisit-After' CONTENT='14 days'>
<style type="text/css">
/*headers*/
h1 {text-align: center; font-weight: normal;
font-family: trebuchet ms; arial; courier;
serif;
color: #bbbbcc;}
h2 {text-align: center; font-weight: normal;
font-family: trebuchet ms; arial; courier;
serif;
color: #bbbbcc;}
h3 {text-align: left; font-weight: normal;
text-indent: 1cm; line-height: 28px;
font-family: trebuchet ms; arial; courier;
serif;
margin: 0; }
h4 {text-align: center; font-weight: normal;
line-height: 28px; font-family: trebuchet ms;
arial; courier; serif;
}
font.picfont { fontsize: 2px; color: #bbbbcc;
font-family: trebuchet ms; arial; courier;
serif;
}
/*end headers*/
div.floatright
{
float: right;
margin: 10px;
}
div.floatleft
{
float: left;
margin: 10px;
}
img.imgborder {border-right: inset 4px
#666666; border-bottom: inset 4px #666666;
}
/*div elements*/
div.LEMT {
background: url(graphics/oldmus.gif);
width: 100%;
overflow: hidden;
}
div.content {
background-image: url(graphics/gradient.jpg);
background-repeat: repeat-x;
background-color: #8898a8;
width: 100%;
height: 100%;
overflow: hidden;
}
div.navbar {
background-image:
url(graphics/navgradient1.jpg);
background-repeat: repeat-x;
background-color: #5e6263;
color: #ccccdd;
border-top: none;
border-left: none;
border-bottom: inset #717d8d;
border-right: none;
padding: 5px;
width: 15%;
height: 400px;
float: left;
}
div.body-text {
padding: 10px 100px 5px 10px;
border: inset;
width: 60%;
height: 100%;
overflow: hidden;
float: top;
}
div.gradientbottom {
background-image:
url(graphics/gradientbottom.jpg);
background-color: #8898a8;
background-position: bottom;
background-repeat: repeat-x;
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
/*end div elements*/
</style>
</head>
<body>
<div class="LEMT">
<img src="graphics/lemt.bmp"
alt="lemt.bmp" style="padding: 5px; margin: 0px;" align="right" height="25px" width="70px">
<img src="graphics/learneasy.gif"
align="right" alt="learneasy.gif"
width="472px" height="60px"
style="padding: 10px; margin: 0px;">
</div>
<div class="content">
<div class="navbar">
</div>
<div class="body-text">
<h1>Learn Easy Music Theory</h1>
<h4 style="color: #bbbbcc;"><i>with no sheet music knowledge! from absolute beginners to professionals</i></h4>
<hr style="color: #bbbbcc;"></hr>
<br><br>
<div class="floatleft">
<img src="graphics/instruments.jpg"
width="226px"
height="82px" alt="instruments.jpg"
img class="imgborder">
</div>
<h2>LISTEN</h2>
<h3>The information found here will fast-track
your music education: You'll waste no time (in some cases years)
practicing irrelevant things. You'll bypass your peers, with information
that teachers feed you in only small amounts
(if at all).</h3>
<div class="floatright">
<img src="graphics/loggins.jpg" width="200px"
height="133px" alt="loggins.jpg"
img class="imgborder">
<font class="picfont"><center>kenny loggins</center></font>
</div>
<h3>
You may want:
<ul style="text-align: left;"><li>a career in
music</li>
<li>to actually get paid for your efforts</li>
<li>fame</li>
<li>to play as well as you possibly can</li>
</ul>
You'll find the means to those ends as you
read. Plus, no sheet music knowledge is
required!</h3>
<h2>1. A B C D E F G</h2>
</div>
</div>
<div class="gradientbottom">
</div>
</body>
</html>
