CODEWITHSUNDEEP
html
user6397910
user6397910

Reputation:

How can I put two div-tags next to each other?

How can I put two div-tags next to each other? I tried this:

<div>text 1</div><div>text 2</div>

But they appear underneath each other, just as I would have written them in two lines.

Upvotes: 1

Views: 4017

Answers (4)

Girish Patil
Girish Patil

Reputation: 154

for a perfect resizing use flexbox wrap those divs in one parent with this the inner divs will stretch completely

<div id="parent">
<div>text 1</div><div>text 2</div>
</div>

css 

#parent{
display:flex;
flex-wrap:wrap;
width: 100%;
}
#parent div{
flex-grow:1;
}

Upvotes: 0

Jonathan Kempf
Jonathan Kempf

Reputation: 697

Actually, you don't need floats for something this simple. Simply changing the display type to inline will take care of this for you.

See my pen here: http://codepen.io/KempfCreative/pen/oLNqMZ

div { display: inline; }

is all you need

Upvotes: 0

Jason Graham
Jason Graham

Reputation: 904

Div's are block level elements, meaning they'll occupy all available space unless told otherwise. In order to display them side-by-side, you'll need to use the CSS property float.

CSS

.float-left{
    float: left;
}

than in HTML just assign that class name like:

<div class="float-left"> 1 </div>
<div class="float-left"> 2 </div>

Upvotes: 2

Shadi Shaaban
Shadi Shaaban

Reputation: 1720

use css float:

you need float: left or right with a specified width for the divs to be aligned beside each other.

<div style="float:left; width:50%; background:yellow">text 1</div><div style="float:left; width:50%; background:green">text 2</div>

Upvotes: 1

Related Questions