Web Design Forums

Tamakyo · 05-04-2008, 13:53

I did a lot of searching on Google and tried a lot of methods, but nothing seems to work.

It currently has one column; I need to create a second column to the right of the existing column.

Code:

body {
	color: #36424a;
	background: #ffffff url("pattern.gif") repeat-x;
	font-family: arial;
	font-size: 12px;
	margin: 0px auto;
}

#content {
	padding-left: 50px;
	width: 826px;
	margin: 0px auto;
	background-color: #ffffff;
}

#content .title {
	padding-top: 20px;
	font-size: 24px;
	width: 50%;
}

#content .text {
	padding-top: 5px;
	padding-bottom: 20px;
	text-align: justify;
	width: 50%;
}

#href {
	margin: 0px auto;
	width: 876px;
	height: 36px;
	padding-top: 18px;
	background: url("navigationpattern.gif") repeat-x;
}

#href a {
	padding-left: 50px;
	font-size: 18px;
	color: #ffffff;
	text-decoration: none;
}

#href a:hover {
	text-decoration: underline;
}

#footer {
	padding-top: 15px;
	text-align: center;
	width: 876px;
	height: 50px;
	margin: 0px auto;
	background: url("footerpattern.gif") repeat-x;
}

bluesage · 05-04-2008, 14:29

if you dont show the html code that goes with it, will be very hard to give you advice

what your missing is a float. If you want to build css columns without table use, then you need to learn to use css "float". Search for css faux columns or css float for more info.

a few links to get you started.

Floatutorial: Step by step CSS float tutorial
CSS Float Property

A List Apart: Articles: Faux Columns

Tamakyo · 05-04-2008, 14:55

I finally created the second column; I used

Code:

float: left

for the first column and

Code:

margin-left: 500px

for the second column.

Do Gooder · 05-04-2008, 15:00

i find in some cases you might need to clear your floats as well.

CSS:
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

HTML:
<div class="clearfloat"></div>

Tamakyo · 05-04-2008, 16:50

My web site looks wonderful in Firefox, but the columns are weird in Internet Explorer.

Code:

body {
	color: #36424a;
	background: #ffffff url("pattern.gif") repeat-x;
	font-family: arial;
	font-size: 12px;
	margin: 0px auto;
}

#header {
	padding-bottom: 10px;
	padding-left: 20px;
	width: 876px;	margin: 0px auto;
	color: #ffffff;
	font-size: 48px;
	font-family: georgia;
}

#information {
	padding-top: 20px;
	margin: 0px auto;
	color: #ffffff;
	font-size: 13px;
	margin-left: 770px;
	font-family: arial;
}

#content {
	width: 876px;
	margin: 0px auto;
	background-color: #ffffff;
}

#content .title {
	margin-left: 50px;
	padding-top: 20px;
	font-size: 24px;
	width: 48%;
	float: left;
}

#content .text {
	margin-left: 50px;
	padding-top: 5px;
	padding-bottom: 20px;
	text-align: justify;
	width: 48%;
	float: left;
}

#content .titletwo {
	padding-top: 20px;
	font-size: 24px;
	width: 38%;
	margin-left: 500px;
}

#content .texttwo {
	padding-top: 5px;
	padding-bottom: 20px;
	text-align: justify;
	width: 38%;
	margin-left: 500px;
}

#href {
	margin: 0px auto;
	width: 876px;
	height: 36px;
	padding-top: 18px;
	background: url("navigationpattern.gif") repeat-x;
}

#href a {
	padding-left: 50px;
	font-size: 18px;
	color: #ffffff;
	text-decoration: none;
}

#href a:hover {
	text-decoration: underline;
}

#footer {
	padding-top: 15px;
	text-align: center;
	width: 876px;
	height: 50px;
	margin: 0px auto;
	background: url("footerpattern.gif") repeat-x;
}

Code:

<body>
	<div id="header">
	VTR Interchange, Inc.
	</div>

	<div id="href">
		<a href="index.html">Home</a><a href="#">Services</a><a href="#">Certifications</a><a href="#">Resource Center</a><a href="#">Contact Us</a><a href="#">Links</a>
	</div>

	<div id="content">
		<div class="title">
		Welcome to VTR Interchange, Inc.
		</div>
		<div class="text">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu
