[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 49
  • Last Modified:

CSS two columns using DIVs

Two cols using divsHello expert,

The concept is to have two columns, one on the left which can
grow pretty large if needed and a column on the right that
can contain a stack of smaller elements. See attached GIF.

Have tried several schemes found searching on the 'net
but nothing works so far. The closest I have gotten
is the code copied herewith below.

Thanks.

Allen

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: arial}

div.container{width:650px;}
#left{
   overflow: hidden; width:300px; background-color: #C0FFFF;
}

#right{
   float: right; width:300px; background-color: #FFFFC0;
}

</style>
</head>
<body>
<div class="container">


<div id="left">Auto filling left div  Auto filling left div Auto filling left div
Auto filling left div  Auto filling left div Auto filling left div
Auto filling left div  Auto filling left div Auto filling left div
Auto filling left div  Auto filling left div Auto filling left div
</div>

<div id="right">Auto sized right div</div>
<div id="right">Auto sized right div</div>
<div id="right">Auto sized right div</div>

</div>

</body>
</html>
0
Allen Pitts
Asked:
Allen Pitts
  • 3
  • 3
  • 2
  • +1
1 Solution
 
RobOwner (Aidellio)Commented:
Solution is to use bootstrap (http://getbootstrap.com).

See this fiddle: http://jsbin.com/zowasi/edit?html,css,output

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="container-fluid">

      <div class="row">
        <div class="col-xs-6 left">
          <div>Auto filling left div  Auto filling left div Auto filling left div
            Auto filling left div  Auto filling left div Auto filling left div
            Auto filling left div  Auto filling left div Auto filling left div
            Auto filling left div  Auto filling left div Auto filling left div
          </div>
        </div>
        <div class="col-xs-6 right">
          <div>Auto sized right div</div>
          <div>Auto sized right div</div>
          <div>Auto sized right div</div>
        </div>
      </div>
    </div>

  </body>
</html>
</body>
</html>

Open in new window

0
 
Snarf0001Commented:
Or if you don't want to use bootstrap, you should still contain the #right as one element, and have the lists inside of it.
Then you have two options depending on how far back you have to go with compatibility.
Easiest is to have the main container as display:table-row and #left / #right as "display:table-cell".

Or if you're targeting modern browsers, flexbox css is extremely versatile.
0
 
RobOwner (Aidellio)Commented:
Note that bootstrap is just a set of css classes that assist with layout. It's not a plugin, just pure css tested and standardised to work across multiple browsers. If you weren't doing this kind of layout, I wouldn't suggest it as consideration should be made for bloating your site unnecessarily, however in this case, it may really benefit you given you've hard coded the widths when bootstrap will resize dynamically across all devices and still keep the 2 columns.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Kim WalkerWeb Programmer/TechnicianCommented:
I agree with Snarf0001 in regards to containing the #right as one element.
<!DOCTYPE html>
<html>
	<head>
		<style>
			body {font-family: arial}
			
			div.container{width:650px;}
			#left{
				overflow: hidden; width:300px; background-color: #C0FFFF;
			}
			
			#right{
				float: right; width:300px; background-color: #FFFFC0;
			}
			
		</style>
	</head>
	<body>
	<div class="container">
	
		<div id="left">Auto filling left div  Auto filling left div Auto filling left div
			Auto filling left div  Auto filling left div Auto filling left div
			Auto filling left div  Auto filling left div Auto filling left div
			Auto filling left div  Auto filling left div Auto filling left div
		</div>
		
		<div id="right">
			<div>Auto sized right div</div>
			<div>Auto sized right div</div>
			<div>Auto sized right div</div>
		</div>
		
	</div>
	
	</body>
</html>

Open in new window

0
 
RobOwner (Aidellio)Commented:
and to add my 2c, you'll see i've also encapsulated the right column in one element :)
0
 
Allen PittsBusiness analystAuthor Commented:
Hello Rob Jurd and Kim Walker,

Couldn't decide who to go with. After tests decided first one I can get to work.

bootstrapThis is what I got from bootstrap. Tried the code copied from the reply. Tried copying the bootstrap.min.css and the bootstrap.min.js files into a folder in the web site (SharePoint)
and altering the link and source paths. No luck. Cannot find the jquery.min.js file.
Don't understand why the links to the bootstrap files don't seem to work. Except they are
HTTPS files that usually require some login. Also I am in a corporate environment
that may restrict access. Is there some way to test the access out side the file?

This is what I got from the straight css code using div.container{width:650px;}

css div.container
This similar to the result derived from using a table with two cells in a row
with divs in each cell. the rows stay separate but the right side div does not
go to the top.

Thanks for your replies.
Still searching for solution.

Allen Pitts, Dallas Texas
0
 
Allen PittsBusiness analystAuthor Commented:
Hello Rob Jurd.

To eliminate path problems copied bootstrap html file into folder on local drive.
Using
https://code.jquery.com/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
copied the Jquery, the CSS and the JS files into the same folder as the
the bootstrap.html file and altered the html file:
    <script src="jquery.min.js"></script>
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="bootstrap.min.js"></script>
No change in result.

Thanks.

Allen
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Actually, since the right column is the only one that's floated, it would have to come first in the element order or else the left column would push it down. The alternative is to float the left column, but then the width of the right column would need to include the width of the left column. The best solution is to float both columns and clear the element that follows them. Here I've use the clear fix hack since there are no elements following the last floated element.
<!DOCTYPE html>
<html>
	<head>
		<style>
			body {font-family: arial}
			
			div.container{width:650px; overflow: hidden;}
			#left{
				float: left; overflow: hidden; width:300px; background-color: #C0FFFF;
			}
			
			#right{
				float: right; width:300px; background-color: #FFFFC0;
			}
			
			#right:after {
				content: ""; display: table; clear: both;
			}
			
		</style>
	</head>
	<body>
	<div class="container">
	
		<div id="left">Auto filling left div  Auto filling left div Auto filling left div
			Auto filling left div  Auto filling left div Auto filling left div
			Auto filling left div  Auto filling left div Auto filling left div
			Auto filling left div  Auto filling left div Auto filling left div
		</div>
		
		<div id="right">
			<div>Auto sized right div</div>
			<div>Auto sized right div</div>
			<div>Auto sized right div</div>
		</div>
		
	</div>
	
	</body>
</html>

Open in new window

0
 
Allen PittsBusiness analystAuthor Commented:
Will go to the BootStrap site and see if a tutorial can be worked. But right now the
content: ""; display: table; clear: both;
solution seems to work.

Thanks.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now