Dividing a DIv section into two

HTML & CSS
1

Hi

Does anyone know how can divide a div section into two and display content in it side by side a bit like two table cells in a table row.

When I do <div width=100%> <div width=50%> content A </div> <div width=50%> content B </div> </div>

The content B appears below content A and not next to it. How do I get it to display next to it?

Regards

Explorer

2

Refer to this site for examples: http://www.code-sucks.com/css&#37;20layouts/

3

For something like that you’ll just need the following code.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
* {
	padding: 0; margin: 0;	
}
html {
	height: 100.1&#37;;	
}
#content1 {
	float: left;
	width: 50%;
	background-color: #DDD;
}
#content2 {
	float: left;
	width: 50%;
	background-color: #CCC;
}
</style>
</head>
<body>
	<div id="content1">content 1</div>
	<div id="content2">content 2</div>
</body>
</html>

Don’t forget to put your CSS into an external CSS file :wink:

4

It really depends on what the content is - just dividing a div with two other divs to put content into is still thinking like a table layout. Quite often, the content itself can be positioned without putting it into a container - if the content was, say, a paragraph of text and an image (if the image is valid content), the paragraph and image can be floated direct without any other containers. In the above scenario, if the image was presentational (to illustrate the paragraph), then it would be applied and positioned as a background and the paragraph confined to the remainder of the div using padding. Which method to use really depends on the content - if multiple types of content need to be positioned as a group, then by all means wrap them in a container, otherwise separate containers may not be needed at all.