ante, condimentum a, congue at, tincidunt condimentum, nisl. Ut urna sapien, vehicula
in, commodo eget, porta vitae, libero. Nunc dui. Phasellus ac ipsum. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis
tempor, dolor quis malesuada consectetuer, lorem orci tempor leo, eu vulputate justo
tortor sit amet arcu. Duis mauris dui, posuere ac, rhoncus sed, rhoncus nec, urna.
Donec ornare, eros cursus tristique auctor, erat ante placerat purus, vel scelerisque mi
ipsum at purus. Sed fringilla massa eget est. Morbi ultricies egestas lorem. Fusce enim.
Sed tortor nulla, tincidunt ut, laoreet non, ornare ac, ante. Mauris consectetuer. Donec
hendrerit sem nec lacus. Aenean consectetuer mauris ut enim. Pellentesque sit amet
mi at ligula mollis consectetuer. Phasellus at arcu. Phasellus eget velit id neque
posuere ullamcorper. In hac habitasse platea dictumst. Sed iaculis massa quis lectus.
		</div>
		<div class="title">
		Industry News
		</div>
		<div class="text">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu
ante, condimentum a, congue at, tincidunt condimentum, nisl. Ut urna sapien, vehicula
in, commodo eget, porta vitae, libero. Nunc dui. Phasellus ac ipsum. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis
tempor, dolor quis malesuada consectetuer, lorem orci tempor leo, eu vulputate justo
tortor sit amet arcu. Duis mauris dui, posuere ac, rhoncus sed, rhoncus nec, urna.
Donec ornare, eros cursus tristique auctor, erat ante placerat purus, vel scelerisque mi
ipsum at purus. Sed fringilla massa eget est. Morbi ultricies egestas lorem. Fusce enim.
Sed tortor nulla, tincidunt ut, laoreet non, ornare ac, ante. Mauris consectetuer. Donec
hendrerit sem nec lacus. Aenean consectetuer mauris ut enim. Pellentesque sit amet
mi at ligula mollis consectetuer.
		</div>
		<div class="titletwo">
		Some of our Services
		</div>
		<div class="texttwo">
		<ul>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
		</ul>
		</div>
		<div class="titletwo">
		For Sale
		</div>
		<div class="texttwo">
		<ol>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
			<li>Lorem ipsum dolor sit amet.</li>
		</ol>
		</div>
	</div>

	<div id="footer">
	Copyright &copy; 2008 VTR Interchange, Inc.. All rights reserved.
	Valid CSS and XHTML.
	</div>

</body>
</html>

kavjj · 05-04-2008, 18:32

i would recommend putting the 2 columns into separate containers and then floating, then you won't need to margin-left everything

digipaint · 05-04-2008, 18:38

Why have you gota div id of href? Just style the <a>
Why have you got a div id of header? just use <h1>
Why have you got a div class of Title? just use <h2> or <h3>
why have you got a div class of text? just use <p>

You may as well use table if you are going to use div's like that.

kavjj · 05-04-2008, 18:45

digipaint makes a very good point

Tamakyo · 05-04-2008, 22:23

I redid the coding from scratch. Everything is perfect now, but the background of the footer isn't showing.

Code:

<body>

	<h1>VTR Interchange, Inc.</h1>
<div id="href">
	<a href="#">link 1</a><a href="#">link 2</a><a href="#">link 3</a><a href="#">link 4</a><a href="#">link 5</a><a href="#">link 6</a><a href="#">link 7</a>
</div>
<div id="container">
	<div class="left">
	<h2>Test 1</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu ante, condimentum a, congue at, tincidunt condimentum, nisl. Ut urna sapien, vehicula in, commodo eget, porta vitae, libero. Nunc dui. Phasellus ac ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis tempor, dolor quis malesuada consectetuer, lorem orci tempor leo, eu vulputate justo tortor sit amet arcu. Duis mauris dui, posuere ac, rhoncus sed, rhoncus nec, urna. Donec ornare, eros cursus tristique auctor, erat ante placerat purus, vel scelerisque mi ipsum at purus. Sed fringilla massa eget est. Morbi ultricies egestas lorem. Fusce enim. Sed tortor nulla, tincidunt ut, laoreet non, ornare ac, ante. Mauris consectetuer. Donec hendrerit sem nec lacus. Aenean consectetuer mauris ut enim. Pellentesque sit amet mi at ligula mollis consectetuer. Phasellus at arcu. Phasellus eget velit id neque posuere ullamcorper. In hac habitasse platea dictumst. Sed iaculis massa quis lectus.</p>
	</div>
	<div class="right">
	<h2>Test 2</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu ante, condimentum a, congue at, tincidunt condimentum, nisl. Ut urna sapien, vehicula in, commodo eget, porta vitae, libero. Nunc dui. Phasellus ac ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis tempor, dolor quis malesuada consectetuer, lorem orci tempor leo, eu vulputate justo tortor sit amet arcu. Duis mauris dui, posuere ac, rhoncus sed, rhoncus nec, urna. Donec ornare, eros cursus tristique auctor, erat ante placerat purus, vel scelerisque mi ipsum at purus. Sed fringilla massa eget est. Morbi ultricies egestas lorem. Fusce enim. Sed tortor nulla, tincidunt ut, laoreet non, ornare ac, ante. Mauris consectetuer. Donec hendrerit sem nec lacus. Aenean consectetuer mauris ut enim. Pellentesque sit amet mi at ligula mollis consectetuer. Phasellus at arcu. Phasellus eget velit id neque posuere ullamcorper. In hac habitasse platea dictumst. Sed iaculis massa quis lectus.</p>
	</div>
