Solved

carrying over content to next div

Posted on 2014-01-20
10
374 Views
Last Modified: 2014-03-07
I want to make a newspaper type website (scrolling content horizontally).
Any Ideas?
or how can I carry content between divs once the content fills the first div, the rest carries over the the next?
0
Comment
Question by:Sam Cohen
[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
10 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39795358
HTML <div>s don't do that.  No HTML element will flow text from one to the next.  Even if you find a way to program it... different size screens will cause the <div> to be different sizes unless you have done something to restrict it.  And there is nothing that I know of that will tell you "when a div is full".
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 100 total points
ID: 39795501
If you are trying to do a newspaper look the columns flowing, you may be able to use the CSS column properties. for both Chrome and Firefox you may have to to the hyphen hacks and there is no IE support prior to IE 10.  Rather than going across multiple div containers, the column property lets you define multiple columns within a single div and the flow will automatically adjust for changes in resolution as long as you don't use fixed units of measure.

Details of use are on the Mozilla Developers site:

https://developer.mozilla.org/en-US/docs/Web/CSS/columns

I make some use of column in this page and several others on my site.

Cd&
0
 
LVL 8

Assisted Solution

by:Sam Cohen
Sam Cohen earned 0 total points
ID: 39795911
I think this is what I am looking for:
http://welcome.totheinter.net/columnizer-jquery-plugin/
0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 16

Accepted Solution

by:
hankknight earned 400 total points
ID: 39799923
You can do this with pure CSS:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-count

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper
{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
}
</style>
</head>
<body>

<p><strong>Note:</strong> The column-count property is not supported in Internet Explorer 9 and earlier versions.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>

</body>
</html>

Open in new window

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39801423
A plugin that comes in a 148k zip; indicating an even bigger size in use.  So a big bloated approach instead of learning how to write about a hundred bytes of actual CSS code?

I guess that makes sense if you are trying to avoid learning how to code.  If that much bloat was necessary then you do what you have to do but logically that plugin makes as much sense as using a railway car to transport a bag of pretzels.

The plugin needs 100k+ to generate the CSS in the DOM either in the stylesheet object or in some non-standard object of its own. So more than 99.9% of the plugin is overhead to do the same thing as 100 bytes.  Efficient; very efficient. No sense having a lot of memory and bandwidth if you can't find ways to waste it.

Cd&
0
 
LVL 43

Expert Comment

by:Rob
ID: 39899387
I've requested that this question be closed as follows:

Accepted answer: 250 points for hankknight's comment #a39799923
Assisted answer: 250 points for COBOLdinosaur's comment #a39795501

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
 
LVL 8

Author Comment

by:Sam Cohen
ID: 39899378
Thank you to you all.

Thanks COBO, you make alot of sense.
0
 
LVL 8

Author Comment

by:Sam Cohen
ID: 39899388
Get point COBO!
0
 
LVL 8

Author Closing Comment

by:Sam Cohen
ID: 39912004
Thanks all!
0

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JSON help 8 46
Make icons act like add/minus for qtys 6 43
Google Recaptcha 13 51
Can't see json data in ajax call to Highcharts 2 28
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

734 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