I'm flipping out over <div> side-by-side

[ecolodge]

First

[phunk311]

Create a new #container div with a width of 765px and put you nav div and content div inside of it. Float your content div left and see if that does the trick.

Anthony

[SliderNo1]

Hello,

You need to close the </div> after the flash navigation, as your content was nested inside it. Replace the last three div sections with this code.

<div id="nav">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="347" height="418" title="flash">
<param name="movie" value="lackdock.swf" />
<param name="quality" value="high" />
<embed src="lackdock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="347" height="418"></embed>
</object>
</div>
<div id="content">
<p class="style2">WELCOME TO HILLCREST HOMES of lake keowee</p>
<span class="style2">At Hillcrest, we strive to provide our customers with the best quality service in the business. Our customers believe our approach to custom house building is unmatched and unparalled. We develop the house of your dreams blah blah blah blah. At Hillcrest, we strive to provide our customers with the best quality service in the business. Our customers believe our approach to custom house building is unmatched and unparalled. We develop the house of your dreams blah blah blah blahAt Hillcrest, we strive to provide our customers with the best quality service in the business. Our customers believe our approach to custom house building is unmatched and unparalled. We develop the house of your dreams blah blah blah blahAt Hillcrest, we strive to provide our customers with the best quality service in the business. Our customers believe our approach to custom house building is unmatched and unparalled. We develop the house of your dreams blah blah blah blahAt Hillcrest, we strive to provide our customers with the best quality service in the business. Our customers believe our approach to custom house building is unmatched and unparalled. We develop the house of your dreams blah blah blah blahAt Hillcrest, we strive to provide our customers with the best quality service in the business. Our customers believe our approach to custom house building is unmatched and unparalled. We develop the house of your dreams blah blah blah blahAt Hillcrest, we strive to provide our customers with the best quality service in the business. Our customers believe our approach to custom house building is unmatched and unparalled. We develop the house of your dreams blah blah blah blahAt Hillcrest, we strive to provide our customers with the best quality service in the business. Our customers believe our approach to custom house building is unmatched and unparalled. We develop the house of your dreams blah blah blah blahAt Hillcrest, we strive to provide our customers with the best quality service in the business. Our customers believe our approach to custom house building is unmatched and unparalled. We develop the house of your dreams blah blah blah blah</span> <span class="style2"><br />
</span></p>
</div>
<div id="lowerbar">Content for id "lowerbar" Goes Here.</div>

I have also made a couple of minor mods to your demo.css code

body {
color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
background-image: url('darkback.jpg');font-style:normal; font-variant:normal; font-weight:normal; font-size:100%; font-family:Verdana, Arial, Helvetica, sans-serif
}
#holder {
width: 765px;
height: 565px;
background: transparent;
text-align: left;
margin: 0 auto 0 auto;

}
#header {
height: 100px;

}
#nav {
padding: 0px 0px;
width: 347px;
float: left;
}
#content {
float: right;
padding: 15px;
font-size:11px;
overflow: hidden;
background: #FFFFCC;
}

#lowerbar {
height: 75px;
width: 765px;
border-top: 1px solid #877D6C
}


.callout {
font: bold 130% Georgia, "Times New Roman", Times, serif;
color: #333;
margin: 0;
padding: 20px 10px;
}
.brclear {
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0px;
}
p {
font-size: 80%;
}

This should do the trick.

[ecolodge]

Made the changes and the CONTENT is still beneath the NAV DIV. I guess I could try what phunk is thinking and throw both CONTENT and NAV inside it's own container?

Just to let you know, originally the the CSS there was a line in the CONTENT div that said something very similiar to this

margin: 0 0 0 347;

I took it out and it didn't seem to matter. Any ideas?

OKAY, tried out this way and IE has them side by side, firefox still stacks them.

here is what i did to CSS...

#container {
width:765px;

}

#nav {
padding: 0px 0px;
width: 347px;
float: left;
}

#content {
float: left;
padding: 15px;
font-size:11px;
overflow: hidden;
background: #FFFFCC;
width: 418px;
}

I think I'm on the right track. I basically floated both divs to the left inside the container and set width's to equal the container width. Before I throw my computer out of the window... please

[phunk311]

Set the width of the container to 100% if you are going to be padding the div and not the elements within it.

[ecolodge]

i ended up completely redesigning the site from scratch and what do you know, it worked out.

here is the css

/* CSS Document */

#holder {

height: 565px;
width: 765px;
margin: 0 auto;

}

#header {

height: 100px;

}

#container {

width: 765px;
height: 418px;
margin-right: auto;
margin-left: auto;

}

#flash {

width: 347px;
height: 418px;
float: left;

}

#content {
width: 418px;
height: 418px;
float: left;
background-color: #FFFFCC;
background-image: url(contentback.gif);

}

#footer {
height: 75px;
background-color: #FFFFCC;

}


The holder contains everything
The conatiner holds both flash and content

by setting the margins to auto in the container, it seemed to work out. thanks everyone for the ideas!