How to position three divs in html horizontally?

html css layout position

220,480

Solution 1

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.

Solution 2

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.

Solution 3

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

Solution 4

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>

Solution 5

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.

View more solutions

220,480

Author by

Akhil

A young and inexperienced tech enthusiast, likes coding websites in HTML & CSS, graphics designing in photoshop and illustrator and tweaking OS/programs to create desirable features. Other than that I also take interest in building PCs and new hardware that is constantly coming out.

Updated on July 05, 2022

Comments

Akhil almost 2 years

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>

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?

powerbuoy almost 12 years

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.
Paul Aldred-Bann almost 12 years

@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.
powerbuoy almost 12 years

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 *).
roundar almost 7 years

"You missed some important HTML tags, like <head> and <body>" Technically nothing wrong with that these days...: html.spec.whatwg.org/multipage/syntax.html#optional-tags