HTML and CSS

Putting two p or div tags horizontally aligned on same plane

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Feb 2007

Posts: 72

Reputation: adaykin is an unknown quantity at this point

Solved Threads: 0

adaykin

Offline

Junior Poster in Training

Putting two p or div tags horizontally aligned on same plane

May 29th, 2008

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:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<p>Text</p><p>More Text</p>
<div>Text</div><div>More Text</p>
<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.

My Website <-- check out my site!

•

Join Date: Feb 2002

Posts: 12,036

Reputation: cscgal is a glorious beacon of light

Solved Threads: 130

cscgal

Offline

The Queen of DaniWeb

Re: Putting two p or div tags horizontally aligned on same plane

May 29th, 2008

<div style="display:inline">

Dani the Computer Science Gal

Follow my Twitter feed! twitter.com/daniweb

•

Join Date: May 2008

Posts: 48

Reputation: ardeezstyle is an unknown quantity at this point

Solved Threads: 1

ardeezstyle ardeezstyle is offline

Offline

Light Poster

Re: Putting two p or div tags horizontally aligned on same plane

May 29th, 2008

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.

Rupam Datta
ardeezstyle@gmail.com

•

Join Date: Feb 2007

Posts: 72

Reputation: adaykin is an unknown quantity at this point

Solved Threads: 0

adaykin

Offline

Junior Poster in Training

Re: Putting two p or div tags horizontally aligned on same plane

May 29th, 2008

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.

My Website <-- check out my site!

•

Join Date: Feb 2007

Posts: 72

Reputation: adaykin is an unknown quantity at this point

Solved Threads: 0

adaykin

Offline

Junior Poster in Training

Re: Putting two p or div tags horizontally aligned on same plane

May 29th, 2008

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

My Website <-- check out my site!

•

Join Date: Aug 2009

Posts: 1

Reputation: chris832 is an unknown quantity at this point

Solved Threads: 0

chris832

Offline

Newbie Poster

Re: Putting two p or div tags horizontally aligned on same plane

Aug 10th, 2009

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

•

Join Date: Jan 2009

Posts: 1,315

Reputation: almostbob has a spectacular aura about

Solved Threads: 161

almostbob

Offline

Nearly a Posting Virtuoso

Re: Putting two p or div tags horizontally aligned on same plane

Aug 10th, 2009

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
 <!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>
 <!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

Last edited by almostbob; Aug 10th, 2009 at 10:29 pm.

Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved

Quick Reply to Thread

Show Printable Version

Other Threads in the HTML and CSS Forum

Previous Thread: Frames
Next Thread: Make text inside a textfield display when the page loads and disapear when clicked

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes