Hello, I need to put two <p> or <div> tags right next to each other so horizontally they line up with each other.

So it would like something like:

<p>Text</p><p>More Text</p>
<div>Text</div><div>More Text</p>

But I want them to be on the same plane horizontally. How would I do this? I Can't use a table because my space is limited and tables don't work well in other browsers. They have to line up in a <dt> tag too.

Recommended Answers

All 6 Replies

Actually it is not possible with <p> tag but u can do the same thing with <div> tag. What u need to do is give margin style to both the <div> tags and mention the width for each of the <div> tags.. Hope it will work.

is there anyway I can then add spacing to them? I want them to be on the same plane which that does, but I also want them to be aligned to the left and right, but when I tried using the align property it didn't seem to do anything.

oh we posted around the same time, didn't see your response, but that is working thanks!

i have a question about putting these two div boxes next to each other. lets say i make a div called container and make it 800 px wide.
then i make the two boxes that sit next to each other and make them 400px wide each. am i doing something wrong or does both padding and margin affect if they both fit next to each other? i could see margin throwing it off but isn't padding inside the box? thanks in advance 4 any replies

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- @(#) $Id$ -->
<head>
<title>bal bla</title>
<style type='text/css'>
.left { width: 39%; float:left; test-align:left; display:inline; }
.right { width: 39%; float:right; text-align:left; display:inline; }
.container { width: 80%; margin:auto;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
</head>
<body>
<div class='container'>
<div class='left'>this is left</div>
<div class='right'>this is not left</div>
</div>
</body>
</html>

The outer container div serves to keep the two inner divs aligned if one has 1000 lines of text, and one does not,
fixed pixel widths fail/ get scroll bars on less than fullscreen windows, W3C reccommends em % as element sizes,

display: inline; seems to fix IE bugs

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.