CODEWITHSUNDEEP
csshtmlposition
user2602766
user2602766

Reputation: 171

How to place Textboxes Side by Side in HTML/CSS

I want to know how to make it so that the two square textboxes are placed next to each other side by side rather than on top of each other.

CSS

input {
    display: block;
    box-sizing: border-box;
}
.textbox { 
    border: 1px solid #848484; 
    -moz-border-radius-topleft: 30px;
    -webkit-border-top-left-radius: 30px;
    border-top-left-radius: 30px;
    -moz-border-radius-topright: 30px;
    -webkit-border-top-right-radius: 30px;
    border-top-right-radius: 30px;
    border: 1px solid #848484;
    outline:0; 
    height:25px; 
    width: 300px; 
    padding-left:20px; 
    padding-right:20px;
} 

.textbox1 { 
    border: 1px dotted #000000; 
    outline:0; 
    height:25px; 
    width: 150px; 
} 

.textbox2 { 
    border: 1px dotted #000000; 
    outline:0; 
    height:25px; 
    width: 150px; 
}

HTML

<input class="textbox"type="text"> 
<input class="textbox1"type="text"> 
<input class="textbox2"type="text">

Upvotes: 0

Views: 10949

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25974

Use display:inline-block; for your inputs

Also, I don't think you understand how classes work. textbox is completely different than textbox1, they won't share any properties. If you are looking to set each of their CSS properties individually then you should use IDs (using #textbox1 in your CSS as opposed to .textbox1). What I would recommend is putting all of your common styles (such as border, outline, height, and perhaps also your radiuses) in a class applied to each input and use IDs to style the ones individually. The other option is to use the attribute contains selector like [class *= textbox] which will select all elements with "textbox" in the class name.

Here's a demo, assuming you want the border radius on each of the inputs. If you don't, simply move it from the textbox class and put it in the #first section

Upvotes: 10

Related Questions