Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

How to code this?

Started by Extinct, Oct 15 2006 02:52 AM

You cannot reply to this topic
Go to first unread post

3 replies to this topic

#1 Extinct

Young Padawan

Members
27 posts

Gender:Male
Location:USA

Posted 15 October 2006 - 02:52 AM

I would just want to say Hello to everyone since this is my first post.

My problem is I want to code this:
Posted Image

*That is not my real image just an example

But I can't because I am not so good at XHTML/CSS coding with divs and CSS instead of tables and I really want to learn.

I tried to code that in just divs but I always get it like this:
Posted Image

Could anyone help me with this how to code this with divs?

Back to top

#2 God

Young Padawan

Members
80 posts

Gender:Male
Location:Australia
Interests:You all suck at life. (Mished.net)

Posted 23 October 2006 - 02:46 AM

I guess this would do the trick.

It came out fine in both IE and Firefox

<html>
<head>
<style type="text/css" media="screen">
body {
	text-align: center;
	font-family: verdana;
	font-size: 11px;
}

.container {
	background-color: #111111;
	width: 900px;
	margin: 0px auto 0px auto;
}

.right-side {
	float: right;
	width: 160px;
	color: #FFFFFF;
}

.left-side {
	float: left;
	width: 160px;
	color: #FFFFFF;
}

.right-side2 {
	background-color: #FFFFFF;
	float: right;
	width: 180px;
}

.left-side2 {
	background-color: #FFFFFF;
	float: left;
	width: 180px;
}

.content {
	margin: 0px 165px 0px 165px;
}

.content2 {
	margin: 0px 185px 0px 185px;
	color: #FFFFFF;
}

.viewall {
	background-color: #111111;
	color: #FFFFFF;
	text-align: right;
}
</style>
</head>

<body>

<div class="container">

	<div class="right-side">
		<div style="padding: 10px;">your right side bar side bar</div>
	</div>
	
	<div class="left-side">
		<div style="padding: 10px;">your right side bar side bar</div>
	</div>
	
	<div class="content">
	
		<div class="right-side2">
			<div style="padding: 10px;">your right side bar side bar</div>
			<div class="viewall">view all</div>
		</div>
		
		<div class="left-side2">
			<div style="padding: 10px;">your right side bar side bar</div>
			<div class="viewall">view all</div>
		</div>
		
		<div class="content2">
			<div style="padding: 10px;">your login</div>
		</div>
	
	</div>
	
	<div style="clear: both;"></div>

</div>

</body>
</html>