</div>
<div id="footer">
Copyright &copy; 2008 VTR Interchange, Inc. All rights reserved.
</div>

</body>
</html>

Code:

body {
	background: url("pattern.gif") repeat-x;
}

#href {
	padding-top: 12px;
	width: 876px;
	height: 36px;
	background: url("navigationpattern.gif") repeat-x;
	margin: 0 auto;
}

#href a {
	padding-left: 30px;
	font-size: 22px;
	color: #fff;
	font-family: arial;
	text-decoration: none;
}

#href a:hover {
	text-decoration: underline;
}
	

#container {
	width: 876px;
	background-color: #fff;
	text-align: justify;
	margin: 0 auto;
}

#container .right {
	width: 438px;
	float: right;
	background-color: #fff
}

#container .left {
	width: 438px;
	float: left;
	background-color: #fff
}

h1 {
	padding-top: 20px;
	padding-bottom: 10px;
	width: 876px;
	color: #fff;
	font-family: georgia;
	font-size: 44px;
	margin: 0 auto;
}

h2 {
	padding-top: 5px;
	padding-left: 30px;
	color: #36424a;
	font-size: 24px;
}

p {
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 10px;
	color: #36424a;
	font-family: arial;
	font-size: 13px;
}

#footer {
	color: #36424a;
	font-family: arial;
	font-size: 13px;
	text-align: center;
	width: 876px;
	height: 50px;
	background: url("footerpattern.gif") repeat-x;
	margin: 0px auto;
}

Tamakyo · 05-04-2008, 22:26

Nevermind; thanks to everybody who replied to my thread!

05-04-2008, 14:29	#2 (permalink)
bluesage Senior Member Join Date: Dec 2006 Location: Switzerland Posts: 318	if you dont show the html code that goes with it, will be very hard to give you advice what your missing is a float. If you want to build css columns without table use, then you need to learn to use css "float". Search for css faux columns or css float for more info. a few links to get you started. Floatutorial: Step by step CSS float tutorial CSS Float Property A List Apart: Articles: Faux Columns __________________ www.benshu.ch // Evolving with Style

05-04-2008, 15:00	#4 (permalink)
Do Gooder Join Date: May 2007 Posts: 4,302	i find in some cases you might need to clear your floats as well. CSS: .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } HTML: <div class="clearfloat"></div> Last edited by Do Gooder : 05-04-2008 at 15:11.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

05-04-2008, 14:55	#3 (permalink)
Tamakyo Registered User Join Date: Apr 2008 Posts: 5	I finally created the second column; I used Code: float: left for the first column and Code: margin-left: 500px for the second column.

05-04-2008, 18:32	#6 (permalink)
kavjj A-Line Join Date: Feb 2005 Location: London Posts: 5	i would recommend putting the 2 columns into separate containers and then floating, then you won't need to margin-left everything

05-04-2008, 18:38	#7 (permalink)
digipaint My Brand New Computer! Join Date: Mar 2007 Location: London Posts: 238	Why have you gota div id of href? Just style the <a> Why have you got a div id of header? just use <h1> Why have you got a div class of Title? just use <h2> or <h3> why have you got a div class of text? just use <p> You may as well use table if you are going to use div's like that.

05-04-2008, 18:45	#8 (permalink)
kavjj A-Line Join Date: Feb 2005 Location: London Posts: 5	digipaint makes a very good point

05-04-2008, 22:26	#10 (permalink)
Tamakyo Registered User Join Date: Apr 2008 Posts: 5	Nevermind; thanks to everybody who replied to my thread!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)