...

View Full Version : Two column webpage help



andynov123
12-21-2010, 06:29 PM
Hi,
I had a previous topic on columns http://www.codingforums.com/showthread.php?t=212677

I'm still having some problems. If you go to my site www.college-ebook.com you will see that the body is in the left column. How do I move it to the right and make it actually look good and not so squished???

Excavator
12-21-2010, 06:46 PM
Hello andynov123,
Check your code with the validator to find errors in your basic layout. See the links in my signature line about validation.

You have most of your html above the head of your document. A well formed document would look more like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="data1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">The College Man's Guide To Ruining Your Life</div>
<div id="inner-wrap">
<div id="left"><img src="coverart.gif" alt="description" /></div>
<div id="left1"><img src="buynow.gif" alt="description" /></div>
<div id="left2"><img src="paypalverified.jpg" alt="description" /></div>
<div id="main">The College Man's Guide to Ruining Your Life is going to take the literary world by storm. This is a story that must be expierenced. Every year the next wave of college freshman is at serious risk of joining a fraternity that will torture, humiliate, and rob them of their humanity. young men are the most reckless group in our society. Each year more pieces are added to the neverending cycle.
<p>The College Man's Guide to Ruining Your Life is their story. Fender is a student attending his first year of college,and he just joined the fraternity from hell. He becomes so caught up in pledging, he and his pledge brothers slowly lose their humanity in the course of a semester. They're no long individuals, but the bottom of the barrel in the never ending chain. Fender's fraternity has been doing this since the 1800's. </p>
<p>Fender will starve, experience torture you would never think students are capable of, and he will witness the true evil even he possesses himself.
Witness his story, see his fear, and experience what is turning 19 year old kids into monsters.</p>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

Look at this simple 2-column layout (http://nopeople.com/CSS%20tips/simple_2-column/index.html) that can show you how your columns might work.

conware
12-21-2010, 07:32 PM
It that does not help you could always try to do it with tables.
Here is a example:

I also cleaned up your code a bit.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Page title - Sitename</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />
<meta name="description" content="Your description about your website for search engines.">
<meta name="keywords" content="keywords, to, find, your, website, on, search, engines,">

<style type="text/css">
* {
margin: 0px auto;
padding: 0px;
}
body {
font: 76% Verdana, Arial, Helvetica, sans-serif;
background: #000;
}
#wrapper {
width: 850px; /* Page width */
background: #fff;
padding: 10px;
margin: 10px auto;
}
#header {
font-size: 200%;
margin: 10px;
}
#footer {
background: #ccc;
height: 120px;
margin-top: 10px;
}
.copyright {
padding: 50px;
}
p {
margin: 10px 0px;
}
h1,h2,h4,h5,h6 {
font-size: 155%;
margin: 20px 0px;
}
.bold {
font-weight: bold;
}
.txt_center {
text-align: center;
}
table tr td {
vertical-align: top;
}
</style>

</head>
<body>
<div id="wrapper">
<div id="header" class="bold txt_center">The College Man's Guide To Ruining Your Life</div>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<img src="http://www.college-ebook.com/coverart.gif" width="250" height="335" alt="coverart">
<br />
<img src="http://www.college-ebook.com/buynow.gif" width="250" height="70" alt="Buy Now!">
<br />
<img src="http://www.college-ebook.com/paypalverified.jpg" width="256" height="197" alt="PayPal">
</td>
<td>
<p>The College Man's Guide to Ruining Your Life is going to take the literary world by storm. This is a story that must be expierenced.
Every year the next wave of college freshman is at serious risk of joining a fraternity that will torture, humiliate, and rob them of
their humanity. young men are the most reckless group in our society. Each year more pieces are added to the neverending cycle.</p>
<p>The College Man's Guide to Ruining Your Life is their story. Fender is a student attending his first year of college,and he just
joined the fraternity from hell. He becomes so caught up in pledging, he and his pledge brothers slowly lose their humanity in the
course of a semester. They're no long individuals, but the bottom of the barrel in the never ending chain. Fender's fraternity has
been doing this since the 1800's.</p><p>Fender will starve, experience torture you would never think students are capable of, and he
will witness the true evil even he possesses himself. Witness his story, see his fear, and experience what is turning 19 year old
kids into monsters.</p>
</td>
</tr>
</table>
<div id="footer" class="txt_center">
<div class="copyright">&copy; Footer</div>
</div>
</div>
</body>
</html>

