hi guys, just need some insight.
In css how to position objects next to each other, like:
First Object | Second Object | Third Object
i had tried, float:right and position relative but it's not horizontally align.
can anyone give an example, thank you.
Is it just text you're aligning or are they images or other elements?
Have you tried just coding them inline?
I.e.:
<!-- Assuming you're using images -->
<img src="images/image1.jpg" alt="image 1" /> | <img src="images/image2.jpg" alt="image 2" /> | <img src="images/image3.jpg" alt="image 3" />You can use "float: left" on the child elements and they will horizontally align so long as their parent container is wide enough for them to fit. E.g.
<style type="text/css">
#parent {width:300px}
.child {float:left;width:100px}
</style>
<div id="parent">
<div class="child">First Object</div>
<div class="child">Second Object</div>
<div class="child">Third Object</div>
</div> <div> tags are naturally display: block; so if you're going to use peachy0685's method, you should use either <span> or in the class of the <div> put display: inline; otherwise you might get each element on a new line. There are some things that <div> supports that <span> doesn't. For example, positioning.
<div>tags are naturallydisplay: block;so if you're going to use peachy0685's method, you should use either<span>or in the class of the<div>putdisplay: inline;otherwise you might get each element on a new line. There are some things that<div>supports that<span>doesn't. For example, positioning.
That's a good point Borzoi, but can you indicate a situation where float: left would not work when used on divs?
That's a good point Borzoi, but can you indicate a situation where
float: leftwould not work when used on divs?
I cannot indicate any situation where it wouldn't work but I was referring to the internal <div> tags which wouldn't be floating, not the wrapping one.
Try both of these codes to see what I mean:
(use one of the w3schools "TryIt" pages if you want).
<html>
<head>
<title>banana</title>
</head>
<body>
<div style="float: left; color: #5555ff;">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</div>
<p>This will be the content of the site.</p>
</body>
</html><html>
<head>
<title>banana</title>
</head>
<body>
<div style="float: left; color: #5555ff;">
<div style="display: inline;">Element 1</div>
<div style="display: inline;">Element 2</div>
<div style="display: inline;">Element 3</div>
</div>
<p>This will be the content of the site.</p>
</body>
</html>You probably don't even need the internal <div> tags and just need the element itself, whether it's image or text. As long as they're coded without a <br /> or without their own positioning of some sort, they should be displayed on the same line. The second code I provided would display the same as:
<html>
<head>
<title>banana</title>
</head>
<body>
<div style="float: left; color: #5555ff;">
Element 1
Element 2
Element 3
</div>
<p>This will be the content of the site.</p>
</body>
</html>The float: left; would probably be better left out if it's for a menu bar of some sort so that the content is automatically placed beneath it.
<html>
<head>
<title>banana</title>
</head>
<body>
<div style="color: #5555ff;">
Element 1
Element 2
Element 3
</div>
<p>This will be the content of the site.</p>
</body>
</html>
Another way,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#objectBar ul {
list-style-type: none;
}
#objectBar li {
display: inline;
padding: 5px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="objectBar">
<ul>
<li>First Object</li><li>|</li>
<li>Second Object</li><li>|</li>
<li>Third Object</li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
| should be the HTML code, not the character itself. The text editor here automatically changes it, but it can be found here.height.text-align: center; to the ul rule.width and add margin: 0 auto; to the objectBar or the ul rule.float: left; over display: inline;, for whatever reason, a clear: left; will be needed for the content division to start on a new line.Regards, Arkinder
hi guys, thanks for all your insight..
just want to share also this code, which i had found while trawling the web,
which will display items in one line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<p>
<a href="#item1">item 1</a>
<a href="#item2">item 2</a>
<a href="#item3">item 3</a>
<a href="#default">clear</a>
</body>
</html>cguan_77,
You haven't closed your <p> tag and you're missing a <title> tag. That page would not validate, especially with that doctype.
The a tag is an inline element, and displays inline by default. ^_^
Regards, Arkinder
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.