плавающие 2 столбца бок о бок в контейнере div

Я пытаюсь поплавать два столбца column_l и column_r бок о бок на странице о странице, но проблема, с которой я сталкиваюсь, заключается в том, что ее ходы и беспорядок вверх и нижний колонтитул и висит за пределами контейнера div ,плавающие 2 столбца бок о бок в контейнере div

column_l содержит информацию о компании, а column_r - изображение.

Я покажу свой код, но в основном тело содержит контейнер, на который я положил весь свой код.

Для этого я создал обертку для включения двух столбцов.

body{ 
    background-image:url('../img/small_logo.jpg'); 
    background-repeat:repeat; 
    position:relative; 
    background-position:50% 50%; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size: 0.8em; 
    /*padding-left:25px; 
    padding-right:25px;*/ 
    overflow:visible; 
    margin:0px auto; 
    background-attachment:fixed; 
    min-height:100%; 
    width:100%; 
    /* FOR A LARGE-SINGLE IMAGE TO STRETCH COMFORTABLY ACROSS A BODY 
    -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
    zoom:1;*/ 
    } 
#container{ 
    margin: auto; 
    padding:10px; 
    background-color:#F5F5DC; 
    width:720px; 
    border:2px black solid; 
    position:relative; 
    background-attachment: scroll; 
    display:block; 
    height:auto; 
    margin-bottom:10px; 
    padding-bottom:15px 

} 
#logo{ margin:0; 
padding:auto; 
position: inherit; 
display:block; 
height:auto; 
width:auto; 
} 
#wrapper{margin:auto; height:auto; width:100%;} 
#column_l { 
    width: 60%; 
    margin: 0; 
    padding: 0; 
    background-color: #FFFF99; 
    float:left; 
} 
#column_r { 
    width: 40%; 
    margin: 0; 
    margin-right:0px; 
    float: right; 
    background-color: #FFFF99; 
    position: absolute; 
    left:60%; 

} 

#column_r p { 
    font-size: 11px; 
    margin: 7px; 
} 

#nav{ 
    background-color: #800000; 
    margin-left: 0px; 
    text-align: center; 
    border-top: 2px solid #800000; 
    border-bottom: 2px solid #800000; 
    padding:10px 0 10px 0; 
    font-family:"Buxton Sketch"; 
    font-size:16px; 
} 
#rightContainer{ 
float:right; 
margin:0; 
padding:0; 
border:2px solid; 
width:25%; 
height:400px; 

} 
th{font-size:large; 
} 
#footer{ 
    margin-left:0; 
    padding:10px 0 10px 0; 
    text-align:center; 
    opacity:0.6em; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
    height:40px; 
    vertical-align:bottom; 
    font-family:"Buxton Sketch"; 
    font-size:16px; 

    } 

#copyright{ 
    margin:auto; 
    padding:3px; 
    text-align:center; 

} 
#copyright p{ 
font-size: 12px; 
    color:#000000; 

} 
#fb {padding:2px;margin:auto; float:left; } 

/* Styles for Navigation */ 
#nav ul { 
    list-style-type: none; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
#nav li { 
    float: left; 
} 
#nav a { 
    color: #fff; 
    text-decoration: none; 
    margin: 0 3px; 
    padding: 5px; 
    display: inline; 

} 
#nav a:hover { 
    border: 1px solid #456; 
    background-color: #F0E68C; 
    font-size:large; 
    color:black; 
} 
/* Styles for Footer */ 
#footer ul { 
    list-style-type: none; 
    width: 100%; 
    margin: 0px; 
    padding: 5px; 
    padding-top:5px; 
} 
#footer li { 
    float: left; 
} 
#footer a { 
    color: black; 
    text-decoration: none; 
    margin-top: 0px; 
    padding-top: 5px; 
    display: inline; 

} 
#footer a:hover { 
    border: 1px solid ; 
    background-color: #F0E68C; 
    font-size:medium; 
} 

/*Classes */ 
.largehead h1{font-size:x-large;} 
.shadow:before, 
     .shadow:after { 
      content:""; 
      position:absolute; 
      z-index:-2; 
     } 

     .shadow p { 
      font-size:16px; 
      font-weight:bold; 
     } 
     .shadow img { 
      font-size:16px; 
      font-weight:bold; 
     } 

