Как поместить этот столбец div вправо?

Question

Я - веб-дизайнер первого года, и сейчас я работаю над заданием, где ему нужно поплавать два содержимого бок о бок. Каждый раз, когда я плаваю правильный контент в правой части, я: 1) теряю всю свою обертку. 2) содержимое не плавает рядом с левым содержимым.
У вас есть какие-либо идеи относительно того, что я делаю неправильно?
вот мой 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> <!--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--> 

и мой 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;} 

на данный момент он полностью расстраивает меня, и я понятия не имею, что делать

Answer 1

Добавить поплавком: слева ваш wrapper class

И переместите div с колонкой id внутри содержимого div.

Пример здесь 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

Ваше право column не плавающий рядом с левой content, потому что там не хватает места в wrapper , Ваш wrapper - 960px, а ваш левый content - 940px - нет места для 220pxcolumn рядом с ним.

Что касается обертки, похоже, вы захотите добавить назначение height; в противном случае, что wrapper является 960px x 0px

Answer 3

Измените свой CSS на:

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

Вот это скрипку: http://jsfiddle.net/YpukY/

Только так вы знаете, вы хотите, чтобы общая ширина (ширина объекта + отступы + маржа + границу) обоих столбцов меньше ширины контейнера.

Вы можете перемещать их влево, пока они не слишком широки, они будут рядом.

Answer 4

Вы плаваете #content с 940px влево и #column с 220px вправо. #wrap имеет 960px, поэтому и #content, и #column не помещаются внутри #wrap. Поэтому, если вы предлагаете float #content с #column, вам нужно уменьшить ширину. Если ваш предлагать, чтобы плавать #left с #column вы должны положить #left и #column внутри #content

Answer 5

Не уверен, что если вы хотели columndiv в float слева от главного div, или хотели right DIV рядом с вашим left.

Я добавил и здесь: http://jsfiddle.net/nivas/afZx6/

Идея заключается в том, что ширина обертки должна быть большой (широкий) достаточно, чтобы держать все в div сек бок о бок. Если бы не плавающие divs не обернулись вокруг «следующей строки».

Новый HTML (удалено некоторое содержание, чтобы сделать вещи более ясно):

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

Так в ниже CSS,

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) 

(снова удалены некоторые правила для ясности):

#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 6

Вы должны указать '#wrapper' соответствующий размер, чтобы содержать '#content' и '#column', таким образом вы не увидите этого особенного больше.

Например: Общая ширина'content '("width" 640+ "Padding" 20) + Общая ширина'column' ("" width "220+" Padding "15 + 15) = соответствует '# обертка ' 960 + 250 = 1210px Тогда вы получите то, что хотите.

И все же вы найдете еще одну проблему, если вы указали фон своему «#wrapper», вы не увидите его, потому что обертка не сможет определить размер флотируемых элементов. Чтобы исправить это, добавьте следующий '< div style = "clear: both;"> </div>' перед вашей закрывающей оболочкой.

Кроме того, «я думаю», если вы установите поплавок «#column» налево, а не справа, вы получите тот же эффект, и вам будет легче понять, что происходит.

Надеюсь, он разъяснил проблему; иначе я с удовольствием предоставил больше объяснений.

Удачи вам!

в действии:

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