How to position three divs in html horizontally

Question

I am creating a sample website which has three divisions horizontally  I want the left most div to be 25  width  the middle one to be 50  width  and right to be 25  width so that the divisions fill all the 100  space horizontally    lt html gt       lt title gt      Website Title      lt  title gt        lt div id  the whole thing  style  height 100   width 100    gt            lt div id  leftThing  style  position  relative  width 25   background-color blue   gt              Left Side Menu          lt  div gt            lt div id  content  style  position  relative  width 50   background-color green   gt              Random Content          lt  div gt            lt div id  rightThing  style  position  relative  width 25   background-color yellow   gt              Right Side Menu          lt  div gt        lt  div gt   lt  html gt    http   imgur com j4cJu  When I execute this code  the divs appear over each other  I want them to appear beside each other   How can i do this

User · Answer

Get rid of the position relative  and replace it with float left  and float right    Example in jsfiddle  http   jsfiddle net d9fHP 1            lt html gt   lt title gt  Website Title  lt  title gt   lt div id  the whole thing  style  float left  height 100   width 100   gt       lt div id  leftThing  style  float left  width 25   background-color blue   gt           Left Side Menu      lt  div gt       lt div id  content  style  float left  width 50   background-color green   gt           Random Content      lt  div gt       lt div id  rightThing  style  float right  width 25   background-color yellow   gt           Right Side Menu      lt  div gt   lt  div gt   lt  html gt

User · Answer

I d refrain from using floats for this sort of thing  I d rather use inline-block   Some more points to consider    Inline styles are bad for maintainability You shouldn t have spaces in selector names You missed some important HTML tags  like  lt head gt  and  lt body gt  You didn t include a doctype   Here s a better way to format your document    lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt Website Title lt  title gt   lt style type  text css  gt     margin  0  padding  0    container  height  100   width 100   font-size  0    left   middle   right  display  inline-block   display  inline  zoom  1  vertical-align  top  font-size  12px    left  width  25   background  blue    middle  width  50   background  green    right  width  25   background  yellow    lt  style gt   lt  head gt   lt body gt   lt div id  container  gt       lt div id  left  gt Left Side Menu lt  div gt       lt div id  middle  gt Random Content lt  div gt       lt div id  right  gt Right Side Menu lt  div gt   lt  div gt   lt  body gt   lt  html gt    Here s a jsFiddle for good measure

User · Answer

Most easiest way       I can see the question is answered   I m giving this answer for the ones who is having this question in future             Its not good practise to code inline css   and also ID for all inner div s   always try to use class for styling  Using inline css is a very bad practise if you are trying to be a professional web designer    here in your question  I have given a wrapper class for the parent div and all the inside div s are child div s in css you can call inner div s using nth-child selector     I want to point few things here   1 - Do not use inline css    it is very bad practise     2 - Try to use classes instead of id s because if you give an id you can use it only once  but if you use a class you can use it many times and also you can style of them using that class so you write less code        codepen link for my answer   https   codepen io feizel pen JELGyB     x000D   x000D               wrapper width 100    x000D               box float left  height 100px   x000D               box nth-child 1   x000D                 width 25   x000D                 background-color red   x000D           x000D                x000D               box nth-child 2   x000D                 width 50   x000D                background-color green   x000D                x000D               box nth-child 3   x000D                 width 25   x000D                background-color yellow   x000D                x000D    x000D       lt div class  wrapper  gt  x000D           lt div class  box  gt  x000D          Left Side Menu x000D           lt  div gt  x000D           lt div class  box  gt  x000D          Random Content x000D           lt  div gt  x000D           lt div class  box  gt  x000D          Right Side Menu x000D           lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

You add a   float  left    to the style of the 3 elements and make sure the parent container has  overflow  hidden  position  relative    this makes sure the floats take up actual space    lt html gt       lt head gt           lt title gt Website Title  lt  title gt       lt  head gt       lt body gt           lt div id  the-whole-thing  style  position  relative  overflow  hidden   gt               lt div id  leftThing  style  position  relative  width  25   background-color  blue  float  left   gt                  Left Side Menu              lt  div gt               lt div id  content  style  position  relative  width  50   background-color  green  float  left   gt                  Random Content              lt  div gt               lt div id  rightThing  style  position  relative  width  25   background-color  yellow  float  left   gt                  Right Side Menu              lt  div gt           lt  div gt       lt  body gt   lt  html gt    Also please note that the width  100  and height  100  need to be removed from the container  otherwise the 3rd block will wrap to a 2nd line

User · Answer

You can use floating elements like so    lt div id  the whole thing  style  height 100   width 100   overflow  hidden   gt       lt div id  leftThing  style  float  left  width 25   background-color blue   gt Left Side Menu lt  div gt       lt div id  content  style  float  left  width 50   background-color green   gt Random Content lt  div gt       lt div id  rightThing  style  float  left  width 25   background-color yellow   gt Right Side Menu lt  div gt   lt  div gt    Note the overflow  hidden  on the parent container  this is to make the parent grow to have the same dimensions as the child elements  otherwise it will have a height of 0

User · Answer

I know this is a very old question  Just posting this here as I solved this problem using FlexBox  Here is the solution  x000D   x000D   container     height  100     width  100     display  flex     leftThing     width  25     background-color  blue     content     width  50     background-color  green     rightThing     width  25     background-color  yellow    x000D   lt div id  container  gt      lt div id  leftThing  gt      Left Side Menu    lt  div gt      lt div id  content  gt      Random Content    lt  div gt      lt div id  rightThing  gt      Right Side Menu    lt  div gt    lt  div gt  x000D   x000D   x000D   Just had to add display flex to the container  No floats required

[html] How to position three divs in html horizontally?

Examples related to html

Examples related to css

Examples related to layout

Examples related to position