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.

<html>
    <title>
    Website Title
    </title>

    <div id="the whole thing" style="height:100%; width:100%" >

        <div id="leftThing" style="position: relative; width:25%; background-color:blue;">
            Left Side Menu
        </div>

        <div id="content" style="position: relative; width:50%; background-color:green;">
            Random Content
        </div>

        <div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
            Right Side Menu
        </div>

    </div>
</html>

https://i.stack.imgur.com/NZDJe.jpg

When I execute this code, the divs appear over each other. I want them to appear beside each other!

How can i do this?

Give the left div the style "float:left" and the right div "float:right". — mas-designs, Aug 13 '12 at 09:08
Make them float left, they will stack after eachother. However, I'm not sure the %-width will still be applied then, you should test that out. — Terry, Aug 13 '12 at 09:09
@user1594853 If an answer helped you, please mark it as accepted. — Jezen Thomas, May 07 '14 at 20:28
Possible duplicate of [CSS - Make divs align horizontally](http://stackoverflow.com/questions/37103/css-make-divs-align-horizontally) — user, Mar 04 '17 at 12:03
@Jezen Thomas After 8 years of reading your answer, I finally understand :) — Akhil, Feb 09 '21 at 17:58

Jezen Thomas · Accepted Answer · 2012-08-13T09:27:31.877

53

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 <head> and <body>
You didn't include a doctype

Here's a better way to format your document:

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {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;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

Here's a jsFiddle for good measure.

edited Aug 13 '12 at 09:27

answered Aug 13 '12 at 09:21

Jezen Thomas

13,619
6
53
91

4

Nice that you suggest switching from inline CSS. May I also point out that "left", "middle" and "right" are _really_ bad IDs (or class names) as they are directly related to their layout rather than their meaning. Also, I wouldn't recommend `inline-block` for this over `float`. An `inline-block` element is affected by `letter-spacing` and `font-size` (etc) which makes them more difficult to line up (one solution is setting `font-size: 0` on `#container` and then setting it back to normal in `#container *`). – powerbuoy Aug 13 '12 at 09:24
"You missed some important HTML tags, like and " Technically nothing wrong with that these days...: https://html.spec.whatwg.org/multipage/syntax.html#optional-tags – roundar Jun 23 '17 at 13:38

score 48 · Answer 2 · edited Jun 20 '20 at 09:12

I know this is a very old question. Just posting this here as I solved this problem using FlexBox. Here is the solution

#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;
}

<div id="container">

  <div id="leftThing">
    Left Side Menu
  </div>

  <div id="content">
    Random Content
  </div>

  <div id="rightThing">
    Right Side Menu
  </div>

</div>

Just had to add display:flex to the container! No floats required.

score 20 · Answer 3 · answered Aug 13 '12 at 09:09

20

You can use floating elements like so:

<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
    <div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
    <div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
    <div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>

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).

answered Aug 13 '12 at 09:09

Paul Aldred-Bann

5,840
4
36
55

3

While float is correct, I wouldn't recommend an "HTML newb" to start using inline CSS. Edit: noticed now that he was already using inline CSS, still I'd suggest a better solution. – powerbuoy Aug 13 '12 at 09:20
@powerbuoy agreed, inline CSS is NOT recommended. This would be done from an included CSS file where the styles are bound via id (#leftThing { float: left; }), selector or class name. – Paul Aldred-Bann Aug 13 '12 at 09:23

score 12 · Answer 4 · edited Apr 03 '22 at 13:10

Easiest way

I can see the question is answered , I'm giving this answer for the ones who is having this question in future

It's 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

Do not use inline css ( it is very bad practise )
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

.wrapper {
  width: 100%;
}

.box {
  float: left;
  height: 100px;
}

.box:nth-child(1) {
  width: 25%;
  background-color: red;
}

.box:nth-child(2) {
  width: 50%;
  background-color: green;
}

.box:nth-child(3) {
  width: 25%;
  background-color: yellow;
}

<div class="wrapper">
  <div class="box">
    Left Side Menu
  </div>
  <div class="box">
    Random Content
  </div>
  <div class="box">
    Right Side Menu
  </div>
</div>

score 8 · Answer 5 · answered Aug 13 '12 at 09:12

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.

<html>
    <head>
        <title>Website Title </title>
    </head>
    <body>
        <div id="the-whole-thing" style="position: relative; overflow: hidden;">
            <div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
                Left Side Menu
            </div>
            <div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
                Random Content
            </div>
            <div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
                Right Side Menu
            </div>
        </div>
    </body>
</html>

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.

score 1 · Answer 6 · answered Aug 13 '12 at 09:12

Get rid of the position:relative; and replace it with float:left; and float:right;.

Example in jsfiddle: http://jsfiddle.net/d9fHP/1/

        <html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
    <div id="leftThing" style="float:left; width:25%; background-color:blue;">
         Left Side Menu
    </div>
    <div id="content" style="float:left; width:50%; background-color:green;">
         Random Content
    </div>
    <div id="rightThing" style="float:right; width:25%; background-color:yellow;">
         Right Side Menu
    </div>
</div>
</html>

How to position three divs in html horizontally?

6 Answers6

Linked

Related