Excavator
12-21-2010, 07:35 PM
It that does not help you could always try to do it with tables.

Don't you know tables are not for layout (http://www.hotdesign.com/seybold/)? See the link in my sig about tables.

andynov123
12-21-2010, 07:36 PM
I fixed the <head> and what follows and I validated the site. Validating made everything look worse. I want the buy now button on the left under the coverart and the paypal verified image under the buynow button and the description on the right. www.college-ebook.com

conware
12-21-2010, 07:44 PM
Don't you know tables are not for layout (http://www.hotdesign.com/seybold/)? See the link in my sig about tables.

Yeah I know tables should not be used for layout, however when you want both columns the same height it would be a easy solution.


I fixed the <head> and what follows and I validated the site. Validating made everything look worse. I want the buy now button on the left under the coverart and the paypal verified image under the buynow button and the description on the right. www.college-ebook.com

Try the code I posted. should work I tried it on localhost.

Excavator
12-21-2010, 07:45 PM
Yes, still plenty of problems there.
For example, #left is 200px wide but you put 250px wide coverart.gif in it.

The box model (http://www.w3.org/TR/CSS2/box.html) shows how what you place in a div should not be larger than that div. margin/padding/border all count when figuring total sizes.

A clear might make your buy now image go under coverart.gif but you have the same problem there - a 250px wide image in a smaller container.
Try it like this -


#left1 {
float:left;
clear: left;
width:250px;
text-align:center;
}

Did you look at the demo site I linked you to earlier?

conware
12-21-2010, 08:09 PM
Well Excavator, I checked out your signature link I can see now why its better to use divs. Also here is a example for andynov123, Basically the same code I already provided but with divs instead of tables.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Page title - Sitename</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />
<meta name="description" content="Your description about your website for search engines.">
<meta name="keywords" content="keywords, to, find, your, website, on, search, engines,">

<style type="text/css">
* {
margin: 0px auto;
padding: 0px;
}
body {
font: 76% Verdana, Arial, Helvetica, sans-serif;
background: #000;
}
#wrapper {
width: 850px; /* Page width */
background: #fff;
padding: 10px;
margin: 10px auto;
}
#header {
font-size: 200%;
margin: 10px;
}
#right_column {
float: right;
width: 590px;
clear: right;
}
#left_column {
width: 256px;
}
#left_column img {
display: block;
clear: right;
}
#footer {
background: #ccc;
height: 120px;
margin-top: 10px;
}
.copyright {
padding: 50px;
}
p {
margin: 10px 0px;
}
h1,h2,h4,h5,h6 {
font-size: 155%;
margin: 20px 0px;
}
.bold {
font-weight: bold;
}
.txt_center {
text-align: center;
}
</style>

