[RESOLVED] Columns moving around [Archive]

Click to See Complete Forum and Search --> : [RESOLVED] Columns moving around

Pream

04-05-2008, 06:19 PM

My page's format is a header, left and right columns, a center one and a footer. I tested my site on my computer and it works fine, I then went to school and I was checking things out, the left and right columns were out of position. I realized when I made the IE window on my computer smaller, they would go out of position, at first I was using % so i decided to use pixels and inch measure to lock them and they still didnt work. Any suggestions?

Centauri

04-05-2008, 07:07 PM

Would need to see a link or the full page code - could be many things, but use of absolute positioning is usually the cause.

Pream

04-05-2008, 09:52 PM

Heres the HTML

<html>
<head>
<title>Art Block</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="default.css" type="text/css" />
</head>
<body>
<div id="pagewidth" >
<div id="header" align="right" >
<font size="-3" color="#CCCCCC">
<form name="login" method="post" action="liform.php">
<label for="username"> E-Mail:</label>
<input type='text' class='loginText' name="username" id="wpName1" value="" size='10' />
<label for='wpPassword1'>Password:</label>
<input type='password' class='password' name="password" id="password" value="" size='10' /><br />
<input type='checkbox' name="wpRemember"tabindex="4"value="1" id="wpRemember" />
<label for="wpRemember">Remember my login on this computer</label><br />
<input type='submit' name="submit" id="submit" tabindex="5" value="Log in" /><br />
<a href="regin.html">Register Here</a><br />
<a href="pwdremind.php"> I forgot My password</a>
</form>

</font>
</div>
</div>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Galleries</a></li>
<li><a href="#">Museums</a></li>
<li><a href="#">Auction Houses</a></li>
<li><a href="#">Associations</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Artists</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Forums</a></li>
</ul>

</div>

<div id="wrapper" class="clearfix" >
<div id="twocols" class="clearfix">

<div id="maincol" >

TEST A


</div>

<div id="leftcol" >
<p>Featured Art:</p>


</div>

</div>

<div id="rightcol" >

<label for="search">Search</label><input type="text" size="15" name="search" /><input type="submit" name="Go" value="Go" />
<div id="cal">
<?php print $cal->showMonth(); ?>

</div>

</div>


</div>

</div>

<div id="footer" >
<p>Test 5 </p>


</div>
</body>
</html>

Heres the CSS:

html, body{
margin:0;
padding:0;
}

#pagewidth{
max-width:25in;

min-width:13in;
}

#header{
position: static;
height:125px;
background-color:#640719;
width:100%;
border-top-width: thick;
border-bottom-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #27423B;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
border-bottom-style:solid;
border-bottom-width:medium;
border-bottom-color:#FBE7B4;

}
#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #27423B;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}

#leftcol{
width:33%;
float:left;
position:static;
background-color:#D8CBA8;
height: auto;
padding-bottom: 550px;
}

#twocols{
width:75%;
float:right;
position:static;
}

#rightcol{
width:25%;
float:right;
position:static;
background-color: #D8CBA8;
height: auto;
padding-bottom: 347px;
display: table;
}

#maincol{
float: left;
display:inherit;
width:66%;
background-color: #CFC097;
position: static;
text-align: left;
padding-bottom: 550px;
border-left-color: #DFCFB4;
border-left-style: solid;
border-left-width: 5px;
border-right-color: #DFCFB4;
border-right-style: solid;
border-right-width: 5px;
}

#footer{
height:50px;
background-color: #D8CBA8;
float: none;
padding-top: 50px;
border-top-color: #AB9A86;
border-top-style: solid;
border-left-width: thin;
width: 100%;
position: static;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */

/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}

/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}

By the way, the initial problem came when i was using percent and i thought using absolute values can fix them

Centauri

04-06-2008, 12:17 AM

First, you shouldn't set any sizes in inches - this is the web, not print. Use pixels instead. With this sort of layout you are better off using fixed widths for your side columns and allowing the centre column to fill the gap. The column background colours would also suggest you are trying to equalise column lengths, which will also fail. A content-first layout is a little more tricky, but basically involves making the columns wrapper the width of the desired centre by using side margins, and floating the columns outside this width using negative margins. As the side column colours are the same, the columns themselves can be transparent with the colour applied to the body background - this will look like the columns extend when they in actual fact don't.

I cleaned up a few other things - see if this works better for you :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Art Block</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="default.css" type="text/css">
</head>
<body>
<div id="pagewidth" >
<div id="header">
<form name="login" method="post" action="liform.php">
<label for="username"> E-Mail:</label>
<input type='text' class='loginText' name="username" id="wpName1" value="" size='10'>
<label for='wpPassword1'>Password:</label>
<input type='password' class='password' name="password" id="password" value="" size='10'><br>
<input type='checkbox' name="wpRemember"tabindex="4"value="1" id="wpRemember">
<label for="wpRemember">Remember my login on this computer</label><br>
<input type='submit' name="submit" id="submit" tabindex="5" value="Log in"><br>
<a href="regin.html">Register Here</a><br>
<a href="pwdremind.php"> I forgot My password</a>
</form>
</div>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Galleries</a></li>
<li><a href="#">Museums</a></li>
<li><a href="#">Auction Houses</a></li>
<li><a href="#">Associations</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Artists</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Forums</a></li>
</ul>
</div>

<div id="wrapper" class="clearfix">
<div class="clearfix" id="innerwrap">
<div id="maincol">
<p>TEST A</p>
</div>
<div id="leftcol">
<p>Featured Art:</p>
</div>
</div>
<div id="rightcol">
<form>
<label for="search">Search</label>
<input type="text" size="15" name="search"/>
<input type="submit" name="Go" value="Go">
</form>
<?php print $cal->showMonth(); ?>
</div>
</div>

<div id="footer" >
<p>Test 5 </p>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background-color: #D8CBA8;
}
#pagewidth {
min-width:800px;
}
#header {
height:125px;
background-color:#640719;
border-bottom: thin solid #000;
border-top: thick solid #000;
}
#header form {
float: right;
color: #CCCCCC;
font-size: 75%;
text-align: center;
padding-right: 10px;
}
#navcontainer ul {
background-color: #27423B;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
border-bottom: medium solid #FBE7B4;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
padding: 0.2em 1em;
background-color: #27423B;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover {
background-color: #369;
color: #fff;
}
#wrapper {
background-color: #CFC097;
clear: both;
margin: 0 200px;
border: 5px solid #DFCFB4;
border-width: 0 5px;
}
#innerwrap {
float: left;
width: 100%;
}
#leftcol {
width:200px;
float:left;
margin-left: -204px;
position: relative;
display: inline;
}
#rightcol {
width:200px;
float:right;
margin-right: -204px;
position: relative;
display: inline;
}
#maincol {
height: 300px;
float: right;
width: 100%;
}
#footer {
height:50px;
padding-top: 10px;
border-top: 3px solid #AB9A86;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */

Pream

04-06-2008, 11:05 AM

thanks for your help, I found my problem it wasnt the css it was an object within the column