Div tag, aligning in straight line - css

Question

I have 3 div tags. I have to place it in straight line. in my code it is 2,3,4. 2 and 3 are in straight line but 4 comes downward dono why. I am beginner to html and css. accurately my project is to make a room in perspective view in html. and draw the contents using html canvas.But struck in beginning itself. Experts please help me a way out. I attache my whole project in Jsfiddle and scenario i need solution is written below.
http://jsfiddle.net/kGpdM/855/
Html:
<div id="wall">
<div id="sidewall1" align="left">2</div>
<div id="center" align="center">3</div>
<div id="sidewall2" align="right">4</div>
</div>
css:
#sidewall1 {
float:left;
width:250px;
height:500px;
}
#sidewall2 {
float:right;
width:250px;
height:500px;
}

Answer 1

You didn't mentioned the property of ID 'center' so that div itself took a default width.
Div 4 comes down because total width (width of id 'row' here 1000px) - width of div 3 = less than 250 px.
Also if you are styling through css then try to avoid inline styling use css only.
Here is the modified code.
HTML
<div id="container">
<div id="roof">1</div>
<div id="wall">
<div id="sidewall1">2</div>
<div id="center" >3</div>
<div id="sidewall2">4</div>
</div>
<div id="floor">5</div>
</div>
CSS
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#roof {
padding: 0px;
height: 250px;
width: 1000px;
margin-right: 0px;
margin-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#wall {
padding: 0px;
height: 500px;
width: 1000px;
margin-right: 0px;
margin-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#floor {
padding: 0px;
height: 250px;
width: 1000px;
margin-right: 0px;
margin-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#sidewall1 {
float:left;
width:250px;
height:500px;
}
#sidewall2 {
float:left;
width:250px;
height: 500px;
}
#center {
float:left;
width:250px;
height: 500px;
}

Answer 2

The style attribute display:inline; adding to all class or iid's u have for the divs 2,3,4 will do.

Answer 3

The width of a computer screen only takes so many pixels. It gets complicated by the fact that there are many different screen widths. For example, you have mobile phones, tablets, laptops, and desktops. But even those can have different widths. So instead of using width: 250px; , it is better to make all those divs in percentages. See below.
#sidewall1 {
float:left;
width:25%;
height:500px;
}
#center {
float: left;
width: 49%;
}
#sidewall2 {
float:left; // Change this to float left
width:25%;
height:500px;
}
adjust the percentages according to how you want it.

Answer 4

Changing the divs to inline may mess up other style. Instead, you should change your CSS, so that the center div is included last. I have added background colors to your CSS to demonstrate:
jsFiddle
HTML
<div id="wall">
<div id="sidewall1">2</div>
<div id="sidewall2">4</div>
<div id="center">3</div>
</div>
CSS
#sidewall1 {
float:left;
width:250px;
height:500px;
background-color: yellow;
}
#center {
display: block;
background-color: green;
}
#sidewall2 {
float:right;
width:250px;
height:500px;
background-color: red;
}