How to put elements next to each other horizontally

Cristian · Nov 26, 2007

I have this div for the top of my page. Nested into it, I have a
heading and another div. How can I make that heading and div stand
next to each other horizontally?
I have tried turning them into inline elements, but always one appear
in the top and the other in the bottom of it. I have used floats,
unsuccessfully.
The home page of Inkscape - http://inkscape.org/ - sets a heading
next to a div just the way I want it. I have looked into their CSS
file and tried to do the same, however, I think my knowledge is too
limited at this moment. Could anyone explain me how to do that?
Not sure if it works, but I have this example of the HTML I am using.

<body>
<div id="all">

<h1>Heading</h1>

<div id="right">
<p>Paragraph</p>
</div>

</div>
</body>

dorayme · Nov 26, 2007

<[email protected]
m>,

Cristian said:
I have this div for the top of my page. Nested into it, I have a
heading and another div. How can I make that heading and div stand
next to each other horizontally?
I have tried turning them into inline elements, but always one appear
in the top and the other in the bottom of it. I have used floats,
unsuccessfully.
The home page of Inkscape - http://inkscape.org/ - sets a heading
next to a div just the way I want it. I have looked into their CSS
file and tried to do the same, however, I think my knowledge is too
limited at this moment. Could anyone explain me how to do that?
Not sure if it works, but I have this example of the HTML I am using.

<body>
<div id="all">

<h1>Heading</h1>

<div id="right">
<p>Paragraph</p>
</div>

</div>
</body>

Is this the sort of effect you want:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<style type="text/css" media="all">
p {margin-left: 10em; font-size: 1em;}
h1 {float:left; width: 5em; font-size: 2em;}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque augue.Suspendisse consectetuer velit nec neque. Duis
nec orci quis nulla egestas fermentum.Ut quis eros. Aenean at
augue vitae quam posuere vehicula. Pellentesque habitantmorbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Maecenas justonunc, porta sed, molestie eget, adipiscing id,
ante. Cum sociis natoque penatibus etmagnis dis parturient
montes, nascetur ridiculus mus. Suspendisse potenti. Nunc
blanditmagna id odio sodales luctus. Nulla quam magna, viverra
quis, dignissim blandit, viverra nec, odio.</p>
</body>
</html>

?

There are some nice issues here.

kailash nadh · Nov 26, 2007

I have this div for the top of my page. Nested into it, I have a
heading and another div. How can I make that heading and div stand
next to each other horizontally?
I have tried turning them into inline elements, but always one appear
in the top and the other in the bottom of it. I have used floats,
unsuccessfully.
The home page of Inkscape -http://inkscape.org/- sets a heading
next to a div just the way I want it. I have looked into their CSS
file and tried to do the same, however, I think my knowledge is too
limited at this moment. Could anyone explain me how to do that?
Not sure if it works, but I have this example of the HTML I am using.

<body>
<div id="all">

<h1>Heading</h1>

<div id="right">
<p>Paragraph</p>
</div>

</div>
</body>

Give the h1 and #right widths and try floating them (if you fail to
give proper widths, the elements won't float). Example css.
<style type="text/css">

</style>

rf · Nov 26, 2007

kailash nadh said:
On Nov 26, 4:01 am, Cristian <[email protected]> wrote:

Give the h1 and #right widths and try floating them (if you fail to
give proper widths, the elements won't float).

Nope. They will float. If you fail to give them width the the width defaults
to auto and the used value is the "shrink-to-fit" width.

Box not floating next to each other	1	Dec 23, 2021
How to use PDF-lib and how to center each line of texts on the page?	1	Aug 16, 2023
How can I add arrows to my FAQ	0	Aug 9, 2023
Uhhhhh, What can I do next?	6	Nov 25, 2023
Search Results with Pagination	0	Oct 25, 2024
How can I add React 18 to existing HTML?	2	Mar 27, 2023
How to properly insert a landing page within same container beneath an image element?	0	Oct 7, 2024
Problem with a login script, SESSION user rights and put this together so it works with the other pages and MySQL. Code examples.	2	May 5, 2023

How to put elements next to each other horizontally

Cristian

dorayme

kailash nadh

rf

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads