Look mom, no tables! Show me

Luzian · Sep 3, 2006

I want the two [tt]div[/tt]s in red to be side-by-side, not the latter div under the former.

Code:

<div>
[tab][red]<div>huge block of text with paragraphs</div>[/red]
[tab][red]<div>another huge block of text with paragraphs</div>[/red]
</div>

vacunita · Sep 3, 2006

Float them:

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.

Vragabond · Sep 3, 2006

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.

Luzian · Sep 3, 2006

I'm using firefox. The result of the followed code isn't what I expected. Copy and paste, see what you get:

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>

Vragabond · Sep 3, 2006

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.

Luzian · Sep 3, 2006

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.

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;
}

Luzian · Sep 3, 2006

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.

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.

ChrisHunt · Sep 4, 2006

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

http://www.alistapart.com/articles/css3multicolumn/

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Luzian · Sep 4, 2006

That's possibly not a great idea on a screen as it means lots of up and down scrolling

If there are too many columns. But it's proven to be easier to read text in columns, which is why magazines do so.

ChrisHunt · Sep 4, 2006

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

http://www.dmoz.org

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

Luzian · Sep 4, 2006

I just heard css could replace tables. I guess it can, but not very well. I'll stick with tables, they make more sense anyway.

1DMF · Sep 5, 2006

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.

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!

Look mom, no tables! Show me

Luzian

Programmer

vacunita

Programmer

Vragabond

Programmer

Luzian

Programmer

Vragabond

Programmer

Luzian

Programmer

Luzian

Programmer

ChrisHunt

Programmer

Luzian

Programmer

ChrisHunt

Programmer

Luzian

Programmer

1DMF

Programmer

Similar threads

Part and Inventory Search

Sponsor