14 replies [Last post]
DanMcCoy
DanMcCoy's picture
Offline
Regular
UK
Last seen: 14 years 36 weeks ago
UK
Joined: 2007-02-14
Posts: 25
Points: 0

Hello everybody

I'm having a little difficulty in mimmicking an old table layout in our site with a new css-only one.
The problem I am having is in getting two paragraphs to sit next to each other, and appear at the same (combined) width as the single paragraphs above and below.
I probably haven't explained that very well, but the below example should hopefully illustrate the problem.


Test page

div.JobVacancyBrief { float: left; clear: left; width: 98%; margin: 15px 0px 10px 0px; padding: 0px; background-color: red; }
div.JobVacancyBrief h6 { float: left; clear: left; width: 100%; background-color: #ffcb7e; margin: 0px; padding: 8px 5px 8px 5px; border: solid 1px #696969; }
div.JobVacancyBrief p { float: left; clear: left; width: 100%; background-color: #fff4e4; margin: 0px; padding: 5px 5px 5px 5px; border: solid 1px #696969; border-top: none;}
div.JobVacancyBrief p.JV_SUMMARY_TEXT {float: left; clear: left; width: 100%; }
div.JobVacancyBrief p.JV_PART_OR_FULL {float: left; clear: left; width: 50%; }
div.JobVacancyBrief p.JV_PERM_TEMP {float: left; clear: left; width: 50%; clear:none;}
div.JobVacancyBrief p.JV_SALARY {float: left; clear: left; width: 100%; }
div.JobVacancyBrief p.JV_CLOSING_DATE {float: left; clear: left; width: 100%; }



Tea Monkey

This is the summary. Text text and more text.

Full/Part Time: Full time


Permanent/Temporary: Temporary


Salary: 123456


Closing Date: 30-Mar-2007 00:00



Window Cleaner

This is the summary. Text text and more text.


Full/Part Time: Part time


Permanent/Temporary: Permanent


Salary: 

Closing Date: 01-Jan-1753 00:00





Big Boss

This is the summary. Text text and more text.


Full/Part Time: Part time

Permanent/Temporary: Permanent


Salary: 


Closing Date: 24-Mar-2007 00:00



The problem is caused because the second paragraph (the "Permanent/Temporary" one) is wrapping around. The only way I can see so far of stopping this is to reduce the width i.e. set both to 49%. They then no longer wrap, but the right hand edge doesn't line up with the paragraphs above and below.

If they are both set to 50%, why would the total appear to be greater than 100%?

Also, I have set the background of the main div to red just so I can see it. In IE, the right edge of the paragraphs line up with the edge of the containing div. In FireFox and Opera, they extend outside the area of the containing div. Why is that?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

That's some serious

That's some serious classitis going on there, and your doctype is incomplete.

Can you show us a mockup of how you want it to look, so we can better adivse?

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You seem to have percentage

You seem to have percentage widths declared along with padding and or margins this is going to cause you problems be careful declaring widths and these properties; FF will overflow the extra width, IE will expand the parent element to accommodate; both probably not the results that you wish for.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DanMcCoy
DanMcCoy's picture
Offline
Regular
UK
Last seen: 14 years 36 weeks ago
UK
Joined: 2007-02-14
Posts: 25
Points: 0

Well I guess it could be

Well I guess it could be seen as "classitis", but if I need to change each "cell" individually at a later date (which is likely), how else am I to reference tags that I want?

Here is a table version (done very quickly, so no color)


Test page




Tea Monkey


This is the summary. Text text and more text.


Full/Part Time: Full time
Permanent/Temporary: Temporary


Salary: 123456


Closing Date: 30-Mar-2007 00:00



As you can see, all cells are set to span 2 colums, except on the third row.

DanMcCoy
DanMcCoy's picture
Offline
Regular
UK
Last seen: 14 years 36 weeks ago
UK
Joined: 2007-02-14
Posts: 25
Points: 0

Hugo wrote:You seem to have

Hugo wrote:
You seem to have percentage widths declared along with padding and or margins this is going to cause you problems be careful declaring widths and these properties; FF will overflow the extra width, IE will expand the parent element to accommodate; both probably not the results that you wish for.

So if mixing percentage widths with padding or margins is not a good idea, what's the best way achieve a padding effect (a gap between the text and border)?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Owch. Why use <p>s? Have

Owch. Why use <p>s?

Have you tried a simple definition list?

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

DanMcCoy wrote:Hugo

DanMcCoy wrote:
Hugo wrote:
You seem to have percentage widths declared along with padding and or margins this is going to cause you problems be careful declaring widths and these properties; FF will overflow the extra width, IE will expand the parent element to accommodate; both probably not the results that you wish for.

So if mixing percentage widths with padding or margins is not a good idea, what's the best way achieve a padding effect (a gap between the text and border)?


pad the text?

I haven't looked closely at your markup other than to note that you seem to have a lot of widths along with padding/margins which in itself sounds alarm bells.

Apply widths/heights sparingly and only when definitely required block level elements take up 100% without having to declare a width.

If needing to create space try and split need for widths and padding between parent and child elements.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DanMcCoy
DanMcCoy's picture
Offline
Regular
UK
Last seen: 14 years 36 weeks ago
UK
Joined: 2007-02-14
Posts: 25
Points: 0

thepineapplehead wrote:Owch.

thepineapplehead wrote:
Owch. Why use <p>s?

Have you tried a simple definition list?

I don't know really, just seemed like the simplest tag to use at the time. It's just text.

DanMcCoy
DanMcCoy's picture
Offline
Regular
UK
Last seen: 14 years 36 weeks ago
UK
Joined: 2007-02-14
Posts: 25
Points: 0

Hugo wrote:

Hugo wrote:

pad the text?

I thought I was padding the text?
The text is contained in a P tag which had padding applied to it. There were no other tags to which padding could be applied. The only thing to do would be to add more tags. However, this is exactly what I was trying to avoid, because whenever I begin to wrap elements in yet more tags (for the purpose of applying such formatting) people tell me I'm suffering from divitis.

The reason I needed so many widths is because all the elements are floated left, and therefore don't fill the width unless I set it.

The reason I floated them left is because I couldn't get the 2nd and 3rd paragraphs to sit next to each other horizontally without floating them left.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Well yes it may be text, but

Well yes it may be text, but that doesn't mean you should mark it up as a paragraph. A title is "just text" but you'd use a heading tag for it Tongue

My point is, to you it's a list of simple text, to me it's a list of related terms, almost like a question and answer page. A DL (recently we've gone a bit mad on them) seems to have the most semantic weight.

Verschwindende wrote:
  • CSS doesn't make pies

DanMcCoy
DanMcCoy's picture
Offline
Regular
UK
Last seen: 14 years 36 weeks ago
UK
Joined: 2007-02-14
Posts: 25
Points: 0

thepineapplehead wrote:Well

thepineapplehead wrote:
Well yes it may be text, but that doesn't mean you should mark it up as a paragraph. A title is "just text" but you'd use a heading tag for it Tongue

My point is, to you it's a list of simple text, to me it's a list of related terms, almost like a question and answer page. A DL (recently we've gone a bit mad on them) seems to have the most semantic weight.

Yeah, I guess so.
I doubt changing those tags is going to solve this problem though (no, I haven't yet tried it at the time of writing this).
What bothers me more at this point is the layout and the apparant "50% + 50% =101%" problem.

DanMcCoy
DanMcCoy's picture
Offline
Regular
UK
Last seen: 14 years 36 weeks ago
UK
Joined: 2007-02-14
Posts: 25
Points: 0

DanMcCoy wrote: Yeah, I

DanMcCoy wrote:

Yeah, I guess so.

Actually, I've changed my mind. I disagree.
I don't think they are a list of related terms.

I'm not sure if P is the best choice, but I don't think a DL is suitable here.

The 2nd paragraph, which is a summary of the job being advertised will often hold quite a large amount of text (to be fair, I probably should have indicated this by using more text in the example, for which my hands are in the air Smile).
And they don't all contain the "term" part of the "term/definition" pair.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

DanMcCoy wrote:And they

DanMcCoy wrote:
And they don't all contain the "term" part of the "term/definition" pair.

They don't have to. Even though the examples on the W3C site and the name of the element suggest that the first item be a term and what follows a definition, its actual use has been expanded to encompass different types of 'pairings' of information, where the two bits of info are related, and yours are definitely related.
In fact, if not a definition list, your information could almost be a candidate for a table (just endured a long, drawn discussion on this issue on the WSG mailing list). The problem with your table as you have it at the moment is that you've got both pieces of info in the one table cell when they should be split into two.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

If I understand what you

If I understand what you want correctly, This should serve as a decent template.

IE doesn't have a proper float model, but while it doesn't look like a good browser, it doesn't break the layout. If the right hand data will never go to multiple lines, you can eliminate the % padding-left on dd, bringing IE back into line. I put it in to cover all bases.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
  <head>
    <title></title>
    <meta name="generator"
          content=
          "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
    <meta http-equiv="content-type"
          content="text/html; charset=utf-8" />
    <meta name="editor"
          content="Emacs 21" />
    <meta name="author"
          content="Gary Turner" />
<style type="text/css">
  /*<![CDATA[*/
  html, body {
    margin: 0;
    padding: 0;
    }

  body {
    font: 100% verdana, vera, helvetica, sans-serif;
    line-height: 1.25;
    color: black;
    background-color: white;
    }

  p {
    font-size: 1em;
    margin-bottom: 0;
    }
   
  p + p {
    margin-top: 0;
    text-indent: 1.25em;
    }   
   
  h1, h2, h3 {
    font-family: georgia, serif;
    }

  dl {
    margin: 0;
    text-transform: capitalize;
    }

  dt {
    clear: left;
    float: left;
    padding: 5px 10px;
    width: 40%;
    }

  dd {
    border-bottom: 1px solid black;
    margin: 0;
    padding: 5px 10px;
    padding-left: 45%;
    }


  .job {
    border: 1px solid black;
    border-bottom: none;
    margin: 1.25em auto 0;
    width: 75%;
    }

  .job h3 {
    background-color: #ffc87e;
    border-bottom: 1px solid black;
    color: black;
    font-size: .9em;
    font-family: verdana, vera, helvetica, sans-serif;
    line-height: 1.3889;
    margin: 0;
    padding: 5px 10px;
    }

  .job p {
    border-bottom: 1px solid black;
    margin: 0;
    padding: 5px 10px;
    }

/*]]>*/
</style>

  </head>
  <body>
    <div class="job">
      <h3>
        Tea Monkey
      </h3>
      <p class="summary">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Proin nunc. In dignissim lorem non ante. Suspendisse sed
        leo at dui elementum vulputate. Ut fringilla. Quisque.
      </p>

      <dl>
        <dt>
          Full/Part Time:
        </dt>
        <dd>
          full time
        </dd>
        <dt>
          permanent/temporary:
        </dt>
        <dd>
          temporary<br />
          or not. Will make permanent if willing to show up for
          work for such crappy wages
        </dd>
        <dt>
          salary
        </dt>
        <dd>
          $7.50/hr.
        </dd>
        <dt>
          closing date:
        </dt>
        <dd>
          30 March, 2007
        </dd>
      </dl>
    </div>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Darkwind
Offline
newbie
Last seen: 14 years 37 weeks ago
Joined: 2007-03-18
Posts: 1
Points: 0

DanMcCoy wrote:Hugo

DanMcCoy wrote:
Hugo wrote:

pad the text?

I thought I was padding the text?
The text is contained in a P tag which had padding applied to it. There were no other tags to which padding could be applied. The only thing to do would be to add more tags. However, this is exactly what I was trying to avoid, because whenever I begin to wrap elements in yet more tags (for the purpose of applying such formatting) people tell me I'm suffering from divitis.

The reason I needed so many widths is because all the elements are floated left, and therefore don't fill the width unless I set it.

The reason I floated them left is because I couldn't get the 2nd and 3rd paragraphs to sit next to each other horizontally without floating them left.

?? So you'd rather have that lesser disease of classitis? Sorry, but that just struck Me as funny.

My first thought on this was that when you were adding up the paragraphs, you were giving them a width of 50% without taking into account the padding/margins. Set all padding and margins to zero first, then see if it works.