Geek Answers Handbook

How to make two <div> ... </div> in one line?

I mean, two tags have the same height.

+5
source share
6 answers

Try this for all divs.

display:inline-block;
+10
source

Simple: use <span>instead .

<div>by default they have display: block, that is, the next element will be in a new line.

You can change them display: inlineto get the desired behavior. But remember that the built <div>-in is just that <span>.

+9
source

css:

float: left
+2

div div.

.div_container{
    display: flex;
    flex-direction: row;
}

!

+2

:

HTML


<div class="container1"></div>
<div class="container2"></div>
<div class="clear"></div>

CSS


.clear { clear: both; }
.container1, .container2 { float: left; }

float.. clear:)

+1
source

Float will ruin my alignment to the center of the page. This is what I got, I want to get 2 and 3 in one line without losing page centering. Float does not work, because when you resize the browser, it moves with it.

<head>
<meta http-equiv="Content-Language" content="en-us">
<style type="text/css">
.div1 {
   background: #faa;
   width: 500;
 }

.div2 {
  background: #ffc;
  width: 400;
  margin-right: 100px;
}
.div3 {
  background: #cfc;
  width: 100;
  margin-left: 400px;

}


</style>
</head>

<html>
<body>
<center>

<div class="div1"> This is no 1</div>
<div class="div2"> This is no 2</div>
<div class="div3"> This is no 3</div>

</center>
</body>
</html>
+1
source

More articles:


All Articles