how to get column data on same row?

W

Wizumwalt

I have a problem w/ the CSS below. I'm trying to make the columns show
up side by side. The columns are placed correctly horizontaly, but I
can't get them on the same row.

Can anyone take a look as see what I'm doing wrong? Any help much
appreciated.

---

<html>
<head>
<style type="text/css">
#title { position: relative; width:100%; top:0px; background:#ff0000;
}
#header { position: relative; width:100%; background:#00ff00;
border-bottom: thin solid #000000; }
#col1 { position: relative; margin-left:10%; width:10%;
background:#ffff22; }
#col2 { position: relative; margin-left:20%; width:10%;
background:#ffff55; }
#col3 { position: relative; margin-left:30%; width:10%;
background:#ffff88; }
#col4 { position: relative; margin-left:40%; width:10%;
background:#ffffaa; }
#col5 { position: relative; margin-left:50%; width:10%;
background:#ffffdd; }

</style>
</head>
<body>

<div id="title">My Title</div>

<div id="header">(header 1)</div>
<div id="col1">1 blah</div>

<div id="header">(header 2)</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
<div id="col4">col4</div>
<div id="col5">col5</div>

<div id="header">(header 3)</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
<div id="col4">col4</div>
<div id="col5">col5</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
<div id="col4">col4</div>
<div id="col5">col5</div>

</body>
</html>
 
N

Neredbojias

With neither quill nor qualm, (e-mail address removed) quothed:
I have a problem w/ the CSS below. I'm trying to make the columns show
up side by side. The columns are placed correctly horizontaly, but I
can't get them on the same row.

Can anyone take a look as see what I'm doing wrong? Any help much
appreciated.

---

<html>
<head>
<style type="text/css">
#title { position: relative; width:100%; top:0px; background:#ff0000;
}
#header { position: relative; width:100%; background:#00ff00;
border-bottom: thin solid #000000; }
#col1 { position: relative; margin-left:10%; width:10%;
background:#ffff22; }
#col2 { position: relative; margin-left:20%; width:10%;
background:#ffff55; }
#col3 { position: relative; margin-left:30%; width:10%;
background:#ffff88; }
#col4 { position: relative; margin-left:40%; width:10%;
background:#ffffaa; }
#col5 { position: relative; margin-left:50%; width:10%;
background:#ffffdd; }

</style>
</head>
<body>

<div id="title">My Title</div>

<div id="header">(header 1)</div>
<div id="col1">1 blah</div>

<div id="header">(header 2)</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
<div id="col4">col4</div>
<div id="col5">col5</div>

<div id="header">(header 3)</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
<div id="col4">col4</div>
<div id="col5">col5</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
<div id="col4">col4</div>
<div id="col5">col5</div>

</body>
</html>
Click to expand...

Yuch! For starters, ids should be unique. And your css is
inappropriate. Were I you, I'd check the many multi-column css examples
strewn throughout the web.
 
A

Andy Dingley

I have a problem w/ the CSS below. I'm trying to make the columns show
up side by side.
Click to expand...

There are a few ways to get elements alongside each other in a CSS
context.

Absolute positioning is one, but generally evil.

Floats are another, but tricky to understand. Read the article at
brainjar.com for the best primer around.

<table> in HTML is the easiest. If you're needing 5 columns across the
page, then you might have some justification for doing it this way.

Your choice should also be influenced by how you want their positioning
to behave with different window sizes.
 
R

Richard Sexton

Your choice should also be influenced by how you want their positioning
to behave with different window sizes.
Click to expand...

Why? There's something wrong with a narrow strip of content down the
middle of my 2000 wide pixel screen? (rolls eyes).

I will admit to being possibly the worst practitioner of HTML on the
planet but I do make a point of having my pages look pretty much
the same (as I can make them) look the same when the window is
maximized. Pet peeve I guess...
 
A

Andy Dingley

Your choice [of horizontal sizing unit] should also be influenced by
how you want their positioning
to behave with different window sizes.
Click to expand...

Why? There's something wrong with a narrow strip of content down the
Click to expand...

Maybe that's what you want?

Dimensions in ems will give you columns that fit their text contents
appropriately. This is fluid against window size or text size changes,
Doing all of them this way will huddle on the left-hand side.

