1 reply [Last post]
jaeSun
Offline
Regular
Last seen: 15 years 40 weeks ago
Timezone: GMT-8
Joined: 2004-10-31
Posts: 25
Points: 0

I am trying to use percentage widths to help keep things more fluid for various resolutions.

right now, i have a main body container that houses everything and is about 80% of the width.

within it, i have a header, which is just the same width, and below, i have 2 divs, which ihave floated.

the left container is a side menu container and i have it set at 195px. the right container is the main content container and has no width.

now, when i resize the browser window and make it smaller, the content container will go under the side menu container.

I was wondering if there is a way for me to make both containers just scale smaller as the window gets smaller, instead of going under the side menu container.

also, If i have a paragraph of text, it just makes the main content box go under theside menu box.

how do I do this without fixing width sizes?

here is the html:

<?php

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>whiteAzn.com :: files - login</title>
<?php
	print_head();
?>
</head>

<body>

<div id="bodycontainer">

<div id="headercontainer">
<p>File Depository</p>
<p>...</p>
</div>

<div id="contentcontainer">

<div id="sidecontainer">
side menu</div>

<div id="maincontainer">
<p>dfgggggg gg g ggggg gggg gg ggggggg ggggfgdgdfg dfg fd dfg fdg fdg fd fdg fdsdf sdf dsf sdf sdf dsf sf dsf sdf sdf sdf sdf saf asf sdf sdf sdaf sdfg sdg erg dgdf gdfg dfg sdlkslkd jfklsjf klj jslijf iksj fpwao riawu ioa iau aijdoaij diasj asid jaisj dasi djasidjias djasd iajaiojiaosjd aoisjd ioa jao </p>
</div>

<br class="clearall" />

</div>


</div>


  
</body>
</html>

here is the css:

html body {
	background-color: #ffffff;
	margin: 0px;
	margin-top: 5px;
	padding: 0px;
	font-family: "Lucida Grande", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#bodycontainer {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	background-color: #dddddd;
	border: 1px solid #000000;
}

#contentcontainer {
	width: 100%;
	background-color: #ffffff;
}

#headercontainer {
	border-bottom: 1px solid #000000;
	margin: 0;
	padding: 0;
}

#sidecontainer {
	width: 195px;
	float: left;
}

#maincontainer {
	float: left;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid #000000;
}

#maincontainer h3 {
	border-bottom: 1px solid #666;
	width: 80%;
	font-size: 12px;
	font-family: "Courier New", Courier, mono;
}

.clearall {
	clear: both;
}

you can see this here:

http://files.whiteazn.com

personal website | www.whiteAzn.com

jaeSun
Offline
Regular
Last seen: 15 years 40 weeks ago
Timezone: GMT-8
Joined: 2004-10-31
Posts: 25
Points: 0

% widths and keep it from going under another div

fixed. found a way to do it

personal website | www.whiteAzn.com