</head>
<body>
<div id="wrapper">
<div id="header" class="bold txt_center">The College Man's Guide To Ruining Your Life</div>
<div id="right_column">
<p>The College Man's Guide to Ruining Your Life is going to take the literary world by storm. This is a story that must be expierenced.
Every year the next wave of college freshman is at serious risk of joining a fraternity that will torture, humiliate, and rob them of
their humanity. young men are the most reckless group in our society. Each year more pieces are added to the neverending cycle.</p>
<p>The College Man's Guide to Ruining Your Life is their story. Fender is a student attending his first year of college,and he just
joined the fraternity from hell. He becomes so caught up in pledging, he and his pledge brothers slowly lose their humanity in the
course of a semester. They're no long individuals, but the bottom of the barrel in the never ending chain. Fender's fraternity has
been doing this since the 1800's.</p><p>Fender will starve, experience torture you would never think students are capable of, and he
will witness the true evil even he possesses himself. Witness his story, see his fear, and experience what is turning 19 year old
kids into monsters.</p>
</div>
<div id="left_column">
<img src="http://www.college-ebook.com/coverart.gif" width="250" height="335" alt="coverart">
<img src="http://www.college-ebook.com/buynow.gif" width="250" height="70" alt="Buy Now!">
<img src="http://www.college-ebook.com/paypalverified.jpg" width="256" height="197" alt="PayPal">
</div>
<br clear="both" />
<div id="footer" class="txt_center">
<div class="copyright">&copy; Footer</div>
</div>
</div>
</body>
</html>

Excavator
12-21-2010, 08:18 PM
Well Excavator, I checked out your signature link I can see now why its better to use divs. Also here is a example for andynov123, Basically the same code I already provided but with divs instead of tables.

You should check out the links about validation as well.

teedoff
12-21-2010, 08:25 PM
You should check out the links about validation as well.

Would appear so..lol

conware
12-21-2010, 08:50 PM
Oops my mistake. didnot know I could validate my code from my local drive.
I see i added a few mistakes because I normally use a diffrent doctype.
Thanks for pointing out i should validate my code. Also didnot know that <br clear="both"> should be <br clear="all"> been doing that wrong for ages now lol.:)

Excavator
12-21-2010, 09:42 PM
Oops my mistake. didnot know I could validate my code from my local drive.
I see i added a few mistakes because I normally use a diffrent doctype.
Thanks for pointing out i should validate my code. Also didnot know that <br clear="both"> should be <br clear="all"> been doing that wrong for ages now lol.:)

Instead of using a <br /> for clearing floats, which just adds unnecessary markup, have a look at how overflow: auto; can clear floats (http://www.quirksmode.org/css/clearing.html).
It's always better to style the layout from the CSS, the markup should really be for presentation only.

andynov123
12-21-2010, 11:51 PM
Ok. I almost got it perfect. If you see for yourself www.college-ebook.com. I'm trying to move everything in the left column up parallel with the description. I also want to put the price of the book between the cover art and the buy now button. Thanks

Excavator
12-22-2010, 01:19 AM
Looking better. Still not valid.
Your column order is odd too. Did you look at that demo of the 2-column layout (http://nopeople.com/CSS%20tips/simple_2-column/index.html)? :confused:

This might work for you too -

#left_column {
width: 256px;
float: left;

}

andynov123
12-22-2010, 01:52 AM
That work perfect Excavator. My site is done except for one last thing. At the bottom where it says contact us. How do I make the grey background that says contact us thinner and make the margins smaller. Its too wide.

Excavator
12-22-2010, 02:01 AM
You set padding: 50px; on that. Maybe you meant 5px?

Starling
12-22-2010, 01:18 PM
To get the same column heights, I used "min-height" in my css sheets and it helped to make all the columns the same size.

...
/*Index Column*/
#index
{
border: 3px red solid;
text-align: left;
float: left;
width: 17%;
min-height: 30em;
}
/* Top Column Titles */
#Col2TopTitle
{
border: 3px black solid;
float: left;
width: 25%;
padding-left: 1%;
min-height: 3em;
text-align: center;
}
.......

andynov123
12-22-2010, 05:41 PM
Excavator, I changed the 50 to 5 px and the contact us link moved to the top of the grey box. I want the grey box now as wide. How can I make the grey thinner?

teedoff
12-22-2010, 06:30 PM
Excavator, I changed the 50 to 5 px and the contact us link moved to the top of the grey box. I want the grey box now as wide. How can I make the grey thinner?

You want the greay background grey color to be less high? If thats what you want then change the height value from 120px to something smaller in your #footer style rule.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum