Divs changing widths and position [Archive]

cogs

Jan 20, 2009, 08:37 PM

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:

<!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">

<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>

crigby

Jan 26, 2009, 05:55 PM

Hi,
You defined the attributes as 15 %, 60% and 100%; you cannot do this. Try an external stylesheet for the first, and learn how to format it.
You can define a float to be left, and to define an open width right "div" to scale. You can define left and right and leave the center "open" and it will scale. You cannot define all sizes and expect it to scale,
It just cannot. A 1024px defined will not scale to 800px. It has to have the freedom to do it.
Try one of my sites and "Save As" to see:
Computer Publications Worldwide (http://crigbypubs.tripod.com/)
Peace,
Clarke

cogs

Jan 27, 2009, 03:52 PM

You are so cool to answer... it pointed me in the right direction: that of using percentages for the widths on the divs. I am now able to scale my nav menu as well as the text in the center.
Also, you're right about the external css, I had already begun that yesterday. This is the first webpage I have made, and it's actually working right.