/* Shadow Style */ 
.shadow { 
-moz-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue; /* For Older Versions */ 
     -webkit-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue; 
     box-shadow:2px 2px 5px black,-2px -2px 5px lightblue; 

     /*     For 'IE'        */ 

     filter: 
      progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=0,strength=5) /* Top  */ 
      progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=90,strength=3) /* Right */ 
      progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=180,strength=3) /* Bottom */ 
      progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=270,strength=5);/* Left */ 
    } 
     -webkit-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue; 
     box-shadow:2px 2px 5px black,-2px -2px 5px lightblue; 

     /*     For 'IE'        */ 

     filter: 
      progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=0,strength=5) /* Top  */ 
      progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=90,strength=3) /* Right */ 
      progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=180,strength=3) /* Bottom */ 
      progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=270,strength=5);/* Left */ 
    } 
/* Rotated box*/ 

     .rotated { 
      -webkit-box-shadow:none; 
       -moz-box-shadow:none; 
        box-shadow:none; 
      -webkit-transform:rotate(-3deg); 
       -moz-transform:rotate(-3deg); 
       -ms-transform:rotate(-3deg); 
       -o-transform:rotate(-3deg); 
        transform:rotate(-3deg); 
     } 

     .rotated > :first-child:before { 
      content:""; 
      position:absolute; 
      z-index:-1; 
      top:0; 
      bottom:0; 
      left:0; 
      right:0; 
      background:#fff; 
      -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
        box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
     } 

     /* Lifted corners */ 

     .lifted { 
      -moz-border-radius:4px; 
       border-radius:4px; 
     } 

     .lifted:before, 
     .lifted:after { 
      bottom:15px; 
      left:10px; 
      width:50%; 
      height:20%; 
      max-width:300px; 
      max-height:100px; 
      -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
        box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
      -webkit-transform:rotate(-3deg); 
       -moz-transform:rotate(-3deg); 
       -ms-transform:rotate(-3deg); 
       -o-transform:rotate(-3deg); 
        transform:rotate(-3deg); 
     } 

     .lifted:after { 
      right:10px; 
      left:auto; 
      -webkit-transform:rotate(3deg); 
       -moz-transform:rotate(3deg); 
       -ms-transform:rotate(3deg); 
       -o-transform:rotate(3deg); 
        transform:rotate(3deg); 
     } 

/* Curled corners */ 

     .curled { 
      border:1px solid #efefef; 
      -moz-border-radius:0 0 120px 120px/0 0 6px 6px; 
       border-radius:0 0 120px 120px/0 0 6px 6px; 
     } 

     .curled:before, 
     .curled:after { 
      bottom:12px; 
      left:10px; 
      width:50%; 
      height:55%; 
      max-width:200px; 
      max-height:100px; 
      -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
       -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
        box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
      -webkit-transform:skew(-8deg) rotate(-3deg); 
       -moz-transform:skew(-8deg) rotate(-3deg); 
       -ms-transform:skew(-8deg) rotate(-3deg); 
       -o-transform:skew(-8deg) rotate(-3deg); 
        transform:skew(-8deg) rotate(-3deg); 
     } 

     .curled:after { 
      right:10px; 
      left:auto; 
      -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg); 
       -ms-transform:skew(8deg) rotate(3deg); 
       -o-transform:skew(8deg) rotate(3deg); 
        transform:skew(8deg) rotate(3deg); 
     } 
     dl.border-around 
{ 
    margin: 2em 0; 
    padding: 0; 
    width: 20em; 
    float:right; 
} 

.border-around dt 
{ 
    background-color: #131210; 
    color: #959289; 
    padding: .5em; 
    font-weight: bold; 
    text-align: center; 
    text-transform: uppercase; 
    border-left: 1px solid #131210; 
    border-right: 1px solid #131210; 
    border-top: 1px solid #131210; 

} 

.border-around dd 
{ 
    margin: 0 0 1em 0; 
    background: #DBD8D8; 
    text-align: center; 
    padding: 1em .5em; 
    font-style: italic; 
    border-left: 1px solid #131210; 
    border-right: 1px solid #131210; 
    border-bottom: 1px solid #131210; 

} 

div.wrapperleft{ 
    float:left; 
    position:relative; 

    } 
} 
    div.wrapper{ 
     float:right; /* important */ 
     position:relative; /* important(so we can absolutely position the description div */ 
    } 
    div.description{ 
     position:absolute; /* absolute position (so we can position it where we want)*/ 
     bottom:0px; /* position will be on bottom */ 
     left:0px; 
     width:60%; 
     /* styling bellow */ 
     background-color:black; 
     font-family: 'tahoma'; 
     font-size:15px; 
     color:white; 
     opacity:0.6; /* transparency */ 
     filter:alpha(opacity=60); /* IE transparency */ 
    } 
    p.description_content{ 
     padding:0px; 
     margin:0px; 
    } 

     /*Feedback*/ 
