www.webdeveloper.com
Results 1 to 2 of 2

Thread: How tro heep elements on the same line

  1. #1
    Join Date
    Sep 2006
    Posts
    192

    How tro heep elements on the same line

    <div>
    <div id="1st">First</div><div id="2nd">Second</div>
    </div>

    When displayed, the words "First" and "Second" are in two separate lines.

    How can I keep them in the same line?

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    There are a few ways you could do it.

    Floating the elements:
    Code:
    <div>
    	<div id="1st" style="float: left;">First</div><div id="2nd" style="float: left;">Second</div>
    	<div style="clear: both;"></div>
    </div>
    Making the block elements render inline:
    Code:
    <div>
    	<div id="1st" style="display: inline-block;">First</div><div id="2nd" style="display: inline-block;">Second</div>
    </div>
    Or simply using an inline element:
    Code:
    <div>
    	<span id="1st">First</span><span id="2nd">Second</span>
    </div>
    JavaScript: Learn | Validate | Compact | bionoid

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles