Having problem with inline div's

Hey guys.... I know CSS pretty well but have never really coded a full layout before.. so I am starting to learn how to do that...... however I am having some problems..... the divs don't seem to want to display inline; I have even tried changing them to spans & messing around with floats & still no joy. :(

Here is my code..


<!-- Start Container -->
<div id="container">
<div id="lside"><img src="images/spacer.gif" width="56" /></div>
<!-- Start Main -->
<div id="main">
<div id="header">
<img name="header" src="images/header.jpg" width="783" height="110" border="0" usemap="#header_map">
<map name="header_map">
<area shape="rect" coords="635,4,690,21" href="index.php" alt="Home">
<area shape="rect" coords="694,4,773,21" href="pages/contact.php" alt="Contact Us">
</map>
</div>
</div>
<!-- End Main -->
<div id="rside"><img src="images/spacer.gif" width="55" /></div>
</div>
<!-- End Container -->


Here is the CSS..


body {
margin: 0px 0px 0px 0px;
background-color: #E4E1D8;
}

#container {
margin: 0px auto;
width: 900px;
}

#container #lside {
width: 56px;
height: 110px;
display: inline;
background-color: white;
background-image: url(images/bg-ls.jpg);
}

#container #rside {
width: 55px;
margin-left: 845px;
height: 110px;
display: inline;
background-image: url(images/bg-rs.jpg);
}

#container #main {
width: 789px;
margin-left: 57px;
display: inline;
vertical-align: top;
background-color: #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}

#container #main #header {
margin: 0px auto;
width: 783px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}


Thanks a lot guys!

The above code itself is not enough to reproduce the issue, since we don't have the images involved in it. Could you post a link to your page?

Ok.... here we are: http://www.1v1.com/stuff/ppcbuzz/ :)

What you are trying to do with inline display should actually be done with floats.

Try this instead (save a backup copy first):
#container #lside {
width: 56px;
height: 110px;
float:left;
background-color: blue;
background-image: url(images/bg-ls.png);
}

#container #rside {
width: 56px;
height: 110px;
background-image: url(images/bg-rs.png);
float:right;
background-color:red;
}

#container #main {
width: 785px;
float:left;
vertical-align: top;
background-color: #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}

And then change your HTML so that your code for the #rside div appears BEFORE the code for #main div. So, it should look like this:

<!-- Start Container -->
<div id="container">
<div id="lside"><img src="images/spacer.gif" width="56" /></div>
<div id="rside"><img src="images/spacer.gif" width="56" /></div>
<!-- Start Main -->
<div id="main">
<div id="header">
<img name="header" src="images/header.jpg" width="783" height="110" border="0" usemap="#header_map">
<map name="header_map">
<area shape="rect" coords="635,4,690,21" href="index.php" alt="Home">

<area shape="rect" coords="694,4,773,21" href="pages/contact.php" alt="Contact Us">
</map>
</div>
</div>
<!-- End Main -->
</div>
<!-- End Container -->


Is that what you were trying to make the page look like?

Good morning cyphix,
Instead of floats or display inline, try nesting your divs.
Like this -
ppcbuzz.css body {
margin: 0px 0px 0px 0px;
background-color: #E4E1D8;
}
#lside {
width: 900px;
margin: 0px auto;
background: #fff url(images/bg-ls.png) repeat-y;
}
#rside {
width: 900px;
background: url(images/bg-rs.png) repeat-y right;
}
#container {
width: 783px;
margin: 0px auto;
}
#container #main {
height: 400px;
width: 783px;
background-color: #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
#container #main #header {
margin: 0px auto;
width: 783px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
.test ul {
list-style-type: square;
list-style-image: url(bullet.gif);
padding: 1em;
margin: 0;
list-style:none;
/*list-style-image:none; IE would also need this*/
}

And re-order your markup like this
<div id="lside">
<div id="rside">
<div id="container">
<!-- Start Main -->
<div id="main">
<div id="header">
<img name="header" src="images/header.jpg" usemap="#header_map" width="783" border="0" height="110">
<map name="header_map">
<area shape="rect" coords="635,4,690,21" href="index.php" alt="Home">
<area shape="rect" coords="694,4,773,21" href="pages/contact.php" alt="Contact Us">
</map>
</div>
</div>
<!-- End Main -->
</div>
<!-- End Container -->

<!--end lside--></div>
<!--end rside--></div>

Thanks a lot guys! Any reason why I can't get my background images to show up in my lside & rside divs?