Positioning two divs side by side

**spacix** · Aug 31 '07, 08:56 PM

use spans inside your content div instead of more divs if you want them to be side-by-side and then they wont line break (span and div are mostly the thing except for the break at end) and you won't need the z-index anymore too!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>
Oliver's Blog
</title>

<style type="text/css">

body {
	background: #00A5DE; 
	background-image: url('Layout/blog_layout.png');
	background-repeat: no-repeat;
	background-position: top center;
	}
	
div.content{
	margin-left: auto;
	margin-right: auto;
	width: 700px;
	height: 750px;
	border: 1px solid #000000;
	}
	
div.nav	 {
	position: relative;
	height: 475px;
	width: 195px; 
	top: 245px;
	float: left;
	border: 1px solid #000000
	}

div.blog {
	position: relative;
	height: 450px;
	width: 467px;
	top: 230px;
	left: 226px;
	border: 1px solid #000000
	}
</style>
</head>

<body>

<div class="content">

<span class="nav">
This is a piece of test writing
</span>

<span class="blog" style="clear: both">
This is another piece of test writing
</span>

</div>

</body>
</html>

**gregerly** · Aug 31 '07, 09:04 PM

I think the best way to position to div elements side by side is by the use of a float. The code could look like this:

[HTML]<div id='div1'></div>
<div id='div2'></div>[/HTML]

[CODE=CSS]#div1{float:lef t; width:400px;}[/CODE]

This would make div1 400px wide, with div2 placed directly to the side of div1.

Greg

**olivermccallion** · Aug 31 '07, 09:18 PM

Yeah, thats what I've tried. In the div.nav, there's the float: left; attribute. But it doesn't seem to be doing anything. What am I doing wrong?
Thankyou!

**spacix** · Aug 31 '07, 09:25 PM

but if you just switch to spans (the code I posted tested fine in FF and IE for me) you can allow for auto sizing for people with large resolutions and increased text sizes, tho floating it on top will work too for a fixed position. It only matters on how you want it to look, but the swap to inline span's would be my preference / method...

I can see why you didn't know/find the answer to this with google as what you wanted to do needed diffrent tag.

more info on span:

Originally posted by http://www.w3schools.c om/tags/tag_span.asp

HTML <span> tag
Definition and Usage

The <span> tag is used to group inline-elements in a document.
Differences Between HTML and XHTML

NONE
Tips and Notes

Tip: Use the <span> tag to group inline-elements to format them with styles

Originally posted by http://www.w3schools.c om/tags/tag_div.asp

HTML <div> tag
Definition and Usage

The <div> tag defines a division/section in a document.
Differences Between HTML and XHTML

The "align" attribute of the div element was deprecated in HTML 4.01.

The "align" attribute of the div element is not supported in XHTML 1.0 Strict DTD.
Tips and Notes

Note: Browsers usually place a line break before and after the div element.

Tip: Use the <div> tag to group block-elements to format them with styles.