How do I float this div column to the right? - css

Question

I'm a first year web designer and I'm currently working on an assignment where it requires to float two contents side by side. Every time I float the right content to the right side I: 1) lose my whole wrapper 2) the content does not float beside left content
Do you guys have any idea as to what I am doing wrong?
here is my html code:
<div id="wrapper">
<header></header>
<nav>
</nav>
<div id="content">
<div id="left">
<img src="Images/headerOne.png" width="356" height="46" alt="Top Quality Lumber" title="Top Quality Lumber">
<p>Misty Mountain Wood Products is located just east of Edson in beautiful Yellowhead County, Alberta. We offer a complete service from cutting the tree to the finished product. Our mill produces top quality Canadian timber and lumber.</p>
<img src="Images/headerTwo.png" width="356" height="46" alt="Board and Batten siding" title="Board and Batten">
<p>Use our unedged boards (2nd-cut slabs) to create rustic Board-on-Board siding on pole or frame buildings. Great for animal shelters, machine sheds, hay sheds, garden shed, playhouse, barns, wind fencing etc...</p>
<img src="Images/headerThree.png" width="356" height="46" alt="Deal Direct with the Mill" title="Deal Direct">
<p>this is where you write whatever</p>
</div><!--this is the end of the left div-->
</div> <!--this is the end of the content-->
<div id="column">
<img src="Images/shed01.jpg" alt="shed" title="shed">
<img src="Images/batten01.jpg" alt="batten" title="batten">
<img src="Images/shed02.jpg" alt="shed2" title="shed2">
</div><!--this is the end of the column-->
</div><!--this is the end of the wrapper-->
and my css
#wrapper{width: 960px;
margin: 0 auto;
background-color: #4c5834;}
#content{padding-bottom: 10px;
padding-left: 20px;
width: 940px;
float: left;
color: #ffffff;}
#left{width: 600px;
padding-top: 20px;
padding-right: 15px;
padding-left: 15px;
float: left;
background-color: #838b73;}
#column{width: 220px;
background-color: #838b73;
padding-top: 25px;
padding-left: 15px;
padding-right: 15px;
float: right;
margin: 0 auto;}
at the moment it's completely frustrating me and I have no clue what to do

Answer 1

Add float:left to your wrapper class
And move the div with id column to inside the content div.
Example here http://jsfiddle.net/S6g6H/1/
Html
<div id="wrapper">
<header></header>
<nav>
</nav>
<div id="content">
<div id="left">
<img src="Images/headerOne.png" width="356" height="46" alt="Top Quality Lumber" title="Top Quality Lumber">
<p>Misty Mountain Wood Products is located just east of Edson in beautiful Yellowhead County, Alberta. We offer a complete service from cutting the tree to the finished product. Our mill produces top quality Canadian timber and lumber.</p>
<img src="Images/headerTwo.png" width="356" height="46" alt="Board and Batten siding" title="Board and Batten">
<p>Use our unedged boards (2nd-cut slabs) to create rustic Board-on-Board siding on pole or frame buildings. Great for animal shelters, machine sheds, hay sheds, garden shed, playhouse, barns, wind fencing etc...</p>
<img src="Images/headerThree.png" width="356" height="46" alt="Deal Direct with the Mill" title="Deal Direct">
<p>this is where you write whatever</p>
</div><!--this is the end of the left div-->
<div id="column">
<img src="Images/shed01.jpg" alt="shed" title="shed">
<img src="Images/batten01.jpg" alt="batten" title="batten">
<img src="Images/shed02.jpg" alt="shed2" title="shed2">
</div><!--this is the end of the column-->
</div> <!--this is the end of the content-->
</div><!--this is the end of the wrapper-->
CSS
#wrapper{width: 960px;
margin: 0 auto;
background-color: #4c5834;
float:left;
}
#content{padding-bottom: 10px;
padding-left: 20px;
width: 940px;
float: left;
color: #ffffff;}
#left{width: 600px;
padding-top: 20px;
padding-right: 15px;
padding-left: 15px;
float: left;
background-color: #838b73;}
#column{width: 220px;
background-color: #838b73;
padding-top: 25px;
padding-left: 15px;
padding-right: 15px;
float: right;
margin: 0 auto;}

Answer 2

Change your CSS to:
#wrapper{
width: 960px;
margin: 0 auto;
background-color: #4c5834;
}
#content{
padding-bottom: 10px;
padding-left: 20px;
width: 600px;
float: left;
color: #ffffff;
}
#left{
padding-top: 20px;
padding-right: 15px;
padding-left: 15px;
background-color: #838b73;
/****I removed the width and float from here****/
}
#column{
background-color: #838b73;
padding-top: 25px;
padding-left: 15px;
padding-right: 15px;
float: left;
width:200px;
margin: 0 10px;
}
Here is a fiddle: http://jsfiddle.net/YpukY/
Just so you know, you want the total width (object width + padding + margin + border) of both columns to be less than the width of the container.
You can float them both left as long as they're not too wide they'll be side by side.

