Home/ Questions/Q 8390239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T18:55:50+00:00

I am creating a sample website which has three divisions horizontally. I want the

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0