What is the best way to align three divs side by side using HTML?

Question

What is the best way to align three divs side by side using HTML?

Hi there! I need help figuring out how to display 3 div elements inline with each other without resizing when the browser size changes. Can anyone provide some guidance on this?

This is how it should look like: https://i.sstatic.net/pBRZr.png

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">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

html css

Answer 1

Answer №1

Take a look at this code snippet

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

#container div {
    float: right;
    word-wrap: break-word;
}

#box1 {
    width: 50%;
    background-color: green;
}

#box2 {
    width: 30%;
    background-color: orange;
}

#box3 {
    width: 20%;
    background-color: purple;
}

<div id="container">
    <div id="box1">WORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORD</div>
    <div id="box2">WORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORD</div>
    <div id="box3">WORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORD</div>
</div>

Answer 2

Take a look at this code snippet

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

#container div {
    float: right;
    word-wrap: break-word;
}

#box1 {
    width: 50%;
    background-color: green;
}

#box2 {
    width: 30%;
    background-color: orange;
}

#box3 {
    width: 20%;
    background-color: purple;
}

<div id="container">
    <div id="box1">WORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORD</div>
    <div id="box2">WORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORD</div>
    <div id="box3">WORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORDWORD</div>
</div>

Answer 3

Answer №2

#two and #three(inherits from parent which is none) do not have float:left. It's recommended to assign a specific width to these elements. As an example, I've set the width to 32% for 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"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="two" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="three" class="fl-l">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

Answer 4

#two and #three(inherits from parent which is none) do not have float:left. It's recommended to assign a specific width to these elements. As an example, I've set the width to 32% for 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"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="two" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="three" class="fl-l">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

Answer 5

Answer №3

If you want to adjust the width, assign a specific 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">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
  <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
  <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

Answer 6

If you want to adjust the width, assign a specific 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">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
  <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
  <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

What is the best way to align three divs side by side using HTML?

Answer №1

Answer №2

Answer №3

Similar questions

CSS GRID: The Default row and column gaps are automatically included

"Trouble with 3D hexagonal grid in CSS - unable to achieve desired display

Tips for ensuring consistent display of UTF-8 arrow characters across different web browsers

Dynamic SVG circles with timer and progress animation

Tips for customizing the appearance of your browser's scroll bar:

Once the <a> element is clicked, ensure that the function finishes executing before attempting to click/process it again

Display a PDF on a website and ensure it is horizontally scrolled to the center

Generate a list of users using Angular in an efficient manner

The content displayed in the PrimeNG p-table is limited to only the table name with no additional information

What causes jquery height and javascript height to both be returned as 0?

Ensure that the container div is filled by the image if the image exceeds the dimensions of

Navigating to the designated row within the HTML table even with a scrollbar present

Guide to setting up jQuery Mobile with bower

Tips for creating scrolling fixed elements beyond the full body width

What is the functionality of the CSS switch button?

Unused sizing attributes in IMG tags

Display/Conceal the UL subelement when selected

Parent style CSS taking precedence over child style due to conflicting rules

Populate a table cell with a div element in HTML

Transferring information from an HTML webpage to a PHP file and then redirecting to the homepage