form {float:left; width:50%; text-align:left; padding-top:30px;color:white; margin-left:200px; list-style:none;} 
textarea {border:0; padding-top:0px; font-family:"Lucida Console";} 
input {border:0; padding:0; font-family:"Lucida Console";} 
submit {border:0; padding:0; font-family:"Lucida Console";} 
label {border:0; padding:0; font-family:"Lucida Console";} 
label {float:left; width:150px; text-align:right; display:block;margin-top:5px;} 
textarea {border:1px gray solid; margin-left:10px; padding:5px;} 
input, datalist {border:1px gray solid; margin-left:10px; padding:5px;} 
input {width:280px; margin-bottom:16px;} 
textarea {width:280px; height:150px; text-align:justify; margin-bottom:16px;} 

#feedback {padding-top:10px; margin-right:100px;}

и для HTML:

<body > <!-- START BODY --> 
<!-- START CONTAINER --> 
    <div id="container" class="shadow lifted"> 
     <div id="logo"> <!-- START LOGO --> 
      <img src="img/cropped_logo.jpg" alt="logo" width=720px height=300px /> 
     </div> <!-- END LOGO --> 
     <!-- START NAV--> 
    <div id="nav" class="shadow"> 
     <a href="index.html" > Home</a> 
     <a href="menu.html"> Menu</a> 
     <a href="wholesale.html">Wholesale</a> 
     <a href="story.html">Our Story</a> 
     <a href="contact.html">Contact Us</a> 
    </div> <!-- END NAV--> 
    <div id="wrapper"> 
    <!-- Begin Left Column --> 
     <div id="column_l"> 
      <h1>Our Story</h1> 
      <p> What started out as making ice cream for family and friends, in our home kitchen, quickly flourished into a labor of love and creativity for ice cream aficionado Hugh Balthrop. "For me, ice cream is all about real flavor using natural and local ingredients. This is where the passion is for me. Ice cream brings out the inner kid in everyone". Ever had Sweet Potato Ice Cream with candied pecans? What about lemon sweet tea sorbet? Wild Blueberry Frozen Yogurt? Blackberry or Watermelon Sorbet? The list goes on and on... Where can you find it, you ask? Right now, you can grab some at Oxbow Restaurant, in Clarksdale, MS, Mississippi Grounds and Cleveland Country Club in Cleveland, MS, Delta Bistro and TurnRow Books, in Greenwood, MS.</p> 
     </div><!-- End Left Column --> 
<!-- Begin Right Column --> 
     <div id="column_r"> 
      <img alt="" height="288" src="img/hugh.jpg" width="193" /> 
      <p>Hugh Balthrop</p> 
     </div><!-- End Right Column --> 
     </div><br> <!--end wrapper--> 






    <div id="footer" class="shadow lifted"> 
     <div class="fb-like" data-href="https://www.facebook.com/pages/Sweet-Magnolia-Ice-Cream-Co/303952586284264?fref=ts" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" clear:both></div> 


      <a href="index.html">Home</a> 
      <a href="menu.html"> Menu</a> 
      <a href="wholesale.html">Wholesale</a> 
      <a href="story.html">Our Story</a> 
      <a href="contact.html">Contact Us</a> 
    </div> <!-- end of footer --> 
     <div id="copyright" class="lifted"> 
      <p id="copyright">Sweet Magnolia Ice Cream Company &copy; 2013. All Rights Reserved.</p> 
     </div> 
</div> <!-- End of Container --> 

</body> 

</html>

Я попытался толкая column_r над с левой: 60%, но теперь он прикрывает колонтитула.

источник

2013-04-29 sipp

Возможно ли, чтобы вы создали скрипку для иллюстрации своей проблемы? –

Вы забыли очистить поплавки.

Добавить

#footer { clear: both; }

И это решит проблему.

источник

2013-04-29 20:20:56 drip

Я сделал это, и это сработало, но теперь я пытаюсь заставить div fb работать, чтобы он отображался в нижнем колонтитуле – sipp

Я не вижу код javascrip для плагина facebook ... Вы забыли добавить Это ? – drip

Я, конечно, забыл, спасибо огромное! – sipp

Добавление

float:left;

к классу CSS #wrapper сделает внешний содержащий DIV расширить для хранения содержимого статьи.

Есть еще некоторые вопросы, связанные с стилем, с которыми вам придется иметь дело, но, надеюсь, это поможет вам.

источник

2013-04-29 20:24:38 RacerNerd

Добавить правило 'clear: both; для нижнего колонтитула css, должен сделать трюк!

источник

2013-04-29 20:26:47 Kevinc

плавающие 2 столбца бок о бок в контейнере div

ответ

Смежные вопросы