placing 3 divs next to each other - html

Question

Index code
<div id="pageMiddle">
<div id="midleft">This is a test to make sire everything is ok. This text will be removed once the test is complete and everything is working fine.</div>
<div id="midmid"><?php include_once("modules/twitter_twr.php"); ?></div>
<div id="midright"><?php include_once("modules/random_profiles.php"); ?></div>
CSS
#pageMiddle {
width: 1000px;
margin: 0px auto;
height: 900px;
}
#pageMiddle > #midleft {
width: 200 px;
margin: 0px;
float: left;
}
#pageMiddle > #midmid {
width: 600px;
margin: 0px;
display: inline;
}
#pageMiddle > #midright {
width: 200px;
margin: 0px;
float: right;
}
I have tried many ways to do this. I just can't seem to get my head around it at all. I am trying to get it so all divs sit nicely next to each other so I able to fill them with content for the index page basically. Thanks for your time to look at it and I hope you can correct my mistakes as I suck at CSS.

Answer 1

DEMO
Actually this is all you need:
#pageMiddle {
width: 1000px;
margin: 0px auto;
height: 900px;
}
#pageMiddle > div{
float: left;
}
than you can just set your widths:
#midleft, #midright {
width: 200px;
}
#midmid {
width: 600px;
}
Note there's no need to use #pageMiddle > #midleft cause ID is already unique-per-page.

Answer 2

The issue here is display:inline does not allow you to use the width attribute in CSS.
This should fix it with the current code you have now:
#pageMiddle {
width: 1000px;
margin: 0px auto;
height: 900px;
}
#midleft {
width: 200px;
margin: 0px;
display: block;
float: left;
}
#midmid {
width: 600px;
margin: 0px;
display: block;
float: left;
}
#midright {
width: 200px;
margin: 0px;
display: block;
float: left;
}
Also, since you're using floats, it's generally best to have your float divs lay above non-float divs (if you're trying to achieve a single row). Your HTML syntax should be as follows:
<div id="pageMiddle">
<div id="midleft">This is a test to make sire everything is ok. This text will be removed once the test is complete and everything is working fine.</div>
<div id="midmid"><?php include_once("modules/twitter_twr.php"); ?></div>
<div id="midright"><?php include_once("modules/random_profiles.php"); ?></div>
</div>
Here's the fiddle (added backgrounds so you can see the distinction between divs): http://jsfiddle.net/g732A/1/
Note that this isn't the best way to write columns, but it does achieve what you're trying to do.