Solved

CSS two columns using DIVs

Posted on 2016-07-19
9
31 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
and to add my 2c, you'll see i've also encapsulated the right column in one element :)
0
 

Author Comment

by:9apit
Comment Utility
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
Comment Utility
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 21

Accepted Solution

by:
Kim Walker earned 500 total points
Comment Utility
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
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

728 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now