CSS Alignment

Question

cguan_77 8 Nearly a Posting Virtuoso

13 Years Ago

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.

web-design

4 Contributors
9 Replies
204 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Arkinder

All 9 Replies

Borzoi 24 Posting Whiz

13 Years Ago

<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.

cguan_77 commented: thanks i don't know that css got inline command +0

Borzoi 24 Posting Whiz

13 Years Ago

That's a good point Borzoi, but can you indicate a situation where float: left would 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>

Arkinder 93 Posting Pro in Training

13 Years Ago

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>

The | should be the HTML code, not the character itself. The text editor here automatically changes it, but it can be found here.
For more space between the bar and the content, simply give the objectBar a height.
To center the objects, add text-align: center; to the ul rule.
To center the bar itself, set a width and add margin: 0 auto; to the objectBar or the ul rule.
If you are using images and would like to move them vertically, use the vertical-align property.
Should you prefer to use 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

Edited 11 Years Ago by Dani because: Formatting fixed

cguan_77 commented: Thank you :) +0

Reply to this topic

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.

Borzoi 24 Posting Whiz · Answer 1 · 2010-11-29T17:20:44+00:00

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" />

peachy0685 0 Newbie Poster · Answer 2 · 2010-11-29T17:36:55+00:00

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>

peachy0685 0 Newbie Poster · Answer 3 · 2010-11-29T17:54:28+00:00

<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.

That's a good point Borzoi, but can you indicate a situation where float: left would not work when used on divs?

cguan_77 8 Nearly a Posting Virtuoso · Answer 4 · 2010-11-30T13:25:41+00:00

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>

Borzoi 24 Posting Whiz · Answer 5 · 2010-11-30T16:15:15+00:00

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.

Arkinder 93 Posting Pro in Training · Answer 6 · 2010-11-30T17:23:12+00:00

The a tag is an inline element, and displays inline by default. ^_^

Regards, Arkinder

CSS Alignment

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers