http://www.ivancash.com/links.html (The CSS is inline)

I am trying to get the 3 colums to align on the same horizontal axis.
After trying for +hours+, I'm begging someone to reveal the solution.


I realize this is probably very elementary, but for some reason, I can not figure out what to do...

thanks!

-ivan

You have 1 <div></div> across the page and within this you are seperating your columns with <p></p>. Therefore between your columns you are just starting a new paragraph.

I would seperate the columns by using <div id="left">your info</div><div id="center">Your center columns info</div><div id="right">Right side info</div>

Well, rather than the paragraphs you've got put all that into an unordered list, that is, after all, what they are:

<p style="margin-left:150px;margin-top:20px;">
<b>Friends & Family</b> <br>
<a href="http://www.sydneycash.com" >sydney cash</a> <br>
<a href="http://www.elliotcash.com" >elliot cash</a> <br>
<a href="http://www.megancash.com" >megan cash</a> <br>
<a href="http://www.juliancash.com" >julian cash</a> <br>
<a href="http://www.toddweinstein.com" >todd weinstein</a></p>

<p style="margin-botom:200;margin-left:360px;">
<b>Inspirations</b>
<br>
<a href="http://www.banksy.co.uk" >banksy</a> <br>
<a href="http://www.ruben.fm" >ruben fleischer</a> <br>
<a href="http://www.gethappy.com/" >mark osborne</a> <br>
<a href="http://www.misprintedtype.com/" >eduardo recife</a>
</p>

<p style="margin-left:570px;margin-top:20px">
<b>Resources</b> <br>
<a href="http://www.digg.com">digg</a> <br>
<a href="http://www.wikipedia.org">wikipedia</a> <br>
<a href="http://www.deviantart.com">deviantart</a> <br>
<a href="http://www.last.fm">last.fm</a> <br>
<a href="http://www.adbusters.org">adbusters magazine</a> <br>
<a href="http://www.swindlemagazine.com/">swindle magazine</a></p>

</div>

Becomes:

<div id="links_text">
<!-- <p style="margin-left: 150px; margin-top: 20px;"> -->
<ul class="linkList">
<h2>Friends &amp; Family</h2>
<li><a href="http://www.sydneycash.com/">sydney cash</a> <br></li>
<li><a href="http://www.elliotcash.com/">elliot cash</a> <br></li>
<li><a href="http://www.megancash.com/">megan cash</a> <br></li>
<li><a href="http://www.juliancash.com/">julian cash</a> <br></li>
<li><a href="http://www.toddweinstein.com/">todd weinstein</a></li>
</ul>

<!-- <p style="margin-left: 360px;"> -->

<ul class="linkList">
<h2>Inspirations</h2>
<li><a href="http://www.banksy.co.uk/">banksy</a> <br></li>
<li><a href="http://www.ruben.fm/">ruben fleischer</a> <br></li>
<li><a href="http://www.gethappy.com/">mark osborne</a> <br></li>
<li><a href="http://www.misprintedtype.com/">eduardo recife</a></li>
</ul>


<!-- <p style="margin-left: 570px; margin-top: 20px;"> -->

<ul class="linkList last">
<h2>Resources</h2>
<li><a href="http://www.digg.com/">digg</a> <br></li>
<li><a href="http://www.wikipedia.org/">wikipedia</a> <br></li>
<li><a href="http://www.deviantart.com/">deviantart</a> <br></li>
<li><a href="http://www.last.fm/">last.fm</a> <br></li>
<li><a href="http://www.adbusters.org/">adbusters magazine</a> <br></li>
<li><a href="http://www.swindlemagazine.com/">swindle magazine</a></li>
</ul>
<br class="brclear">
</div>

Then, you need some tweaks to your CSS to make this work:

#links_text {
font-size:small;
padding-top: 1px;
text-align:left;
/*clear: left;*/
width: 600px;
margin: 0 auto;
/*border: 1px solid blue;*/
}

.linkList{
float: left;
width: 140px;
list-style: none;
padding: 0;
margin: 20px 30px 10px 30px;
/*border: 1px solid red;*/
}
.last{
margin: 20px 10px 10px 50px
}
h2{
margin: 0;
padding: 0;
display: inline;
font-size: 95%;
}

