Jump to content
  • 0

div 2 колонки корневой не раздвигает див

quickreg

Asked by quickreg,

 Share

Question

quickreg Explorer

quickreg

Posted
Posted

Проблема, когда создаю 2 колонки флоат задаю им получается что основной див не раздвигает внутренний

к примеру такой вариант

 

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Две колонки</title>
  <style type="text/css">
   #container {
  border: 5px solid #444444;
     /* Общая ширина макета */
    margin: 0 auto; /* Выравниваем по центру */
   }
   #leftcol {
    float: left;
    background: #f0f0f0;
    width: 600px;
background-color: #333;
   }
   #rightcol {
    float: left;
margin-left: 10px;
    background: #fc0;
    width: 200px;
background-color: #555555;
   }
   #leftcol2 {
    float: left;
    background: #f0f0f0;
   
background-color: #333;
   }
   #rightcol2 {
 
margin-left: 10px;
    background: #fc0;
    width: 100px;
background-color: #555555;
   }
   .clear {
    clear: left;
   }
  </style>
 </head>
 <body>
  <div id="container">
    <div id="leftcol">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>
       <div style="clear: both"></div>
       <div style="border: 3px solid #09F;">
         <div id="leftcol2">leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br></div>
         <div id="rightcol2">rightcol2<br>rightcol2<br>rightcol2<br>rightcol2<br>rightcol2<br>rightcol2<br></div>
       </div>
       <div style="clear:both"></div>
       dsfhsadjfh<br>
       dsfhsadjfh<br>
       dsfhsadjfh<br>
       dsfhsadjfh<br>
       dsfhsadjfh<br>
       
    </div>
    <div id="rightcol">Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br></div>
    <div class="clear"></div>
    <p>Текст</p>
  </div>
 </body>
</html>
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
DragorWW Explorer

DragorWW

Posted
Posted
Проблема, когда создаю 2 колонки флоат задаю им получается что основной див не раздвигает внутренний к примеру такой вариант
 

советую делать через table-cell, вот пример

http://jsfiddle.net/DragorWW/sHSvb/

Link to comment
Share on other sites
  • 0
quickreg Explorer

quickreg

Posted
  • Author
Posted

И всетки как правильно пользоваться float и clear чтобы не глючило???

просто когда мы внутри этих дивов засовываем конструкции из 2 div с float корневой div начинает глючить и он не раздвигается по высоте становится в 0 пикселей :) как от этого избавиться? да и когда используешь clear:both то он зачемто берет высоту предыдущего float и раздвигает див на высоту div который стоит еще на 2 уровня выше который float:left

 

что за ерунда?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Две колонки</title>
  <style type="text/css">
   #conteiner {
  border: 4px solid #09F;
  background-color: #090;
   
   
   }
   #leftcol {
    float: left;
    background: #f0f0f0;
    width: 600px;
   }
   #rightcol {
    float: left;
    background: #fc0;
    width: 200px;
   }
  </style>
 </head>
 <body>
 <div id="conteiner">
    <div id="leftcol">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div>
    <div id="rightcol">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /></div>
  </div>
 </body>
</html>
Link to comment
Share on other sites
  • 0
quickreg Explorer

quickreg

Posted
  • Author
Posted

вот даже более наглядный пример проблемы...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Две колонки</title>
  <style type="text/css">
   #conteiner {
  position: absolute;
  border: 4px solid #09F;
  background-color: #090;
   
   
   }
   #leftcol {
    float: left;
    background: #f0f0f0;
    width: 600px;
   }
   #rightcol {
    float: left;
    background: #fc0;
    width: 200px;
   }
   #conteiner2 {
  position: absolute;
  border: 4px solid #09F;
  background-color: #090;
   
   
   }
   #leftcol2 {
    float: left;
    background: #f0f0f0;
    width: 80px;
   }
   #rightcol2 {
    float: left;
    background: #fc0;
    width: 80px;
   }
  </style>
 </head>
 <body>
 <div id="conteiner">
    <div id="leftcol">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div>
    <div id="rightcol">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /> 
    
    <div id="conteiner2">
    
      <div id="leftcol2">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div>
      <div id="rightcol2">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /></div>
    </div>
     qweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqwe
  </div>
  </div>
 </body>
</html>

Вот и второй вопрос всплыл почему див левый стал расширять внутренние дивы???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Две колонки</title>
  <style type="text/css">
   #conteiner {
  position: absolute;
  border: 4px solid #09F;
  background-color: #090;
   
   
   }
   #leftcol {
    float: left;
    background: #f0f0f0;
    width: 600px;
   }
   #rightcol {
  margin-left: 700px;
 
   
    background: #fc0;
    width: 200px;
   }
   #conteiner2 {
 
 
  border: 2px solid #0F0;
  background-color: #090;
   
   
   }
   #leftcol2 {
    float: left;
    background: #f0f0f0;
    width: 80px;
   }
   #rightcol2 {
    
    background: #fc0;
margin-left: 82px;
width: 80px;
   }
  </style>
 </head>
 <body>
 <div id="conteiner">
    <div id="leftcol">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div>
    <div id="rightcol">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /> 
    
    <div id="conteiner2">
    
      <div id="leftcol2">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div>
      <div id="rightcol2">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /></div>
      <div style="clear:both"></div>
    </div>
     qweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqwe
  </div>
  </div>
 </body>
</html>
Link to comment
Share on other sites
  • 0
quickreg Explorer

quickreg

Posted
  • Author
Posted

Спасибо попробую разобраться я так понимаю лучше использовать два float: left

просто когда я использую один у меня внутри контента уже не получится использовать clear... все съезжать будет...

Link to comment
Share on other sites
  • 0
quickreg Explorer

quickreg

Posted
  • Author
Posted (edited)

Так тут такой вопрос если вот например используем данные варианты решения то <div> который внутри он не будет расширятся на 100% по ширине? если нет то как сделать чтобы он расширился на ширину родительского div?

Edited by quickreg
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept