Help! I can't get my boxes to align!!

Moonlilly · #1 (**permalink**) Jan 29th, 2007, 14:38

Hi! I really hope someone can help me... I am trying to get the sidecol to align about 10 or 20 px to the right of the leftcol, and the maincol to align about 20px to the right of the sidecol, all the while not surpassing the 100% width of the Master box. This is a test layout that I would like to use on a site I am about to build. Don't worry about the crappy colors, they are just there to help me see what I am doing... although they don't seem to be helping much lol. Here is the code:

<title>Test layout</title>
<style type="text/css">

</style>
<style type="text/css">
#divFoldCont {position:absolute; left:80px; top:100px; width:170px; visibility:hidden;}
.clFold {position:absolute; width:170px;}
.clFoldSub {position:absolute; left:15px; width:170px; visibility:hidden;}
.clFoldSub2 {position:absolute; left:15px; width:170px; visibility:hidden;}
.clFoldLinks {font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; font-weight:bold; text-decoration:none; color:black;}
.clSubLinks {font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; font-weight:bold; text-decoration:none; color:black;}
.clSubLinks2 {font-family:Arial, Verdana, Helvetica, Helv; font-size:12px; text-decoration:none; color:black;}
.style1 {
font-size: 24px;
font-weight: bold;
}
a {
font-family: Arial, Helvetica, sans-serif;
color: #660066;
font-size: 16px;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #660066;
}
a:hover {
text-decoration: underline;
color: #6699FF;
}
a:active {
text-decoration: none;
color: #6699FF;
}
.style2 {color: #FFFFFF}
.style3 {
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body onload="foldInit()">
<div id="master">
<div id="leftcol">
<p>Left column</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<div id="picture">Picture
<div class="style1" id="logo">
<div align="center">
<p> </p>
<p>Logo</p>
</div>
</div>

</div>

<div id="navbar">
<p class="style2">Home | Photo gallery| Contact us </p>
</div>

<div id="bodywrap">

<div id="sidecol" >
<h3>sidebar</h3>
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
</ul>
</div>

<div id="maincol">
<h2>main content</h2>
<p>Blah blah blah blah. </p>
</div>

<div id="footer">
<p class="style3">Footer</p>
</div>

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

moojoo · #2 (**permalink**) Jan 29th, 2007, 16:53

Give us a link pls.

Moonlilly · #3 (**permalink**) Jan 29th, 2007, 17:02

Sorry, I'm not sure what you mean... My site (page) isn't online yet, but I could put it on a temporary location if you need it to be online...

Moonlilly · #4 (**permalink**) Jan 29th, 2007, 17:10

Ok, don't aks me what I did, but it's finally working!!! I have another question though... How do I get my main column to squish like my navbar and footer when I make the window smaller? Thanks again for your help

Moonlilly · #5 (**permalink**) Jan 29th, 2007, 17:30

I thought I had fixed it, but it looks horrible at 600X800. I just want 2 seperate boxes (side by side) inside the bodywrap and to the left of the left column, and I'd like it to look good in most browsers from 600X800 and up. Can it be done, or am I a victim of wishful thinking? LOL Here is my new code btw:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test layout</title>
<style type="text/css">

</style>
<style type="text/css">
#divFoldCont {position:absolute; left:80px; top:100px; width:170px; visibility:hidden;}
.clFold {position:absolute; width:170px;}
.clFoldSub {position:absolute; left:15px; width:170px; visibility:hidden;}
.clFoldSub2 {position:absolute; left:15px; width:170px; visibility:hidden;}
.clFoldLinks {font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; font-weight:bold; text-decoration:none; color:black;}
.clSubLinks {font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; font-weight:bold; text-decoration:none; color:black;}
.clSubLinks2 {font-family:Arial, Verdana, Helvetica, Helv; font-size:12px; text-decoration:none; color:black;}
.style1 {
font-size: 24px;
font-weight: bold;
}
a {
font-family: Arial, Helvetica, sans-serif;
color: #660066;
font-size: 16px;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #660066;
}
a:hover {
text-decoration: underline;
color: #6699FF;
}
a:active {
text-decoration: none;
color: #6699FF;
}
.style2 {color: #FFFFFF}
.style3 {
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body onload="foldInit()">
<div id="master">
<div id="leftcol">
<p>Left column</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<div id="picture">Picture
<div class="style1" id="logo">
<div align="center">
<p> </p>
<p>Logo</p>
</div>
</div>

</div>

<div id="navbar">
<p class="style2">Home | Photo gallery| Contact us </p>
</div>

<div id="bodywrap">

<div id="sidecol" >
<h3>sidebar</h3>
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
</ul>
</div>

<div id="maincol">
<h2>main content</h2>
<p>Blah blah blah blah. </p>
</div>

<div id="footer">
<p class="style3">Footer</p>
</div>

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

JacobHaug · #6 (**permalink**) Jan 29th, 2007, 19:08

Yes, please put it in a temporary location, it makes it very hard for us to see what is happing without a link. So please upload it somewhere and post a link and we would be glad to help!!

Moonlilly · #7 (**permalink**) Jan 29th, 2007, 20:02

Ok, here it is:

http://www.personainternet.com/~potier/Tests/Home.html

Thanks again for all your help, it's very appreciated!

Moonlilly · #8 (**permalink**) Jan 29th, 2007, 20:04

Looking at it again, if the sidebar and maincontent boxes could contract with the window, it may be all that I need for the page to work?

Moonlilly · #9 (**permalink**) Jan 29th, 2007, 20:18

Also, I would like for them NOT to go under the leftmost column when the window is contracted... Sorry for being such a pest... I've just run out of ideas!

snow · #10 (**permalink**) Jan 30th, 2007, 02:34

Is this something like what you were after? (I haven't fully cleaned up your code there's still a lot of scary, un-needed stuff in there!). I wasn't exactly sure what you wanted...:

CSS

Code: Select all

<!--
body {
    margin: 0px;
    padding: 0px;
    background-color: #FF0000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
    text-align: left;
    height: 900px;
}


#logo {

    width:200px;
    height:127px;
    float:left;
    background-color: #6666FF;}

#leftcol {
    width:200px;
    background-color: #6006FF;
    float: left;
}

#navbar {
    height:35px;
    text-align: right;
    background-color: #010080;
    line-height: 35px;
    overflow: hidden;
}

#picture {
    height:92px;
    background:pink url(Images/testpichead1.jpg) no-repeat;
}

#bodywrap {
    background-color: #999999;
    overflow: hidden;
}
#sidecol {
    width:200px;
    background-color: #00FFFF;
    margin-bottom: 20px;
    padding: 5px;
    float: left;
    overflow: hidden;
}
#maincol {
    background-color: #99FF66;
    margin-bottom: 30px;
    padding: 5px 5px 5px 5px;
    border: 0px solid #000000;
}
#footer {
    height:30px;
    padding: 10px 0px;
    text-align: center;
    color: #000000;
    background-color: #FFFF99;
    line-height: 25px;
}