Try that.

try something like this:

<center>
<div id="container">

<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>

</div>
</center>

css:

#container {
position: relative;
top: 0px; left: 0px; width: 400px; }

#left {
position: absolute;
top: 10px;
left: 10px;
widht: 100px;
}

#mid {
position: absolute;
top: 10px;
left: 110px;
widht: 100px;
}

#right {
position: absolute;
top: 10px;
left: 210px;
widht: 100px;
}


tip: keep your code as light and simple as possible.
put for each thing a border at 1 pixel to see how your columns fit

And yes, in the beginning it is a great mess! the positioning 'absolute' and 'relative' adjustments... and than they fit right in IE, and not in FF or otherwise.

The <center> should NOT be used, it's an old deprecated tag. Ivan's site is CSS and HTML - CSS does the centering, not a moldy old <center> tag.

Position:absolute like that is also NOT a good solution, and totally unnecessary.

thanks for your help once again ladynred! You can look and see that my links page is fixed! Now, would you mind (briefly) explaining how that worked so I can learn from it? Also, why did you have a red/blue border as optional in the .css?

Also, why IS there sometimes a ".style" and othertimes a "#style"?

Lastly, (I'm being EXTREMELY nit-picky here; I realize) the footer somehow got a little thwarted by the recent change to the css code. For instance, it's in the wrong place for the "about" section and the "links" sectioin... Any idea why?

THANKS!

in external css

.whatever is a class

#whatever2 is an id

<div id="whatever2">
<p class="whatever"></p>
</div>

ID's must be UNIQUE, you can only use them once per page
CLASSES can be re-used as many times as you want and applied to any element you want to apply those rules to.

The red/blue borders (which should be commented out) are my way of seeing what's going on when I change rules on an element, especially divs and lists. It's impossible to see the boundaries you might be bumping into if you don't put a temporary border around them Just a de-bugging method.

What I did was put your lists into an unordered list <ul> and gave the <ul> a class name of .linkList.
I then told it to FLOAT the 3 lists to the left, which makes them line up next to each other as you wanted. The rest is adjusting the margins to get them where I want them.

I also set a dimension in the <div> you had them sitting inside #links_Text and set the margins to 0 auto so that it would be centered on the page.

On the "about" page, the text box is shorter than the photo, but the footer is sitting under the text where it's supposed to. Shove it down, give #about_text a height of about 520px (your photo is 512px high).

On the Links page you're missing a clearing break, should look like this:

<ul class="linkList last">
<h2>Resources</h2>
<li><a href="http://www.digg.com/">digg</a> <br></li>
<li><a href="http://www.wikipedia.org/">wikipedia</a> <br></li>
<li><a href="http://www.deviantart.com/">deviantart</a> <br></li>
<li><a href="http://www.last.fm/">last.fm</a> <br></li>
<li><a href="http://www.adbusters.org/">adbusters magazine</a> <br></li>
<li><a href="http://www.swindlemagazine.com/">swindle magazine</a></li>
</ul>
<br class="brclear" />
</div>
<div id="footer">© 2007 Ivan Cash</div>
</div>

Sorry 'bout that.

Originally Posted by LadynRed

The <center> should NOT be used, it's an old deprecated tag. Ivan's site is CSS and HTML - CSS does the centering, not a moldy old <center> tag.

Position:absolute like that is also NOT a good solution, and totally unnecessary.

Ok, so how should you center the div's in my example above?

And when I'm not using the positioning attributes, it's not working right here. Well sometimes in one browser, but not in another, not compatible.

Ok, so how should you center the div's in my example above?

You must do 2 things:
1 - to the body declarations add text-align:center;, that makes IE center the container <div> that will hold your page.
2 - to the container <div> that you want to center, add margin: 0 auto; - that will center for all the other compliant browsers. Also add text-align: left to the rules for your containing <div> so that text goes back to 'normal' alignment.

That's it.. that's all you need to do.

And when I'm not using the positioning attributes, it's not working right here. Well sometimes in one browser, but not in another, not compatible

.
Then you have not mastered the techniques of floats and using the normal document flow. The only browser that has major problems is IE 6 and below, so yes, you have to deal with it's broken box model and all it's bugs. However, it's not really a case of compatibility at all. Without seeing your code, there's no way to know what your problems are.

so then should it be "<br class="brclear">" on all of the pages, as oppose to "<br class="brclear" />" ?

Thanks,
i

(ps: the footer still isn't working on the links page... http://www.ivancash.com/links.html) it's all the way on the top right for some reason..

It needs to be <br class="brclear" /> if your DOCTYPE is HTML Strict or XHTML. You can get away with jsut <br class="brclear"> in HTML Transitional.
I told you why the footer isn't working on that page and even gave you the code section that should be there. Look at post #8.

Thnx for the good advice. I'll try it out.
*adds talkupation*

hate to bother you further, but I used the advise from your 8th post, in hopes of correcting the footer error on my links page, but to no avail? am i just missing something obvious? (sorry)

respectfully,
ivan

Ok, I took it apart and reassembled it. This works:

<div id="wrapper">
<div id="left"><!-- floated left -->
<a href="http://www.ivancash.com/"><img src="links_files/logo.gif" alt="ivan_cash_logo" border="0"></a>
</div><!-- end left -->

<div id="mid">
<div id="intro"><a href="http://www.ivancash.com/"><b>ivan</b>cash.com </a>
</div><!--end intro -->
<div id="links"> <a href="http://www.ivancash.com/about.html">about</a>
/ <a href="http://www.ivancash.com/resume.html">resume</a>
/ <a href="http://www.ivancash.com/portfolio.html">portfolio</a>
/ <a href="http://www.ivancash.com/writing.html">writing</a>
/ <a href="http://www.ivancash.com/links.html"><b>links</b></a>
/ <a href="http://www.ivancash.com/contact.html">contact</a>
</div><!-- end links -->

</div> <!-- end mid -->
<br class="brclear" />

<div id="links_text">
<ul class="linkList">
<h2>Friends &amp; Family</h2>
<li><a href="http://www.sydneycash.com/">sydney cash</a> <br></li>
<li><a href="http://www.elliotcash.com/">elliot cash</a> <br></li>
<li><a href="http://www.megancash.com/">megan cash</a> <br></li>
<li><a href="http://www.juliancash.com/">julian cash</a> <br></li>
<li><a href="http://www.toddweinstein.com/">todd weinstein</a></li>
</ul>


<ul class="linkList">
<h2>Inspirations</h2>
<li><a href="http://www.banksy.co.uk/">banksy</a> <br></li>
<li><a href="http://www.ruben.fm/">ruben fleischer</a> <br></li>
<li><a href="http://www.gethappy.com/">mark osborne</a> <br></li>
<li><a href="http://www.misprintedtype.com/">eduardo recife</a></li>
</ul>

<ul class="linkList last">
<h2>Resources</h2>
<li><a href="http://www.digg.com/">digg</a> <br></li>
<li><a href="http://www.wikipedia.org/">wikipedia</a> <br></li>
<li><a href="http://www.deviantart.com/">deviantart</a> <br></li>
<li><a href="http://www.last.fm/">last.fm</a> <br></li>
<li><a href="http://www.adbusters.org/">adbusters magazine</a> <br></li>
<li><a href="http://www.swindlemagazine.com/">swindle magazine</a></li>
</ul>

<br class="brclear" />
</div> <!--end links_text -->

<div id="footer">© 2007 Ivan Cash</div>


</div> <!-- end wrapper -->

I also noticed there is a stray closing bracket } in your css file just above the .brclear section, you need to remove that.

it was that silly stray bracket! thanks! :-p

I want to use the height attribute on some of my css to move the footer lower, as LadyNRed suggested I do on the "about" page. That worked when I view from a normal browser, but when I view it through "yoproxy.com", it shows the entire area within the style, moved down the given height, rather than just spacing underneath it. Any ideas why? Is it ok to use the height attribute to space my footer down?

-ivan

Better to move your footer down with margins, but you could use the height.
No idea what's going on the with proxy, probably something to do with the 'browser' window it uses/creates.