Thread: Can't Create a Second Column in CSS
View Single Post
Old 05-04-2008, 17:50   #5 (permalink)
Tamakyo
Registered User
 
Join Date: Apr 2008
Posts: 5
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>
  Reply With Quote