Dimensions in % keep their relative proportion but the size could be
anything. Nice for layout, wrong for content.

Dimensions in pixels are appropriate for use with bitmaps you can't
adjust, but not much use otherwise.
middle of my 2000 wide pixel screen? (rolls eyes).
Click to expand...

That's nothing - try a 3200px display, composed of two 1600px wide
flatpanels. Throw a window full-screen there and "centred" gets split
across two monitors, with a gap in the middle for their frames.
I do make a point of having my pages look pretty much
the same (as I can make them) look the same when the window is
maximized. Pet peeve I guess...
Click to expand...

But how are you judging "pretty much the same" ? You _cannot_ control
text or bitmap size relative to the window, so should your elements
scale themselves based on the window size, or on the size of their
contents?
 
R

Richard Sexton

Why? There's something wrong with a narrow strip of content down the
Maybe that's what you want?
Click to expand...

Not I. Difficult to imagine why anybpody would want that. I presume
they're made by people stuck in a PC 800x600 world who have never
tried anything else.
But how are you judging "pretty much the same" ? You _cannot_ control
text or bitmap size relative to the window, so should your elements
scale themselves based on the window size, or on the size of their
contents?
Click to expand...

There's a trade off. At the end of the day if it looks the same on
a PDA as on a huge monitor, where "looks the same" does not mean identical
but close enough, that is, if if looks very similar at any resolution
wthout things banging all about or screwing up, then I'm happy.

If I can read it and it doesn't look stupid that's the goal, wide
screen or small screen.
 
K

kchayka

I have a problem w/ the CSS below. I'm trying to make the columns show
up side by side. The columns are placed correctly horizontaly, but I
can't get them on the same row.
Click to expand...

[snip code]

This looks very suspiciously like you are trying to format tabular data
without using a table. Tabular data belongs in <table> markup.
 
A

Andy Dingley

There's a trade off. At the end of the day if it looks the same on
a PDA as on a huge monitor, where "looks the same" does not mean identical
but close enough, that is, if if looks very similar at any resolution
wthout things banging all about or screwing up, then I'm happy.
Click to expand...

Two questions:

How can it "look the same" when I can easily read lines of over a
hundred characters length on my desktop, but maybe 20-some on a PDA?

Secondly, what techniques do you recommend to use ?
 
N

Neredbojias

With neither quill nor qualm, Richard Sexton quothed:
There's a trade off. At the end of the day if it looks the same on
a PDA as on a huge monitor, where "looks the same" does not mean identical
but close enough, that is, if if looks very similar at any resolution
wthout things banging all about or screwing up, then I'm happy.

If I can read it and it doesn't look stupid that's the goal, wide
screen or small screen.
Click to expand...

You make the same mistake as (some of) the w3c. It shouldn't look the
same at all. Arguably, it should be renderable on both devices, but a
good case can be made against even that.

OTOH, a primarily text-information site probably should function well in
anything and have aural and accessibility provisions under a number of
circumstances.
 
R

Richard Sexton

Two questions:

How can it "look the same" when I can easily read lines of over a
hundred characters length on my desktop, but maybe 20-some on a PDA?

Secondly, what techniques do you recommend to use ?
Click to expand...

Common sense?

I don't own a PDA but when I had one thrust in my face by somebody
showing off I looked at my sites and discivered they're more or less
readable. Shrug.
 
R

Richard Sexton

With neither quill nor qualm, Richard Sexton quothed:


You make the same mistake as (some of) the w3c. It shouldn't look the
same at all. Arguably, it should be renderable on both devices, but a
good case can be made against even that.

OTOH, a primarily text-information site probably should function well in
anything and have aural and accessibility provisions under a number of
circumstances.
Click to expand...

The purpose is to convey the information. Anything else is superfluous.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to position the *tooltip* comment on these buttons? 9
How can I get my menu inside of a menu to function properly? 1
Positioning CSS components 1
Please Help? 0
CSS: How can I stop overflow on the y-axis? 2
How can I add arrows to my FAQ 0
Help with code 0
I am trying to detect Which image id="" was clicked ? 22

Members online

Total: 32 (members: 2, guests: 30)
Robots: 483

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top