Answer 3

Not sure if you wanted the column div to float to the left of the main div, or wanted a right div next to your left.
I have added both, here: http://jsfiddle.net/nivas/afZx6/
The idea is that the width of the wrapper should be large (wide) enough to hold all of the divs side by side. If not the floated divs would wrap around to the "next line".
The new HTML (removed some content to make things more clear):
<div id="wrapper">
<header></header>
<nav></nav>
<div id="content">
<div id="left">
<p>this is where you write whatever</p>
</div>
<div id="right">A new column, within the "content"</div>
</div>
<div id="column">The far right column</div>
</div>
So in the CSS below,
width(2) should be >= width(3) + margin(3) + padding(3) + width(4) + margin(4) + padding(4)
width(1) should be >= width(2) + margin(2) + padding(2) + width(5) + margin(5) + padding(5)
(again removed some rules for clarity):
#wrapper { /*1*/
width: 700px;
background-color: #4c5834;
}
#content { /*2*/
width: 500px;
float: left;
color: #ffffff;
background-color: #ededed;
}
#left { /*3*/
width: 300px;
float: left;
background-color: #838b73;
}
#right { /*4*/
background-color: yellow;
float: left;
height: 55em;
color: black;
width: 150px;
}
#column { /*5*/
width: 40px;
background-color: #838b73;
float: left;
height: 35em;
}

Answer 4

Your right column isn't floating beside your left content because there's not enough room in the wrapper. Your wrapper is 960px and your left content is 940px - there's no space for a 220px column next to it.
As for the wrapper, it looks like you'll want to add a height assignment; otherwise that wrapper is 960px x 0px

Answer 5

You float the #content with 940px to the left and the #column with 220px to the right. The #wrap has 960px so both of #content and #column don't fit inside #wrap. So if your propose is to float #content with #column then you have to reduce the widths. If your propose is to float #left with #column you have to put #left and #column inside #content

Answer 6

You need to give '#wrapper' the appropriate size to contain '#content' and '#column', that way you won’t see this particular issue anymore.
For example:
Total '#content' width (“width”640+”Padding”20) + Total '#column' width (“”width”220+”Padding”15+15) = appropriate '#wrapper' width
960+250 = 1210px
Then you will get what you want.
Yet you will find another issue, if you declared a background to your '#wrapper' you won’t see it because wrapper won’t be able to define the floated elements size.
To fix that add the next '< div style=”clear:both;” >< /div >' before your closing wrapper.
In addition, “I think” if you set the float of '#column' to left instead of right, you will get the same effect and it will be easier for you to understand what’s going on.
Hopefully it clarified the Issue; else I’m happy to provide more explanation.
Good luck!
IN-ACTION:
<div id="wrapper">
<div id="content">
<div id="left">
<img src="Images/headerOne.png" width="356" height="46" alt="Top Quality Lumber" title="Top Quality Lumber">
<p>Misty Mountain Wood Products is located just east of Edson in beautiful Yellowhead County, Alberta. We offer
a complete service from cutting the tree to the finished product. Our mill produces top quality Canadian timber
and lumber.</p>
<img src="Images/headerTwo.png" width="356" height="46" alt="Board and Batten siding" title="Board and Batten">
<p>Use our unedged boards (2nd-cut slabs) to create rustic Board-on-Board siding on pole or frame buildings. Great for
animal shelters, machine sheds, hay sheds, garden shed, playhouse, barns, wind fencing etc...</p>
<img src="Images/headerThree.png" width="356" height="46" alt="Deal Direct with the Mill" title="Deal Direct">
<p>this is where you write whatever</p>
</div><!--this is the end of the left div-->
</div> <!--this is the end of the content-->
<div id="column">
<img src="Images/shed01.jpg" alt="shed" title="shed">
<img src="Images/batten01.jpg" alt="batten" title="batten">
<img src="Images/shed02.jpg" alt="shed2" title="shed2">
</div><!--this is the end of the column-->
<div style="clear:both"></div>
</div><!--this is the end of the wrapper-->
CSS
#wrapper{width: 1210px;
margin: 0 auto;
background-color:#F00;
}
#content{padding-bottom: 10px;
padding-left: 20px;
width: 940px;
float: left;
color: #ffffff;}/*960*/
#left{width: 600px;
padding-top: 20px;
padding-right: 15px;
padding-left: 15px;
float: left;
background-color: #838b73;}/*630*/
#column{width: 220px;
background-color: #838b73;
padding-top: 25px;
padding-left: 15px;
padding-right: 15px;
float:left;
margin: 0 auto;}/*250*/