Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Look mom, no tables! Show me
- Thread starter Luzian
- Start date
Float them:
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Code:
<div>
[red]<div [blue]style="float:left;"[/blue]>huge block of text with paragraphs</div>
<div [blue]style="float:left;"[/blue]>another huge block of text with paragraphs</div>[/red]
</div>----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
You will need to float them. Divs are block level elements and will always begin in a new line, unless somehow altered. Floating is your best bet, positioning them (or just one of them) absolutely (thus taking them out of the normal flow) is a little worse.
- Thread starter
- #4
I'm using firefox. The result of the followed code isn't what I expected. Copy and paste, see what you get:
test.css
test.html
test.css
Code:
body
{
width: 8.5in;
height: 11in;
margin-left: 1.25in;
margin-right: 1.25in;
margin-top: 1in;
margin-bottom: 1in;
padding: 0in;
}
div.page
{
width: 100%;
padding: 0in;
page-break-after: auto;
}
div.page div.column
{
float: left;
}
div.page div.column p
{
text-indent: 0.5in;
}
div.page h1, div.page h2, div.page h3, div.page h4, div.page h5, div.page h6
{
clear: both;
}test.html
Code:
<html>
<head>
<title>The Day Trader's Manual</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<h3>THE ART OF DAY TRADING</h3>
<div class="column">
<p>In a sense, the taking in on such hefty profits eventually contributed to this series of profitable nonplays. Because I had banked a large portion of profits already, I figured that I could hang on to the shorts that I still had left and wait for the end of the world. This is playing from a position of power.</p>
<p>I decided to wait with my profitable positions.</p>
<p>The profile chart (#2) again showed disturbing signs that the bottom hadn't been made. How did it show this? Note the analysis of Figure C5.11 of the profile chart when I noted the auction line was upwards, yet prices sold off and found a Value Area at levels off the highs. The same situation occurs here. From periods A, B, E, and F, prices moved higher, yet towards the close, a Value Area was formed around the middle of the range. Again, there was more selling to support levels, even though there was initial obvious strength from periods A to F! Look out below!</p>
<p>Figure C5.13 created on 1-3 @ 9:39 P.M. vindicates my analysis of the necessity for new lows to be made.</p>
</div>
<div class="column">
<p>New lows were made at around the $394 level, about $6 from the previous end of the 5 wave at $400. This means at least another $4 profit on the balance of my positions.</p>
<p>A possible bottoming action showed in the Market Profile chart (#2). The day trader would have noticed that the auction line moved from A, B, and L and then rotated upwards. The Value Area was found to be just slightly a bit higher than half the range, another subtle hint that an intermediate bottom had been formed.</p>
<p>The #5 Chart, the daily bar chart, showed a wide gap from the previous day's low and the current day's high. There are three classifications of gaps: continuation, exhaustion, and breakaway gaps. Continuation gaps show up around halfway between the extreme high and low of the swing, exhaustion gaps are found at the end of an extended move, and breakaway gaps show up at the beginning of runaway markets from congestion areas. The gap in #5 Chart was neither a continuation gap nor a breakaway gap, but an exhaustion gap. How was this concluded? The move to the downside started at around the $425 area and had touched a low price of $394, a drop of about $31. The move to the upside started at $364 and hit a top at $425, a move of $61 (see Figure C5.1). A $31 move to the downside was an approximate 50 percent correction. Because I believed this selloff to be a correction before new highs were to be made, a correction of about 50 percent was perfectly acceptable. Once prices reached the $394 level with a gap, I had to conclude that prices had touched bottom.</p>
<p>What to do? Cover all shorts. What about going long at these levels? I have always found it hard to double up at reversal points. It isn't a question of a lack of trading skills, but more a problem</p>
</div>
<hr />
</div>
</body>
</html>Floated elements have their width defined as auto -- enough to fit the content. Given that there would be just a word or two in your columns, they would've worked perfectly. But since you have entire paragraphs, they expand the div as long as they can before wrapping to the next line. That is 100% or in your case 8.5 inches. Since it is impossible to have two 100% divs floating side by side, they stack up on top of another.
If you want to fix that, you need to give your divs width and its combined width must not excess that of their container. A simple fix would be 50% width, but make sure you don't have any borders, margins or padding then.
If you want to fix that, you need to give your divs width and its combined width must not excess that of their container. A simple fix would be 50% width, but make sure you don't have any borders, margins or padding then.
- Thread starter
- #6
I've already tried that, though I didn't want to because I usually stick with relative and dynamic practices (I never use absolute positioning or fixed widths). In this case I'd have a problem if I wanted 3 columns. Sure I could simply calculate and set the width accordingly, but I don't like jumping through hoops to get results that seems logical without the need to.
Anyway, as I said, I tried it, and it almost works, but not really. You'll see what I mean with the width modification you suggest.
Code:
div.page div.column
{
width: 50%
float: left;
}- Thread starter
- #7
scratch that. I'm getting different results now. The result I was speaking of, had 2 columns the way I wanted, but only at the top quarter of the columns were strangely merged and shifted to the right intruding into the right column's territory. I swear my code was exactly as I had it.
Though I'm still stuck with the problem of setting the width manually.
You appear to be trying to implement a "snaking column" of content. That's possibly not a great idea on a screen as it means lots of up and down scrolling, but if you want to do it take a look at
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
- Thread starter
- #9
But magazines aren't read through a fixed-size window. You hold on to the magazine and your eye tracks happily up and down the columns.
On a screen, it works differently as you scroll down the article reading the first column, then back to the top again for the next one, and so on. It's more awkward than the equivalent operation on a piece of paper.
That's not to say that it can't work well sometimes, and may do so on your page, but don't assume that rules that apply to paper publications will apply equally to online ones - it ain't so.
My advice would be to avoid snaking columns online, except for long narrow texts like a list of options - the home page would be an example - or cases where you're explicitly trying to evoke the look of a paper newspaper, regardless of any usability issues. I can't think of a major website (in fact, not any website) that uses snaking columns, despite their ubiquity in print. I think there's a good reason for that.
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
On a screen, it works differently as you scroll down the article reading the first column, then back to the top again for the next one, and so on. It's more awkward than the equivalent operation on a piece of paper.
That's not to say that it can't work well sometimes, and may do so on your page, but don't assume that rules that apply to paper publications will apply equally to online ones - it ain't so.
My advice would be to avoid snaking columns online, except for long narrow texts like a list of options - the home page would be an example - or cases where you're explicitly trying to evoke the look of a paper newspaper, regardless of any usability issues. I can't think of a major website (in fact, not any website) that uses snaking columns, despite their ubiquity in print. I think there's a good reason for that.
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
- Thread starter
- #11
lol Luzian , I know the feeling, but don't give up, It's no different than when you tried to write your first web page and didn't know HTML, using XHTML & CSS is another language, a completly different way of doing things, and will take time to learn and understand.
However once mastered, your code will be leaner, clearer, easy to manage and standards compliant.
I've found the best way to learn is find a free template that uses just XHTML & CSS and play with it, create your own site based on it, it will make a lot more sense that way.
I found it near on impossible trying to bolt on CSS to an existing website, you need to start the page from scratch, otherwise you'll forever be wabting to stick a table in to achieive something!
It's hard to let go of old and sometimes bad habits, but it will be worth it in the end!
"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
However once mastered, your code will be leaner, clearer, easy to manage and standards compliant.
I've found the best way to learn is find a free template that uses just XHTML & CSS and play with it, create your own site based on it, it will make a lot more sense that way.
I found it near on impossible trying to bolt on CSS to an existing website, you need to start the page from scratch, otherwise you'll forever be wabting to stick a table in to achieive something!
It's hard to let go of old and sometimes bad habits, but it will be worth it in the end!
"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
- Status
Similar threads
