By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,964 Members | 1,290 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,964 IT Pros & Developers. It's quick & easy.

Long line breaks my width

P: n/a
It seems I cannot understand CSS, well.

I have donw the following page: http://www.pennias.gr/home.php

It's in greek but the context is of no importance.

I used a big table to put in my page beacuse I couldn't find another way
to make horizontal div that will be with margin-[top,right] =0 and look
well both in IE and FF.

Anyway the main staff is in a div #main. If you see the above page it
breaks up if I put a long line. Can somebody explain me why? And why
doesn't the div I use as border don't extend at the 100% of my height?

Am I the only one who thinks that with using the old-fashioned
table-inside-a-table I work a lot faster and be lmost 100% combatible
with ll browsers?

thanks a lot.

PS: any suggestion of a good CSS book would be great.
Oct 8 '06 #1
Share this Question
Share on Google+
8 Replies


P: n/a
Scripsit Harris Kosmidis:
I have donw the following page: http://www.pennias.gr/home.php

It's in greek but the context is of no importance.
I didn't know "A long line" was Greek. When designing layout, you should
normally use _real_, typical texts instead of dummy lorem ipsum. For
example, Greek text may behave rather different from lorem ipsum e.g. in
line height requirements and general legibility.
I used a big table to put in my page beacuse I couldn't find another
way to make horizontal div that will be with margin-[top,right] =0
and look well both in IE and FF.
I'm not sure of what you are asking here, but the answer can probably be
found via the FAQs.
Anyway the main staff is in a div #main. If you see the above page it
breaks up if I put a long line.
Long line? You mean a long string of words? Well, the page is probably
broken by design. You have _designed_ the cell or the div element or
whatever so that it does not adapt to the requirements of its content.
Instead, you e.g. set the dimensions in fixed units. Then you can just relax
and watch the consequences - the mess.
Can somebody explain me why? And why
doesn't the div I use as border don't extend at the 100% of my height?
I don't see why you want it to extend that way, and I'm not going to analyze
the messy code that needs a rewrite, not an analysis.
Am I the only one who thinks that with using the old-fashioned
table-inside-a-table I work a lot faster and be lmost 100% combatible
with ll browsers?
Are you are trolling? Table layout, done wrong, is what gave you the mess.

Old-fashioned _simple_ layout table, non-nested, with just a few cells might
be the lazy man's route to dividing the entire canvas into nicely colored
areas. But you should then set the dimensions in flexible units (em or
perhaps %) or leave them unspecified, letting browsers decide them from the
content, and use simple structural markup inside the cells.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Oct 8 '06 #2

P: n/a
On 2006-10-08, Harris Kosmidis <hk******@softnet.removeit.tuc.grwrote:
It seems I cannot understand CSS, well.

I have donw the following page: http://www.pennias.gr/home.php

It's in greek but the context is of no importance.

I used a big table to put in my page beacuse I couldn't find another way
to make horizontal div that will be with margin-[top,right] =0 and look
well both in IE and FF.

Anyway the main staff is in a div #main. If you see the above page it
breaks up if I put a long line.
It would help if you described more precisely the exact problem-- what
"breaks up"? Do you mean the line breaks (in the sense that the text
flows over more than one line)? Or do you mean the whole layout "breaks
up" in the sense of "goes wrong"?

It would maybe be obvious if we could see what it looks like with a
short line, but your example isn't straightforward to download and edit.
All I see is a page that looks mostly OK apart from some dodgy orange
borders. You must be more specific!
Can somebody explain me why? And why doesn't the div I use as border
don't extend at the 100% of my height?
Which border divs? You use borderleft and borderright divs three or four
times. All the ones I can see _are_ 100% of the heights of their
containing blocks.

If you make some simpler examples that illustrate very clearly what the
problems are then perhaps I will be able to help.
Oct 8 '06 #3

P: n/a
Ben C wrote:
It would help if you described more precisely the exact problem-- what
"breaks up"? Do you mean the line breaks (in the sense that the text
flows over more than one line)? Or do you mean the whole layout "breaks
up" in the sense of "goes wrong"?

It would maybe be obvious if we could see what it looks like with a
short line, but your example isn't straightforward to download and edit.
All I see is a page that looks mostly OK apart from some dodgy orange
borders. You must be more specific!
What I mean is that the line should wrap according to the div which is
inside. But the line rather extends to the whole page.
Oct 9 '06 #4

P: n/a
On 2006-10-09, G0ng <hk******@softnet.tuc.grwrote:
Ben C wrote:
>It would help if you described more precisely the exact problem-- what
"breaks up"? Do you mean the line breaks (in the sense that the text
flows over more than one line)? Or do you mean the whole layout "breaks
up" in the sense of "goes wrong"?

It would maybe be obvious if we could see what it looks like with a
short line, but your example isn't straightforward to download and edit.
All I see is a page that looks mostly OK apart from some dodgy orange
borders. You must be more specific!

What I mean is that the line should wrap according to the div which is
inside. But the line rather extends to the whole page.
div#main is a float inside div#container set to width: 98%.
div#container is inside an auto width <tdin an auto width <table>.

So, roughly speaking, what the browser does is as follows:

