Jump to content

Two divs side by side with dots


srautpyaa

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
Link to comment
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>

Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...