CODEWITHSUNDEEP
htmlcss
user3835327
user3835327

Reputation: 1204

How to align div box with text next to each other

how to make div box and text together next to each other ? please check the code snippet, expected div box with text right to it and each div box next to each other in 1 row .

.foo {

  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.purple {
  background: #461A3F;
  border-radius:2px;
  border:0px;
}
.brown {
  background: #C58E4D;
  border-radius:2px;
  border:0px;
}
.black {
  background: #34332E;
  border-radius:2px;
  border:0px;
}
.orange {
  background: #EC4535;
  border-radius:2px;
  border:0px;
}
.blue {
  background: #62a8ea;
  border-radius:2px;
  border:0px;
}
.red {
  background: #E2001C;
  border-radius:2px;
  border:0px;
}
<div class="foo purple"></div>TEST A 
<div class="foo brown"></div>TEST B
<div class="foo black"></div>TEST C
<div class="foo orange"></div>TEST D
<div class="foo red"></div>TEST E

Upvotes: 0

Views: 81

Answers (6)

Andrew Bone
Andrew Bone

Reputation: 7291

Flexbox is new (ish) and exciting and your friend for this sort of situation.

You'll see I added a bunch of <span> with the class .flex and in the css I defined .flex as

.flex {
  display: flex;
  align-items: center;
}


.flex {
  display: flex;
  align-items: center;
}
.foo {
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.purple {
  background: #461A3F;
  border-radius: 2px;
  border: 0px;
}
.brown {
  background: #C58E4D;
  border-radius: 2px;
  border: 0px;
}
.black {
  background: #34332E;
  border-radius: 2px;
  border: 0px;
}
.orange {
  background: #EC4535;
  border-radius: 2px;
  border: 0px;
}
.blue {
  background: #62a8ea;
  border-radius: 2px;
  border: 0px;
}
.red {
  background: #E2001C;
  border-radius: 2px;
  border: 0px;
}
<span class="flex">
  <span class="flex">
    <div class="foo purple"></div>
    TEST A
  </span>
<span class="flex">
    <div class="foo brown"></div>
    TEST B
  </span>
<span class="flex">
    <div class="foo black"></div>
    TEST C
  </span>
<span class="flex">
    <div class="foo orange"></div>
    TEST D
  </span>
<span class="flex">
    <div class="foo red"></div>
    TEST E
  </span>
</span>

Upvotes: 2

user63762453
user63762453

Reputation: 1734

Is this what you want?

.foo {

  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.purple {
  background: #461A3F;
  border-radius:2px;
  border:0px;
}
.brown {
  background: #C58E4D;
  border-radius:2px;
  border:0px;
}
.black {
  background: #34332E;
  border-radius:2px;
  border:0px;
}
.orange {
  background: #EC4535;
  border-radius:2px;
  border:0px;
}
.blue {
  background: #62a8ea;
  border-radius:2px;
  border:0px;
}
.red {
  background: #E2001C;
  border-radius:2px;
  border:0px;
}
.parent div{
   display:inline-block;
}
<div class = "parent">
<div class="foo purple"></div>TEST A 
<div class="foo brown"></div>TEST B
<div class="foo black"></div>TEST C
<div class="foo orange"></div>TEST D
<div class="foo red"></div>TEST E
</div>

Wrap the content in a div, and put display:inline-block.

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

if you use float:left or display:inline-block the you will get the result like this

.foo {
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  float:left;
}

.purple {
  background: #461A3F;
  border-radius:2px;
  border:0px;
}
.brown {
  background: #C58E4D;
  border-radius:2px;
  border:0px;
}
.black {
  background: #34332E;
  border-radius:2px;
  border:0px;
}
.orange {
  background: #EC4535;
  border-radius:2px;
  border:0px;
}
.blue {
  background: #62a8ea;
  border-radius:2px;
  border:0px;
}
.red {
  background: #E2001C;
  border-radius:2px;
  border:0px;
}
<div class="foo purple"></div>TEST A 
<div class="foo brown"></div>TEST B
<div class="foo black"></div>TEST C
<div class="foo orange"></div>TEST D
<div class="foo red"></div>TEST E

So if you want all the div in different line use a clear div after each div or just wrap in new div. Here i am using clear div.

.foo {
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  float:left;
}

.purple {
  background: #461A3F;
  border-radius:2px;
  border:0px;
}
.brown {
  background: #C58E4D;
  border-radius:2px;
  border:0px;
}
.black {
  background: #34332E;
  border-radius:2px;
  border:0px;
}
.orange {
  background: #EC4535;
  border-radius:2px;
  border:0px;
}
.blue {
  background: #62a8ea;
  border-radius:2px;
  border:0px;
}
.red {
  background: #E2001C;
  border-radius:2px;
  border:0px;
}

.clear {
  clear:both;
}
<div class="foo purple"></div>TEST A <div class="clear"></div>
<div class="foo brown"></div>TEST B <div class="clear"></div>
<div class="foo black"></div>TEST C <div class="clear"></div>
<div class="foo orange"></div>TEST D <div class="clear"></div>
<div class="foo red"></div>TEST E <div class="clear"></div>

Upvotes: 0

Mehavel
Mehavel

Reputation: 595

add display inline-block to foo class as below

    .foo {

  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  display:inline-block
}

here is sample output in Codepen

The output clipped image from codepen

Upvotes: 1

Allan Empalmado
Allan Empalmado

Reputation: 943

I would wrap it with a parent container and set the div inside it to display : inline-block; see the 2nd example;

.color-container div { display : inline-block;}

.foo {
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.purple {
  background: #461A3F;
  border-radius:2px;
  border:0px;
}
.brown {
  background: #C58E4D;
  border-radius:2px;
  border:0px;
}
.black {
  background: #34332E;
  border-radius:2px;
  border:0px;
}
.orange {
  background: #EC4535;
  border-radius:2px;
  border:0px;
}
.blue {
  background: #62a8ea;
  border-radius:2px;
  border:0px;
}
.red {
  background: #E2001C;
  border-radius:2px;
  border:0px;
}
<div class="foo purple"></div><span>TEST A</span>
<div class="foo brown"></div><span>TEST B</span>
<div class="foo black"></div><span>TEST C</span>
<div class="foo orange"></div><span>TEST D</span>
<div class="foo red"></div><span>TEST E</span>



<div class="color-container">
    <div class="foo purple"></div>TEST A
</div>
<div class="color-container">
    <div class="foo brown"></div>TEST B
</div>
<div class="color-container">
    <div class="foo black"></div>TEST C
</div>
<div class="color-container">
    <div class="foo orange"></div>TEST D
</div>
<div class="color-container">
    <div class="foo red"></div>TEST E
</div>

Upvotes: 1

frnt
frnt

Reputation: 8795

Instead of float, display it inline-block.

.foo {
  display:inline-block;
}

Upvotes: 0

Related Questions