CODEWITHSUNDEEP
htmlcssblock
shp
shp

Reputation: 3

HTML, Place divs near each other

I have a problem in my html code. I have "Title" , "Firstname" and "Surname" and I need an input box bellow them to be completed by users. these input boxes are defined in my form generator as fields (e.g. [en_title]) Now when I write down the html code to show the output, the blocks are placed under each other. I want to place them near each other and when I use float in my div style, they place near each other BUT the input boxes shrink, while in first case the input boxes don't shrink. Please give me a solution for this issue that the blocks placed near each other and the boxes don't shrink. thanks

<div>
  Title <br />
  [en_title]
</div>
<div>
  Firstname <br />
  [en_fname]
</div>
<div>
  Surname <br />
  [en_sname]
</div>

Upvotes: 0

Views: 152

Answers (4)

1ronmat
1ronmat

Reputation: 1177

So you have 3 div that you want to place near each other horizontally. the width of the div which contain all these div is 100%. So each div have a 100/3 % width. It works as Bootstrap for example.

You can do that like this

Run the snippet

.your-block {
    float: left;
    width: 33.33333%;
}
<div class="your-block">
    <label for="title">Title </label> <br />
    <input id="title" type="text"/>
</div>
<div class="your-block">
    <label for="firstname">firstname </label> <br />
    <input id="firstname" type="text"/>
</div>
<div class="your-block">
    <label for="surname">surname </label> <br />
    <input id="surname" type="text"/>
</div>

Upvotes: 0

cloned
cloned

Reputation: 6742

Better solution: Don't use divitis for this, use labels and input fields:

HTML:

<form>
  <label> Name <input type="text"> </label>
  <label> Email <input type="email"> </label>
</form>

CSS: 

form{display: flex}

This way you have semantic HTML and achieve the look you want. A good overview on what can be done with flexbox is on css-tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Ankit Chaudhary
Ankit Chaudhary

Reputation: 4089

Use display:inline-block; instead of float

div{
display:inline-block;
}
<div>
Title <br />
<input type="text"/>
</div>
<div>
Firstname <br />
<input type="text"/>
</div>
<div>
Surname <br />
<input type="text"/>
</div>

Upvotes: 1

Aniket Mainkar
Aniket Mainkar

Reputation: 45

you will need to use width and also use position:absolute so that you can move your control anywhere with margin-left:10px or margin-top:10px whatever in your case. Also it would be helpful if you share your css code for the same.

Upvotes: 0

Related Questions