1. Decides how wide to make the table, by looking at its contents.
2. Decides how wide to make the <td>. Since there's only one <tdin
that row, it basically gets the full width of the table.
3. Decides how wide to make div#main. This should be 98% of the width of
the <td>, which was established in step 2.

If there's not much content in #main, the widest thing in the table is
the images in the first row. So the browser picks the minimum of that
first row's width (the three images together) and the viewport width to
use as the table width. Since the viewport is usually wider, you end up
with the table the same width as the three images. This is more or less
what you intended and the layout looks OK.

(Try shrinking your browser window though-- the three tiles of your image
in the first row break onto separate lines.)

On the other hand, if there is a lot of content in #main, the widest
thing in the table becomes the "preferred width" (width without breaking
lines-- since at this point "98%" makes no sense) of div#main. The
browser, just as before, takes the minimum of that width and the
viewport width, which this time turns out to be the viewport width.

So then, as before, the table width establishes a width for the <td>,
and div#main gets 98% of that width-- which amounts to about 98% of the
viewport. So that's the width the long line wraps to. Not what you
wanted.

You can maybe fix this by setting more widths on things (the <td>, or
the <tablepossibly, but I don't know exactly what you want).

I think you'd probably be better off making the left and right border
areas and #main three separate <td>s, and putting each tile of the top
row in a separate <td>. The table formatting model may be a better fit
for what you're trying to do.

Or, get rid of the table altogether, and make the left and right border
areas absolutely positioned from the left and right of the page, and
have the content flowing down the middle.

Depends how committed you are to some exact appearance.

I don't know any good CSS tutorials, but you could look at some of the
stylesheets on http://www.csszengarden.com/, they mostly do quite simple
things and a lot of them look very good. They also generally reflow well
if you resize the viewport.
Oct 9 '06 #5

P: n/a
hi. ill try to answer you without the disgusting arrogance that everyone
else in this group has. ill even understand what youre asking (everyone else
also understands exactly what youre asking, but they play this pathetic game
where they try to make you feel stupid until you explain it the way they
want you to)

yes, a long line will break your layout. this is by design actually. what
you can do is set overflow:hidden and whatever doesnt fit in your container
will be cut off. this only works if you have a height or width also
specified because without them, the default behavior is that your conatiner
will stretch to make room for the long line.

there are other tricks that you could do, but they dont work well in all
browsers.

as long as you have a space between words the text will wrap. so if youre
creating the site just make sure your text fits. if you will be dynamically
displaying text from a database or something like that, your best bet is to
validate that the text isnt too long to begin with.

and to answer your last question, yes... its much easier and much more
reliable to use a table in my opinion. plus it will display properly across
browsers and you will be done in half the time

"Harris Kosmidis" <hk******@softnet.removeit.tuc.grwrote in message
news:eg**********@volcano1.grnet.gr...
It seems I cannot understand CSS, well.

I have donw the following page: http://www.pennias.gr/home.php

It's in greek but the context is of no importance.

I used a big table to put in my page beacuse I couldn't find another way
to make horizontal div that will be with margin-[top,right] =0 and look
well both in IE and FF.

Anyway the main staff is in a div #main. If you see the above page it
breaks up if I put a long line. Can somebody explain me why? And why
doesn't the div I use as border don't extend at the 100% of my height?

Am I the only one who thinks that with using the old-fashioned
table-inside-a-table I work a lot faster and be lmost 100% combatible
with ll browsers?

thanks a lot.

PS: any suggestion of a good CSS book would be great.

Oct 9 '06 #6

P: n/a
Scripsit Santos L Halper:
hi. ill try to answer you without the disgusting arrogance that
everyone else in this group has.
You misspelled "without clue". Thank you for the usual bogosity indicators,
like lack of proper spelling (capitalization), upside-down fullquoting, and
unjust accusations.

It's now apparent that the value of you contribution is negative, so nobody
needs to waste time in actually reading what you are babbling.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Oct 9 '06 #7

P: n/a
Jukka K. Korpela wrote:
Scripsit Santos L Halper:
>hi. ill try to answer you without the disgusting arrogance that
everyone else in this group has.

You misspelled "without clue". Thank you for the usual bogosity
indicators, like lack of proper spelling (capitalization), upside-down
fullquoting, and unjust accusations.

It's now apparent that the value of you contribution is negative, so
nobody needs to waste time in actually reading what you are babbling.
I do.

It was a bit arrogance.
But Ben C gave me later a good answer.

My point is that why not to use a mixed layout with tables and divs to
do what you want. I ;ve read some pages from the disadvantages of
table-layouts but I'm not quite convinces. Especially when practically
every non-table-layout site I 'm trying to make gives me a big headache
to complete it.

Or I don't know good CSS that's why I'm asking for a book.

thanks anyway
Oct 10 '06 #8

P: n/a

G0ng wrote:
Or I don't know good CSS that's why I'm asking for a book.
Lie & Bos' "Cascading Style Sheets" is good and very readable as a
tutorial. Makes a handy reference afterwards as well.

"Head First HTML & CSS", from O' Reilly is a pretty good tutorial too,
but no good as a reference afterwards. It's my current recommendation
for good HTML from scratch and it will take you as far as XHTML and a
reasonable level of CSS use.

Oct 10 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.