I have a wrapper div that is holding three div’s. I want the three divs in the wrapper to just be next to each other, so left center and right. But what is happening is the left div within the wrapper is pushing the middle div down as far as whatever is in the left div.
Can someone tell me what I’m doing wrong?
Thanks
Daniel
Did you set a width on left div? Like 33% width for each 3 columns?
Each div has to have a width, and all 3 must equal or be less then 100% of the parents width.
It would help immensely for some code.
I have set them using px because I want the left to be off the side a bit, etc.
What about the float? etc.
Post the code you have and I will show you what you are doing wrong (assuming I know)
to make divs side by side you need them floated
As such
<div style="width:100%;">
<div id="float1" style="width:33%;float:left;">
<p>Text</p>
</div>
<div id="float2" style="width:33%;float:left;">
<p>Text</p>
</div>
<div id="float3" style="width:33%;float:left;">
<p>Text</p>
</div>
No, in this case the problem is simple enough (hopefully) some code would suffice. Please 
Here is the code. If you could, I wanted to PM you the URL link. I dont want to post it in a forum for a link back to the site. If you have MSN IM, my user is danielc1234@hotmail.com. Maybe you could take a peak at the css and let me know whats up. I really dont know css that well.
Thanks
HTML part.
<div class=“home-page-container”>
<div class=“home-callout”>
<div class=“home-menu-left”> Something here <div>
<div class="flash">
<script type="text/javascript" src="{{store url=""}}fixit.js"></script>
<object data="{{store url=""}}flash/dogbeds.swf" type="application/x-shockwave-flash" width="575" height="375">
<param name="movie" value="{{store url=""}}flash/dogbeds.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="allowscriptaccess" value="samedomain" />
</object>
</div>
</div>
</div>
</div>
CSS file
.home-menu-left {
width: 145px;
background-color: #FFFFFF;
margin-left: 20px;
float: left;
}
.home-menu-left li {
text-align:left;
}
.flash {
text-align:center;
margin-left: 168px;
}
.home-callout {
background-image: url(/skin/frontend/default/dogbeds/images/front-page-bg.jpg);
background-repeat: no-repeat;
text-align: center;
height: 500px;
padding-top: 26px;
}
I don’t see three side-by-side divs there, only home-menu-left and flash, inside of home-callout which is inside of home-page container.
One other thing I noticed: strictly speaking, home-menu-left isn’t inside of anything. Float takes it out of the flow so it’s free to wander wherever it wants to.
You want them all like a 3 column layout? Keep your HTML like that and use this CSS
.home-page-container{
width:100%;
}
.home-menu-left {
width: 31%;
background-color: #FFFFFF;
margin-left: 20px;
float: left;
}
.home-menu-left li {
text-align:left;
}
.flash {
text-align:center;
float:left;
width:33%;
}
.home-callout {
background-image: url(/skin/frontend/default/dogbeds/images/front-page-bg.jpg);
background-repeat: no-repeat;
text-align: center;
height: 500px;
padding-top: 26px;
width:32%;
}
Depending on your resolution that will work. If the 3rd box doesn’t mean on the same line decrease the width. You can transition to px width’s as soon as you know what you want.
HTH
BoltZ, how would I control the placement of a right column when I put it in there? I sent you a PM with the link to the site. I would put it here, but dont want any back links.
Thanks for all your help.
KoltZ also in your example you use id= instead of class=, what is the difference?
I just used the CSS he had. He had classes for what CSS he had, so I didn’t want to change it. ID’s can only be used once in a page (you can’t have 2 things with an ID that is the same). Classes are reusable.
Post your link on here instead of PMing me.
The url is www. dogbeds . cc (notice its not a .com, but .cc) You will have to delete the spaces.
I redid the page and set up it up all by itself. It works fine until I drop in the flash/javascript, it is at that point it forces the flash movie down below the left side column.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.thrColFix #container {
width: 950px;
text-align: left; /* this overrides the text-align: center on the body element. */
background-image: url(/skin/frontend/default/dogbeds/images/front-page-bg.jpg);
margin-top: 0;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-repeat: no-repeat;
background-color: 000060;
height: 425px;
}
.thrColFix #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 150px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
}
.thrColFix #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 160px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
}
.thrColFix #mainContent {
margin: 0 180px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFix #sidebar1 { width: 180px; }
.thrColFix #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFix #sidebar2, .thrColFix #sidebar1 { padding-top: 30px; }
.thrColFix #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="thrColFix">
<div id="container">
<div id="sidebar1">
<h3>Sidebar1 </h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>Sidebar2 </h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p> <script type="text/javascript" src="{{store url=""}}fixit.js"></script>
<object data="{{store url=""}}flash/dogbeds.swf" type="application/x-shockwave-flash" width="575" height="375">
<param name="movie" value="{{store url=""}}flash/dogbeds.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="allowscriptaccess" value="samedomain" />
</object></p>
<h2>H2 level heading </h2>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- end #container --></div>
</body>
</html>
I do not see it below anything…I see it in the middle.
I’ve been messing with it and think I have it close. Its just when something goes wrong, it is not easy for me to fix. Did you see anything major in the code that might mess me up? Also, I dont know if you know, but I am trying to do it with SEO friendly in mind.
This is not working in IE only firefox. Any ideas why???