How do I float this div column to the right?

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

It's difficult to tell what you want your final design to look like because of the nesting. Two column fluid? What do you want adjacent to what and on what side? — DevlshOne, Nov 14 '13 at 02:59
Also, it would be better to provide a [fiddle](http://jsfiddle.net) so people can make changes to your code and give suggestion and demonstration. — Passerby, Nov 14 '13 at 03:00
It sounds like you need some `height` assignments and `position`ing, maybe even some `display` modifications. — DevlshOne, Nov 14 '13 at 03:02

score 1 · Answer 1 · answered Nov 14 '13 at 03:09

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;}

score 1 · Answer 2 · answered Nov 14 '13 at 03:11

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.

Oh, and on another note, you're not closing your `img` tags properly. You have ``. You should have `` Emphasis on */>* — Jacques ジャック, Nov 14 '13 at 03:13

Nivas · Answer 3 · 2013-11-14T03:29:47.190

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; 
}

score 0 · Answer 4 · answered Nov 14 '13 at 03:10

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

score 0 · Answer 5 · answered Nov 14 '13 at 03:11

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

Mohammed Hanafy · Answer 6 · 2013-11-20T03:14:00.873

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*/

How do I float this div column to the right?

6 Answers6