Forum Moderators: not2easy
1. If i dont declare the width of the "container" and i shrink my web browser to about 200 pixels (using internet explorer) the page is completely ruined. the middle content and everything else is pushed all the way down and most of the time dissapearing. I am saying that the left and right are 160px but i am not declaring the middle, because i want that to be able to expand. I tried min-width: but that didnt work. How can i keep this from being atleast 300px wide but also be able to stretch to an unlimited number?
2. This is the big one for me, like i said im using that layout almost exactly and i have this problem. if i make the container a fixed size, like 800px with the left and right columns being a width of 150px each, that leaves me with 500px for the middle. if i put an image in the middle with a width of 600px, weird stuff happens. mainly, the right column goes completely down, and the middle column has to go all the way down to the very bottom under the left column. How can i fix this?
If you can post your css, it would help.
You could have paddings etc.. that are causing problems with this. And without seeing it, it is a bit difficult for someone to help you out.
Also, a bit of your xhtml/html would be an additonal help.
[snip]
here is the css code, i tried to clean it up as much as possible, sorry its large:
body
{
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
#top
{
height: 100px;
background-color: #035;
}
#top h1
{
padding: 0;
margin: 0;
color: white;
}
#container
{
width: 800px;
margin: 0;
padding: 0;
background-color: white;
border: 1px solid gray;
height: 100%;
}
#rightnav
{
float: right;
width: 170px;
margin: 0;
padding: 1em;
height: 100%;
background-color: white;
}
#content
{
margin-left: 160px;
margin-right: 160px;
height: 100%;
padding: 1em;
width: 100%;
}
#content img
{
width: 200px;
}
#footer
{
background-color: white;
height: 30px;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 0;
background-color: #036;
height: 100%;
list-style-type: none;
}
#leftnav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#leftnav a
{
display: block;
padding: 3px 3px 3px 8px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}
#leftnav a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#leftnav a:hover
{
background-color: #369;
color: #fff;
}
#topnav
{
height: 15px;
background-color: #036;
margin: 0;
padding: 0 0 0 160px;
}
ul#topnavlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#topnavlist li
{
display: inline;
list-style-type: none;
}
#topnavlist a { padding: 3px 10px; }
#topnavlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#topnavlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
[edited by: createErrorMsg at 4:48 pm (utc) on Dec. 20, 2005]
[edit reason] Sorry, no URLS. See Forum Charter for details. [/edit]
AFAIK, IE automatically expands a div to accommodate the contents unless it is told otherwise. If you have a div with 500px width available and place a 600px image in there, IE will expand the div to show the whole image. Set the div to overflow:hidden; and the image will be cut off at the available div width.
HTH
teylyn
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!-- InstanceBegin template="Templates/Copy%20of%20maintemp.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>title</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>
<body>
<div id="container">
<div id="top">
<h1>thewallmart</h1>
</div>
<div id="topnav">
<ul id="topnavlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">List an Item</a></li>
</ul>
</div>
<div id="leftnav">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Store</a></li>
<li><a href="cds.htm">CDs</a></li>
<li><a href="dvds.htm">DVDs</a></li>
</ul>
</div>
<ul>
<li></li>
</ul>
<!-- InstanceBeginEditable name="leftunder" --><!-- InstanceEndEditable --></div>
<div id="rightnav">
<p>Right menu to show off key items.</p>
<!-- InstanceBeginEditable name="right" --><div id="smallitem">
<h3>test</h3>
<p>Testing right menu</p>
<p> </p>
</div><!-- InstanceEndEditable -->
<p></p>
</div>
<div id="content"> <!-- InstanceBeginEditable name="middle" -->
<p><img src="images/wallbg_med.jpg" width="800" height="200"></p>
<p>asdlfjasdlfkjsaldfkjasdflkjasdflkjasdflksajdflaksdjflaskdjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</p>
<!-- InstanceEndEditable --> </p>
</div>
<div id="footer">Footer</div>
</div></body>
<!-- InstanceEnd --></html>
