Jump to content
Sign in to follow this  
srautpyaa

Two divs side by side with dots

Recommended Posts

Dear all, I am facing one problem with divs. I have included the below code in html. <div style="float: left">Satyaprasad</div><div style="border-bottom: 2px dotted #000000"></div> Actually my required output is as shown below. Satyaprasad............................................................................................. But i am getting the output as shown below...................................................................................................................Satyaprasad Please help me, is there any mistake in my code. Thanks inadvance.-Satyaprasad

  • Like 1

Share this post


Link to post
Share on other sites

could try something like this

<div style="width: 10%; float: left; text-align: right;">Satyaprasad</div><div style="width: 40%; float: left;border-bottom: 2px dotted #000000"> </div>

Share this post


Link to post
Share on other sites

Srautpyaa. By default, div elements are "block" elements. A block element is an element that takes up the full width available, and has a line break before and after it. You need to change both of your divs display properties to "inline". Like so ...

<div style="display:inline;">Satyaprasad</div><div style="display:inline; border-bottom: 2px dotted #000000"></div>

What you'll then find is that the two divs sit side by side. You may also notice that I've removed the "float:left" property as I believe this is no longer required. However, that may depend on what exactly you intend to do next. What you'll find though, with the code above, is that the dotted border only appears if the second div has content. If you simply want the text beside some dotted lines you could try this.

<div><p>Satyaprasad..................................</p></div>

Alternatively, if you could provide us with some additional information as to what exactly you're aiming for we may be able to give you some other suggestions.

Edited by deldalton

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...