page layout using css

Page 1 of 1

1 Replies - 519 Views - Last Post: 12 April 2010 - 04:36 AM

#1 machoolah  Icon User is offline

  • D.I.C Head

Reputation: -6
  • View blog
  • Posts: 87
  • Joined: 17-May 09

page layout using css

Posted 10 April 2010 - 03:24 PM

Hello
I am trying to make a very simple table using css but it is not turning out the way I like it to be.

Here are the HTML and CSS code I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="posttable">
	 	<div class="individualpost">
	 		
	 		<div class="title">
	 			This is the title
	 		</div>
	 		
	 		<div class="userinfo">
	 			This is the user info section
	 		</div>
	 		
	 		<div class="postbody">
	 			This is the post body
	 		</div>
	 	</div>
		
	</div>

</body>
</html>




and 


@CHARSET "UTF-8";


#posttable{
width:100%;
	border-style:solid;
	border-width:1px;
	border-color:#999999;
	background-color:green;
	z-index:-1;
}


.individualpost{
	width:100%;
	border-style:solid;
	border-width:1px;
	border-color:#999999;
	margin:3px;
	background-color:red;
 }
 
.title{

	width:100%;
	border-style:solid;
	border-width:1px;
	border-color:#999999;
 }
 
.userinfo{
	position:relative;
	width:30%;
	float:left;
}

 
.postbody{
	position:relative;
	width:70%;
	float:right;

 }



I would like to have a table devided into 3 sections. A section at top which contains the title of the table. Anything below the title will be devided in 2. The part on the left will have userinfo, and the part on the right will have post body.

Can anyone tell me what is wrong with my code.

Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: page layout using css

#2 aklo  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 229
  • Joined: 23-January 09

Re: page layout using css

Posted 12 April 2010 - 04:36 AM

you should add a height so that the both column show when you are still designing the layout.

NOTE: If you have contents, you will see that the height of both the columns will depend on the amount of content you have if you did no specify the height in the css.
However if you specify a height, i believe in firefox, the text will overflow.
So you probably need to find a better method to do things or use "Faux columns"

I've added only the height and color for easy viewing.

.userinfo{
	position:relative;
	width:30%;
	float:left;
	height:500px;
	background:#e0e0e0;
}

 
.postbody{
	position:relative;
	width:70%;
	float:right;
	background:#ffeecc;
	height:500px;

 }


Before you paste the below code, see how it displays. Now.
You will notice that the background of your posttable did not wrap around the entire page...


You will need to have a css clear:both so that your posttable div will "wrap the 2 columns below"

.clear{
clear:both;
}



The below is your code but i added 1 line of a div with class of "clear"

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="posttable">
	 	<div class="individualpost">
	 		
	 		<div class="title">
	 			This is the title
	 		</div>
	 		
	 		<div class="userinfo">
	 			This is the user info section
	 		</div>
	 		
	 		<div class="postbody">
	 			This is the post body
	 		</div>
	 	</div>
		
		<div class="clear"></div>
	</div>

</body>
</html>

This post has been edited by aklo: 12 April 2010 - 04:43 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1