All geek questions in one place

Partitioning side by side

I am trying to stack these divs side by side - left and right. The correct divs stack will not be cleared. Should I float the left stack on the left and do the same with the correct stack or do the left and right floats?

I am trying to imitate this, I am trying to create a table, but with a div. http://www.weareint.io/

Demo https://jsfiddle.net/zeegn9cn/

 * {
   padding: 0px;
   margin: 0px;
 }
 #sections {
   /*--LEFT SECTION COLUMNS--*/
   width: 1000px;
   height: 400px;
   margin: 0 auto;
   background: red;
 }
 .sectionLfirst {
   width: 500px;
   background: orange;
 }
 .sectionLsecond {
   width: 500px;
   background: skyblue;
 }
 .sectionLthird {
   width: 500px;
   background: Indigo;
   clear: both;
 }
 .sectionRfirst {
   /*--RIGHT SECTION COLUMNS--*/
   float: right;
   width: 500px;
   background: orange;
   clear: both;
 }
 .sectionRsecond {
   float: right;
   width: 500px;
   background: skyblue;
   clear: both;
 }
 .sectionRthird {
   float: right;
   width: 500px;
   background: Indigo;
   clear: both;
 }
<!--LEFT SECTION COLUMNS-->
<div id="sections">
  <div class="sectionLfirst">
    <h3>fdkfjdkfj</h3>
    <p>fdlfkdlkfldkfdlkfdl</p>
  </div>
  <div class="sectionLsecond">
    <h3>fdkfjdkfj</h3>
    <p>fdlfkdlkfldkfdlkfdl</p>
  </div>
  <div class="sectionLthird">
    <h3>fdkfjdkfj</h3>
    <p>fdlfkdlkfldkfdlkfdl</p>
  </div>

  <!--LEFT SECTION COLUMNS-->
  <div class="clearfix"></div>
  <div class="sectionRfirst">
    <h3>1fdkfjdkfj</h3>
    <p>fdlfkdlkfldkfdlkfdl</p>
  </div>
  <div class="sectionRsecond">
    <h3>2fdkfjdkfj</h3>
    <p>fdlfkdlkfldkfdlkfdl</p>
  </div>
  <div class="sectionRthird">
    <h3>3fdkfjdkfj</h3>
    <p>fdlfkdlkfldkfdlkfdl</p>
  </div>

</div>
Run codeHide result
+4
source share
8 answers

you can wrap them in a div and put them like this:

*{
  padding:0px;
  margin:0px;
}
#sections{   /*--LEFT SECTION COLUMNS--*/
  width:1000px;
  height:400px;
  margin:0 auto;
  background:red;
}
.sectionLfirst{
  width:500px;
  background:orange;
}
.sectionLsecond{
  width:500px;
  background:skyblue;
}
.sectionLthird{
  width:500px;
  background:Indigo;
  clear:both;
}  
  .sectionRfirst{  /*--RIGHT SECTION COLUMNS--*/
  float:right; 
  width:500px;
  background:orange;
  clear:both;
}
.sectionRsecond{
  float:right;
  width:500px;
  background:skyblue;
  clear:both;
  
}
.sectionRthird{
  float:right;
  width:500px;
  background:Indigo;
  clear:both;
}
.left {
    float: left;    
}
.right {
    float: right;
}
<!--LEFT SECTION COLUMNS--> 
<div id="sections">
    <div class="left">
        <div class="sectionLfirst">
            <h3>fdkfjdkfj</h3>
            <p>fdlfkdlkfldkfdlkfdl</p>
        </div>
        <div class="sectionLsecond">
            <h3>fdkfjdkfj</h3>
            <p>fdlfkdlkfldkfdlkfdl</p>
        </div>
        <div class="sectionLthird">
            <h3>fdkfjdkfj</h3>
            <p>fdlfkdlkfldkfdlkfdl</p>
        </div>
    </div>
    <!--LEFT SECTION COLUMNS--> 
    <div class="clearfix"></div>
    <div class="right">
        <div class="sectionRfirst">
            <h3>1fdkfjdkfj</h3>
            <p>fdlfkdlkfldkfdlkfdl</p>
        </div>
        <div class="sectionRsecond">
            <h3>2fdkfjdkfj</h3>
            <p>fdlfkdlkfldkfdlkfdl</p>
        </div>
        <div class="sectionRthird">
            <h3>3fdkfjdkfj</h3>
            <p>fdlfkdlkfldkfdlkfdl</p>
        </div>
    </div>
    
</div>
Run codeHide result
+2
source

You are going to do it wrong. Do not swim them, this is not what you are trying to achieve here.

