?
Solved

CSS two columns using DIVs

Posted on 2016-07-19
9
Medium Priority
?
46 Views
Last Modified: 2016-07-20
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
Comment
Question by:9apit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 41720014
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
 
LVL 23

Expert Comment

by:Snarf0001
ID: 41720047
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
 
LVL 43

Expert Comment

by:Rob
ID: 41720065
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 22

Expert Comment

by:Kim Walker
ID: 41720192
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
 
LVL 43

Expert Comment

by:Rob
ID: 41720243
and to add my 2c, you'll see i've also encapsulated the right column in one element :)
0
 

Author Comment

by:9apit
ID: 41721147
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
 

Author Comment

by:9apit
ID: 41721175
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
 
LVL 22

Accepted Solution

by:
Kim Walker earned 2000 total points
ID: 41721245
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
 

Author Closing Comment

by:9apit
ID: 41721642
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month10 days, 19 hours left to enroll

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question