Solved

CSS two columns using DIVs

Posted on 2016-07-19
9
41 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
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
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 22

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 42

Expert Comment

by:Rob Jurd, EE MVE
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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
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 42

Expert Comment

by:Rob Jurd, EE MVE
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 500 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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS change width browser switches to mobile view 2 74
How to Left-Align Navigation bar? 4 26
Wordpress "chart" plugin recommendation 7 52
Botom of page is wrong color 5 11
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

777 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