CODEWITHSUNDEEP
htmlcss
Matt B
Matt B

Reputation: 187

Placing two divs side by side?

I've looked at a lot of similar questions and can't seem to fix my issue. Perhaps it's because of the scrollbars.

Jfiddle: https://jsfiddle.net/qdyw4rms/

I want to have these two sidebars side by side. Css:

#content {
width:960px;
height: 1000px;
background-color:grey;
margin: 0 auto;
}

#leftcol {
height: 600px;
width: 300px;
float: left;
}

#rightcol {
float: left;
height: 400px;
width: 300px;
margin-left: 660px;
}


#gesture {
overflow-y: scroll;
height: 400px;
width: 300px;
}

#category {
overflow-y: scroll;
height: 400px;
width: 300px;
}

Html:

<body>
    <div id="content"> <!-- start of content-->
        <div id="leftcol"> <!-- start of left col-->
            <div id="gesture">
                Gesture

            </div>
            <div id="meaning"
                Meaning

            </div>
        </div><!-- end of left col -->

        <div id="middlecol"> <!-- start of middle col-->
            Arms crossed
            <div id="animation">

            </div>
        </div> <!-- end of middle col-->
        <div id="rightcol"> <!-- start of right col -->
            <div id="category">
                Category

            </div>
            <div id="region">
                Region

            </div>

        </div>  <!-- end of right col-->
    </div> <!-- end of content -->
</body>

Upvotes: 0

Views: 62

Answers (3)

dippas
dippas

Reputation: 60543

you're missing an ending close tag here:

<div id="meaning"
   Meaning
</div>

should be:

<div id="meaning">
  Meaning
</div>

and you are closing a div to earlier

Snippet:

#content {
  width: 960px;
  height: 1000px;
  background-color: grey;
  margin: 0 auto;
}
#leftcol {
  height: 600px;
  width: 300px;
  float: left;
}
#rightcol {
  float: left;
  height: 400px;
  width: 300px;
  margin-left: 660px;
}
#middlecol {} #gesture {
  overflow-y: scroll;
  height: 400px;
  width: 300px;
}
#meaning {} #category {
  overflow-y: scroll;
  height: 400px;
  width: 300px;
}
<div id="content">
  <!-- start of content-->
  <div id="leftcol">
    <!-- start of left col-->
    <div id="gesture">
      Gesture
    </div>
    <div id="meaning">
      Meaning
    </div>
  </div>
  <!-- end of left col -->
  <div id="middlecol">
    <!-- start of middle col-->
    Arms crossed
    <div id="animation">
    </div>
  </div>
  <!-- end of middle col-->
  <div id="rightcol">
    <!-- start of right col -->
    <div id="category">
      Category
    </div>
    <div id="region">
      Region
    </div>
  </div>
  <!-- end of right col-->
</div>
<!-- end of content -->

Upvotes: 2

Emad Emami
Emad Emami

Reputation: 6629

I recommend you to use % instead of px.
something like:

#leftcol {
height: 600px;
width: 48%;
margin-left:1%;
margin-right:1%;
float: left;
}

#rightcol {
float: left;
height: 400px;
width: 48%;
margin-left:1%;
margin-right:1%;
}

and check your middlecol too.

Upvotes: 0

ketchupisred
ketchupisred

Reputation: 651

Kind of like this? 

<div id="content"> <!-- start of content-->
        <div id="leftcol"> <!-- start of left col-->
            <div id="gesture">
                Gesture

            </div>
            <div id="meaning">
    Meaning
    </div>


            </div>

        <div id="middlecol"> <!-- start of middle col-->
            Arms crossed
            <div id="animation">
            Animation
            </div>
        </div> <!-- end of middle col-->
        <div id="rightcol"> <!-- start of right col -->
            <div id="category">
                Category

            </div>
            <div id="region">
                Region

            </div>

        </div>  <!-- end of right col-->
  </div>

CSS:

#content {
    width:960px;
    height: 1000px;
    background-color:grey;
    margin: 0 auto;
}

#leftcol {
    height: 600px;
    width: 300px;
    float: left;
  background-color:#cc0000;
}

#rightcol {
    float: left;
    height: 400px;
    width: 300px;
  background-color:#0000cc;
}

#middlecol {
    background-color:#000000;
  float:left;

}

#gesture {
    overflow-y: scroll;
    height: 400px;
    width: 300px;
}

#meaning {

}

#category {
    overflow-y: scroll;
    height: 400px;
    width: 300px;
}

Upvotes: 0

Related Questions