CODEWITHSUNDEEP
htmlcss
Chris Brennan
Chris Brennan

Reputation: 191

Stacking divs side by side

I'm trying to stack these divs side by side - left and right. The right stack of divs won't clear. Should I float the left stack to left and the same with the right stack or do left and right floats?

I'm trying to emulate this, I'm trying to make a table but with divs. 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>

Upvotes: 3

Views: 680

Answers (8)

Dan
Dan

Reputation: 650

I often wondered how this could be done easily. I started a new job recently, and found out I should have been using Bootstrap (there are other options too).

It really conveniently let's you make a row or three evenly sized columns, for instance, among many other excellent features.

You can do all this stuff by hand, but I think it's actually better to learn industry standards like Bootstrap that will save you a lot of time. I realize this doesn't directly answer your html/css question, but I wish someone had told me this earlier.

Here's Bootstrap's main website.

This page will show you the basics of making these columns.

Also note, Bootstrap is excellent for making responsive webpages, meaning it will easily re-size items for you on different device sizes, or if you change the window size.

For instance, if you want to make a gird of divs two columns wide, and three rows tall, you can use the following html, if using 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>

As you can see, it is much cleaner, and doesn't require you to hand write any css. It's a powerful tool to eliminate many low level layout concerns.

Upvotes: 1

user4563161
user4563161

Reputation:

You're going about this wrong. Don't float them, that's not what your trying to achieve here.

Wrap the three div's and give the wrapper align-row (see code for .align) and give the parent align-table (see your #sections).

This will also allow you to have a truly responsive layout if you remove the width of #sections because of the CSS Rule table-layout: fixed; this will mean the side by side elements will site side by side and also change width automatically and will not disrupt the flow of content.

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

Upvotes: 2

wishab
wishab

Reputation: 1034

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

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

Upvotes: 0

Zach
Zach

Reputation: 1964

Check out this fiddle https://jsfiddle.net/zeegn9cn/14/

Wrap them and float the wraps and remove the floats on the individual divs

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

EDIT

If you want it responsive put a max width of 100% on the wrapper and make the inside percentage width. However I would advise that you move the column below by making the left and right section 100% width on mobile. Here is the fiddle for a responsive version without moving the column below https://jsfiddle.net/zeegn9cn/17/

Upvotes: 1

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

I don't think using floats is the right approach for building a site like this. make use of display:inline-block or display:table that way you can keep columns next to each other but keep them centered on the page:

this way if you make the correct css decisions, you can have a lot of flexibility and reusability with classes. and you can nest other elements within the columns to make a table-like structure. Also, this is responsive, no static widths/heights on your divs.

you can also define media queries to decide what to do when the screen size gets too small. Perhaps, mark all columns as display:block so they take up the entire width of the window

see this example:

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

Upvotes: 1

Bill Kindig
Bill Kindig

Reputation: 3622

I'd do it this way instead. It's cleaner.

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

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

Upvotes: 2

coderfin
coderfin

Reputation: 1763

If you control the html you could rearrange the html and float all the elements to the left.

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

Upvotes: 2

indubitablee
indubitablee

Reputation: 8206

you could wrap them in divs and float 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>

Upvotes: 3

Related Questions