html:

Code: Select all

<body onload="foldInit()">


<div class="style1" id="logo">
<p>Logo</p>
</div>

  <div id="picture">Picture
  </div>

  <div id="navbar">
      <p class="style2">Home | Photo gallery| Contact us  </p>
  </div>

  <div id="leftcol">
    <p>Left column</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>

  </div>



  <div id="bodywrap">

    <div id="sidecol" >
      <h3>sidebar</h3>
      <ul>
        <li>List</li>
        <li>List</li>
        <li>List</li>
      </ul>
    </div>

    <div id="maincol">
      <h2>main content</h2>
      <p>Blah blah blah blah. </p>
    </div>

    <div id="footer">
      <p class="style3">Footer</p>
    </div>

  </div>
</body>

Hope it's something close!
All the best,
Snow

Moonlilly · #11 (**permalink**) Jan 30th, 2007, 10:54

Has anyone ever told you Snow that you are a GENIUS!!! The only thing I have to fix is that in ie the reader is a few px too far to the left, but otherwise, it's PERFECT at both resolutions in all 3 browsers I checked it in (ie, ns, ff)(am I missing any major popular browsers that I should add to the mix?). All I have to say is THANK YOU THANK YOU THANK YOU!!! Now I have to go and study your code to see how you did it

And see what I can clean up

Lilly
xxx

Moonlilly · #12 (**permalink**) Jan 30th, 2007, 13:37

Ok, I've played around with it, and I can't seem to get rid of the unwanted space between the logo and the Header+Navbar in IE... I'll show you what I see:

Any help would be greatly appreciated.

karinne · #13 (**permalink**) Jan 30th, 2007, 13:39

you like green much?

What version of IE is that? I don't see that gap in IE6 on Win2000.

Moonlilly · #14 (**permalink**) Jan 30th, 2007, 13:55

I was in a green mood yesterday, and it goes with my new wallpaper

I am using version 6.0.2800.1106. My resolution is an 1024 X 768, but it does the same thing at 800 X 600.

karinne · #15 (**permalink**) Jan 30th, 2007, 14:06

Here's what I get in FF and IE6

FF.jpg IE.jpg

Moonlilly · #16 (**permalink**) Jan 30th, 2007, 16:13

Strange... Well, I suppose if the rest of the word can see it properly, that's all that matters

Although I'm such a perfectionist, I think I'll still try to play around with it!

karinne · #17 (**permalink**) Jan 30th, 2007, 16:53

Quote:

Originally Posted by Moonlilly

Strange... Well, I suppose if the rest of the word can see it properly, that's all that matters

I hope you were joking with that?

Moonlilly · #18 (**permalink**) Jan 30th, 2007, 17:12

Yes, don't worry

I have been desperately trying to get rid of the annoying space since this morning. No luck yet, but I'm sure it's something really stupid and easy that I'm not thinking about!

Moonlilly · #19 (**permalink**) Jan 30th, 2007, 17:34

Hi! I just noticed something... If you look at my previous post with the picture of what I see in ie, notice the placement of the sun! That means the whole graphic is being pushed to the right, where as in netscape and firefox, the graphic starts at the very left of the screen like it should. Does this help solve the problem?

karinne · #20 (**permalink**) Jan 30th, 2007, 17:41

So how is this whole thing suppose to look like anyways?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Sifr Align Right	Salbert	Flash & Multimedia Forum	8	Apr 2nd, 2008 13:31
How can I align my form boxes?	Inkers	Web Page Design	22	Jan 25th, 2007 16:43
Align problem	Amphersand	Web Page Design	3	Oct 11th, 2006 17:11
Stubborn Align	virtualwhispers	Web Page Design	1	Jun 29th, 2006 16:46
Stubborn Align	virtualwhispers	Web Page Design	2	Jun 28th, 2006 16:26

		Webforumz.com > Main Forums > Design Your Website > Starting Out
Help! I can't get my boxes to align!!