div align-row (. .align) align-table (. #sections).

, #sections - CSS table-layout: fixed;, , , .

fiddle

* {
  padding: 0px;
  margin: 0px;
}
#sections {
  /*--LEFT SECTION COLUMNS--*/
  width: 1000px;
  height: 400px;
  margin: 0 auto;
  background: red;
  display: table;
  table-layout: fixed;
}
.align {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
.sectionLfirst {
  width: 500px;
  background: orange;
}
.sectionLsecond {
  background: skyblue;
}
.sectionLthird {
  background: Indigo;
}
.sectionRfirst {
  /*--RIGHT SECTION COLUMNS--*/
  background: orange;
}
.sectionRsecond {
  background: skyblue;
}
.sectionRthird {
  background: Indigo;
}
<!--LEFT SECTION COLUMNS-->
<div id="sections">
  <div class="align">
    <div class="sectionLfirst">
      <h3>fdkfjdkfj</h3>

      <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionLsecond">
      <h3>fdkfjdkfj</h3>

      <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionLthird">
      <h3>fdkfjdkfj</h3>

      <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
  </div>
  <!--LEFT SECTION COLUMNS-->
  <div class="align">
    <div class="clearfix"></div>
    <div class="sectionRfirst">
      <h3>1fdkfjdkfj</h3>

      <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionRsecond">
      <h3>2fdkfjdkfj</h3>

      <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionRthird">
      <h3>3fdkfjdkfj</h3>

      <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
  </div>
</div>
Hide result
+2

. .

https://jsfiddle.net/zeegn9cn/13/

#leftSections {
    float:left;
}
#rightSections {
    float:right;
}
+2

html, html .

* {
    margin: 0;
    padding: 0;
}
#sections {
    width: 1000px;
    height: 400px;
    margin: 0 auto;
    background: red;
}
#sections > div {
    float: left;
    width: 500px;
}
.sectionLfirst {
    background: orange;
}
.sectionLsecond {
    background: skyblue;
}
.sectionLthird {
    background: indigo;
}
.sectionRfirst {
    background: orange;
}
.sectionRsecond {
    background: skyblue;
}
.sectionRthird {
    background: indigo;
}
<div id="sections">
    <div class="sectionLfirst">
        <h3>fdkfjdkfj</h3>
        <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionRfirst">
        <h3>1fdkfjdkfj</h3>
        <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionLsecond">
        <h3>fdkfjdkfj</h3>
        <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionRsecond">
        <h3>2fdkfjdkfj</h3>
        <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionLthird">
        <h3>fdkfjdkfj</h3>
        <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionRthird">
        <h3>3fdkfjdkfj</h3>
        <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
</div>
Hide result
+1

, . , Bootstrap ( ).

, , , .

, , , Bootstrap, . , html/css , , - .

Bootstrap.

.

: Bootstrap -, , .

, , html, Bootstrap.

<div class="container">
    <div class="col-xs-6">
        <h1>Section 1</h1>
    </div>
    <div class="col-xs-6">
        <h1>Section 2</h1>
    </div>
    <div class="col-xs-6">
        <h1>Section 3</h1>
    </div>
    <div class="col-xs-6">
        <h1>Section 4</h1>
    </div>
    <div class="col-xs-6">
        <h1>Section 5</h1>
    </div>
    <div class="col-xs-6">
        <h1>Section 6</h1>
    </div>
</div>

, css. .

+1

https://jsfiddle.net/zeegn9cn/14/

div

CSS

    *{
  padding:0px;
  margin:0px;
}
#sections{   /*--LEFT SECTION COLUMNS--*/
  width:1000px;
  height:400px;
  margin:0 auto;
  background:red;
}

.left {
    width:500px;
    float:left;
}

.right {
    width:500px;
    float:right;
}
.sectionLfirst{
  width:500px;
  background:orange;
}
.sectionLsecond{
  width:500px;
  background:skyblue;
}
.sectionLthird{
  width:500px;
  background:Indigo;
}  
  .sectionRfirst{  /*--RIGHT SECTION COLUMNS--*/ 
  width:500px;
  background:orange;
}
.sectionRsecond{
  width:500px;
  background:skyblue;

}
.sectionRthird{
  width:500px;
  background:Indigo;
}

, , 100% . , 100% . https://jsfiddle.net/zeegn9cn/17/

+1

, float - . display:inline-block display:table , , :

, css, . , . , , / div.

-, , , . , display:block,

. :

http://jsfiddle.net/y3uprrow/1/

+1

https://jsfiddle.net/zeegn9cn/15/

/*--ADDED--*/
#sections-inner{
    display:inline-block;
    verticle-alignment:top;
}
0
source

Source: https://habr.com/ru/post/1598287/

More articles: