How to put three divs next to each other in HTML?

Question

Hello I'm trying to display 3 div elements inline with each other and does not resize even if you change the size of the browser how do I go about it?

How it should look like:

Code:

body {}

#wrap {
    width: auto;
    margin: 0 auto;
    border: 0px solid;
    height: 200px;
    display: block;
}

#one {
    width: 40%;
    float: left;
    background: red;
}

#two {
    background: yellow;
}

#three {
    width: 40%;
    float: inherit;
    background: blue;
}

<div id="wrap">
    <div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

Your `#two` div isn't floating... and acts as a block level element (as it should, BTW...) Check my answer :-) — Ronen Cypis, Nov 16 '15 at 13:39
thank you for replying so fast, i did try that but once i change the size of the browser the 3rd div i have made, ends up going below div1 once i have alot of information in those divs its going to look weird do you perhaps have a solution for this? — Julius, Nov 16 '15 at 13:41
@Julius check my answer. you should give ALL your divs float:left; AND a fixed with (in percents), and you'll be OK :-) — Ronen Cypis, Nov 16 '15 at 13:46
@Julius, you have width: auto; width: 40%; Instead of those you sould use something like width: 400px; — Ionut Necula, Nov 16 '15 at 13:52

score 2 · Accepted Answer · edited Dec 20 '21 at 12:02

2

Check this fiddle

#wrap::after {
    display: block;
    height: 0px;
    clear: both;
    float: none;
}

#wrap div {
    float: left;
    word-break: break-all;
}

#one {
    width: 40%;
    background-color: red;
}

#two {
    width: 20%;
    background-color: yellow;
}

#three {
    width: 40%;
    background-color: blue;
}

<div id="wrap">
    <div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

edited Dec 20 '21 at 12:02

Nice18

476
2
12

answered Nov 16 '15 at 13:37

Ronen Cypis

21,182
1
20
25

Thank you! thats exactly what i wanted – Julius Nov 16 '15 at 13:47
@Julius So marking it as the correct answer is the right thing to do :-) – Ronen Cypis Nov 16 '15 at 13:47
Im trying too its telling me to wait 50secs – Julius Nov 16 '15 at 13:48

Alex · Answer 2 · 2021-12-21T01:32:55.087

#two and #three(inherits from parent which is none) do not have float:left and you should give width to those element. For example, here I give width:32% to all div elements(#one, #two, #three).

 .fl-l
{
  float:left;
  word-break: break-all;
   width: 32%;
}

#wrap{
    width:auto;
 margin:0 auto;
  border:0px solid;
 height:200px;
  display:block;
  
}
#one {
  background:red;
}

#two {
 background:yellow;
}

#three {
   background:blue;
}

<div id="wrap">
    <div id="one" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="two" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="three" class="fl-l">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

Thank you! thats exactly what i wanted – Julius Nov 16 '15 at 13:47 — Julius, Nov 16 '15 at 13:47
@Julius You are welcome. Good luck. – Alex Nov 16 '15 at 13:47 — Alex, Nov 16 '15 at 13:47

sideroxylon · Answer 3 · 2015-11-16T13:56:29.013

To fix the width, set an absolute value to the wrap element.

body {} 
#wrap {
  width: auto;
  margin: 0 auto;
  border: 0px solid;
  height: 200px;
  word-break: break-all;
  font-size: 0;
}
#wrap > div {
  height: 100%;
  display: inline-block;
  overflow: auto;
  font-size: 14px;
  }
#one {
  width: 40%;
  background: red;
}
#two {
  width: 20%;
  background: yellow;
}
#three {
  width: 40%;
  background: blue;
}

<div id="wrap">
  <div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
  <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
  <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

I would collapse all of the `height`, `display`, `overflow` & `font-size` into a separate css declaration and avoid all duplication :-) — Ronen Cypis, Nov 16 '15 at 13:52
@RonenCypis Yes, so would I, given a bit of time to think about it (done now). My main aim was to propose the inline-block solution. I always run into trouble with floats. — sideroxylon, Nov 16 '15 at 13:54

How to put three divs next to each other in HTML?

3 Answers3