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>
When I execute this code, the divs appear over each other. I want them to appear beside each other!
How can i do this?
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>?
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_
<div class="wrapper">_x000D_
<div class="box">_x000D_
Left Side Menu_x000D_
</div>_x000D_
<div class="box">_x000D_
Random Content_x000D_
</div>_x000D_
<div class="box">_x000D_
Right Side Menu_x000D_
</div>_x000D_
</div>
_x000D_
_x000D_
_x000D_
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.
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).
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.
Source: Stackoverflow.com