[OT] <div> <span>

Discussion in 'ASP General' started by Rob Meade, Jul 25, 2006.

  1. Rob Meade

    Rob Meade Guest

    Hi all,

    Apologies for the OT-ness of the post, I've only got access to Microsoft
    groups via Outlook at work and SiteServer.Css looks like its dead....

    I'm trying to get two columns within a <div> tag - I seem to be having no
    end of problems doing so - this all comes from dropping (finally) the table
    approach for displaying non-tabular data...

    I've managed to use <div>'s for the header section and footer section, but
    as soon as I try to get two columns between these they seem to wrap...

    I've not found a lot of help on Google, wondered if anyone here might have
    done something similar for their own site...

    <div style="width:100%">
    <div style="width:50%">column 1</div>
    <div style="width:50%">column 2</div>
    </div>

    The above is an example of what I'm trying to achieve, I read somewhere
    about the <div> tags breaking <p> tags, ie, creating a new paragraph/line -
    so I've amended the inner tags to <span>'s but still no joy..just doesn't
    seem to work...

    If anyone has a "tiny" example of the above I'd be very grateful - for what
    its worth, but column 1 and column 2 are being generated dynamically and
    contain additional <div>'s..

    Thanks for any help and again my apologies for the OT-ness (cant access
    Google groups from work either)..

    Rob
    Rob Meade, Jul 25, 2006
    #1
    1. Advertising

  2. Rob Meade

    CJM Guest

    "Rob Meade" <> wrote in message
    news:...
    >
    > I've managed to use <div>'s for the header section and footer section, but
    > as soon as I try to get two columns between these they seem to wrap...
    >
    > I've not found a lot of help on Google, wondered if anyone here might have
    > done something similar for their own site...
    >
    > <div style="width:100%">
    > <div style="width:50%">column 1</div>
    > <div style="width:50%">column 2</div>
    > </div>
    >
    > The above is an example of what I'm trying to achieve, I read somewhere
    > about the <div> tags breaking <p> tags, ie, creating a new
    > paragraph/line - so I've amended the inner tags to <span>'s but still no
    > joy..just doesn't seem to work...
    >


    Do you have a URL that demonstrates the problem? What exactly are the
    symptoms?
    CJM, Jul 25, 2006
    #2
    1. Advertising

  3. Rob Meade

    Mike Brind Guest

    Re: <div> <span>

    Rob Meade wrote:
    > Hi all,
    >
    > Apologies for the OT-ness of the post, I've only got access to Microsoft
    > groups via Outlook at work and SiteServer.Css looks like its dead....
    >
    > I'm trying to get two columns within a <div> tag - I seem to be having no
    > end of problems doing so - this all comes from dropping (finally) the table
    > approach for displaying non-tabular data...
    >
    > I've managed to use <div>'s for the header section and footer section, but
    > as soon as I try to get two columns between these they seem to wrap...
    >
    > I've not found a lot of help on Google, wondered if anyone here might have
    > done something similar for their own site...
    >
    > <div style="width:100%">
    > <div style="width:50%">column 1</div>
    > <div style="width:50%">column 2</div>
    > </div>
    >
    > The above is an example of what I'm trying to achieve, I read somewhere
    > about the <div> tags breaking <p> tags, ie, creating a new paragraph/line -
    > so I've amended the inner tags to <span>'s but still no joy..just doesn't
    > seem to work...
    >
    > If anyone has a "tiny" example of the above I'd be very grateful - for what
    > its worth, but column 1 and column 2 are being generated dynamically and
    > contain additional <div>'s..
    >
    > Thanks for any help and again my apologies for the OT-ness (cant access
    > Google groups from work either)..
    >


    <div style="width:100%">
    <div style="width:50%;float:left;"><p>column 1</p></div>
    <div style="width:50%;float:left;"><p>column 2</p></div>
    </div>

    I wondered why our mail server was so slow yesterday, and then found
    out that someone was using the intranet in peak hours to send 13,000
    html emails (which eventually took 9 hrs to clear). Each email
    contained 28 kB of html, put together by our dezyner using tables and
    spacer gifs. I rewrote the html for this newsletter thingy, using CSS
    and divs. Identical result - 12 kB. I just saved 60% or our bandwidth
    costs for future mailings. Stick with this approach. It's worth it.

    Start here: http://www.glish.com/css/ then here:
    http://www.google.co.uk/search?hl=en&safe=off&q=css layout&btnG=Search&meta=

    --
    Mike Brind

    PS. I rewrote the html AFTER amending the mailing script to check the
    quantity of email addresses in a campaign and the time of day. Before
    4.30pm for large campaigns, it now tells the user to get lost.
    Mike Brind, Jul 25, 2006
    #3
  4. Rob Meade

    Rob Meade Guest

    "CJM" wrote ...

    > Do you have a URL that demonstrates the problem? What exactly are the
    > symptoms?


    Alas nope as its on our intranet..however...

    I found a couple of articles on line, and similar to the example posted up
    by Mike Brind, I had something together, the problem is that I cant make it
    pixel perfect, ie, if I have a container with a width of 500px, and a left
    column of 155px, I cant make the second column 345px or else they over
    lap...and the border disappears...its a minor thing but I'm confronted with
    the problem of not only make a page that validates, is accessible, looks
    good, uses less bandwidth, but has to also be easy for the rest of my team
    to incorporate and use or else I'm just wasting my time - they all
    understand tables, so teach old dogs new tricks could be tricky...

    What I have got is the code though....so here you go.....I should add that
    the majority of this is all from the example I found online, I've just
    amended the .css files and added a couple of extra divs for spacing to make
    it look more like our template...


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Template</title>
    <link rel="stylesheet" type="text/css" href="2c-hd-ft-fixed-layout.css" />
    <link rel="stylesheet" type="text/css"
    href="2c-hd-ft-fixed-presentation.css" />
    </head>
    <body>
    <div id="outer">
    <div id="hdr"></div>
    <div id="bar"><img src="Images/Misc/Shim.gif"
    style="width:1px;height:15px;border-width:0px;" alt="" title="" /></div>
    <div style="height:2px"><img src="Images/Misc/Shim.gif"
    style="width:1px;height:1px;border-width:0px;" alt="" title="" /></div>
    <div id="bodyblock" align="right">
    <div id="l-col" align="center">
    <h4 align="center">Menu</h4>
    <a href="#">Link</a><br />
    <br />
    <a href="http://www.ssi-developer.net/main/templates/">View more
    templates.</a>
    </div>
    <div id="cont">
    <h3 align="center">Two Column Fixed Width with Header &amp;Footer</h3>
    <div align="center" style="color: red;">Ver 2.3</div>
    <p>This template is actually a replica of one of my other
    websites which uses tables for the very same layout. I wanted to
    see could it be done and it seems to work perfect.</p>
    <p>This is basically set up as follows: there is a main outer div
    which centers the page and is a fixed width. There are 4 main
    div's within this outer div; header (#hdr), bar (#bar), body
    (#body) and footer (#ftr). The body div holds 2 more divs, the
    left div which is for navigation and the right div which is for
    our content.</p><p>This template is actually a replica of one of my other
    websites which uses tables for the very same layout. I wanted to
    see could it be done and it seems to work perfect.</p>
    <p>This is basically set up as follows: there is a main outer div
    which centers the page and is a fixed width. There are 4 main
    div's within this outer div; header (#hdr), bar (#bar), body
    (#body) and footer (#ftr). The body div holds 2 more divs, the
    left div which is for navigation and the right div which is for
    our content.</p>
    </div>
    </div>
    <div style="height:2px"><img src="Images/Misc/Shim.gif"
    style="width:1px;height:1px;border-width:0px;" alt="" title="" /></div>
    <div id="ftr"><img src="Images/Misc/Shim.gif"
    style="width:1px;height:15px;border-width:0px;" alt="" title="" /></div>
    </div>

    </body>
    </html>

    And the .css's...

    2c-hd-ft-fixed-layout.css
    /* Layout Stylesheet */

    body {
    margin:20px;
    background:#ffffff;
    color: #333333;
    text-align:center;
    padding:0;
    }

    #outer {
    text-align:left;
    width:650px;
    margin:auto;
    border-width: 0px;
    border-style: collapse;
    }

    #hdr {
    height:60px;
    background:#ffffff;
    color: #333333;
    }

    #bar {
    height:15px;
    background:#6699cc;
    color: #333333;
    }

    #bodyblock {
    position:relative;
    background: #f1f1f1;
    color: #000000;
    width:650px;
    padding:0;
    }

    #l-col {
    float:left;
    background:#f1f1f1;
    color: #000000;
    width:150px; /* needs to be 1px narrower than remaining space to allow for
    border-width of #cont*/
    }

    #cont {
    width:495px;
    background:#ffffff;
    color: #333333;
    border:solid #999999;
    border-width:0 0 0 1px;
    text-align:justify;
    }

    #ftr {
    height:15px;
    background:#6699cc;
    color: #333333;
    margin:0;
    }


    2c-hd-ft-fixed-presentation.css


    /* Presentation Stylesheet */

    h3, p {
    margin:0;
    padding:15px;
    }

    h4 {
    margin:0;
    padding: 5px 0;
    }

    p:first-letter {
    font-size: 80%;
    font-weight: bold;
    color:blue;
    }
    Rob Meade, Jul 26, 2006
    #4
  5. Rob Meade

    Mike Brind Guest

    Re: <div> <span>

    Rob Meade wrote:
    > "CJM" wrote ...
    >
    > > Do you have a URL that demonstrates the problem? What exactly are the
    > > symptoms?

    >
    > Alas nope as its on our intranet..however...
    >
    > I found a couple of articles on line, and similar to the example posted up
    > by Mike Brind, I had something together, the problem is that I cant make it
    > pixel perfect, ie, if I have a container with a width of 500px, and a left
    > column of 155px, I cant make the second column 345px or else they over
    > lap...and the border disappears...


    Set all margins, paddings and borders to 0 to start, then as you add
    10px padding here, compensate by removing 10px width from your div
    there...

    It can get a bit frustrating to see overlapping divs, or the right hand
    one popping under the left hand one, but eventually you get the hang of
    it. Trial and Error. Get your hands dirty. Just like ASP/ADO/SQL.
    Oh, and check your results in both Firefox *and* IE. They implement
    the CSS box model differently.

    --
    Mike Brind
    Mike Brind, Jul 26, 2006
    #5
  6. Re: <div> <span>

    Mike Brind wrote:
    > Oh, and check your results in both Firefox *and* IE.
    > They implement the CSS box model differently.


    And IE7 implements it differently from IE6, at least under strict DOCTYPEs.



    --
    Dave Anderson

    Unsolicited commercial email will be read at a cost of $500 per message. Use
    of this email address implies consent to these terms.
    Dave Anderson, Jul 26, 2006
    #6
  7. Rob Meade

    Rob Meade Guest

    Re: <div> <span>

    "Mike Brind" wrote...

    > Set all margins, paddings and borders to 0 to start, then as you add
    > 10px padding here, compensate by removing 10px width from your div
    > there...


    Thanks for the advice, the problem with the example I've posted the code up
    for is that, unless I make the items in the container use it seems at least
    5px less, it just doesn't work, either I get no border at the top on the
    left (roughly the first paragraph of text), or, none at the bottom, to get
    both I seem to have to make the contained items considerably less than the
    container width?

    > It can get a bit frustrating to see overlapping divs,


    init!

    > or the right hand
    > one popping under the left hand one, but eventually you get the hang of
    > it. Trial and Error. Get your hands dirty. Just like ASP/ADO/SQL.


    yeah...I guess, just was hoping for quicker results....

    > Oh, and check your results in both Firefox *and* IE. They implement
    > the CSS box model differently.


    deffo - I work for the NHS, which is where these templates will be used, our
    Trust (organisation) has the luxury of being Microsoft only, so I know that
    people will only be using Internet Explorer, and version 5+, HOWEVER - we
    also make community wide applications using similar templates which are then
    used by GP practices and other Trusts, whilst the NHS as a whole does have
    an agreement with Microsoft thus we get lots of goodies for free, there are
    still some users out there - I'm sure you know the ones - that like to
    fiddle - as such we've had reports from users that our applications do not
    work correctly in FireFox (especially the .Net ones) - I am trying to
    appease all here by developing the templates to work correctly with FireFox,
    and then AFTERWARDS checking them in IE, as opposed to the other way round
    which was always the mindset in the past. I figure if I get it right for
    FireFox my code should be "correct" (I'm validating via W3C etc) - but at
    the end of the day, the bulk of the users are all IE users so if there are
    any things I just cant work out I'll obviously have to favour them....this
    has been a good exercise though because not only have I started creating
    Server Controls in .Net (something new for me) - I've started using the DIV
    tags (something new for me) - and have seen the size of my pages reduce
    quite a bit (by 2 thirds on one of the pages!)...

    It's just a shame that now, after the W3C has been around so long that all
    of the browsers haven't adapted the same consistant use of the standards, it
    would make things so much easier for us as developers, and thus have a big
    advantage to users, as it wouldn't matter which browser they used they could
    be assured of the same results, browsers would then compete on features..

    Regards

    Rob
    Rob Meade, Jul 26, 2006
    #7
  8. Rob Meade

    Rob Meade Guest

    Re: <div> <span>

    "Dave Anderson" wrote ...

    > And IE7 implements it differently from IE6, at least under strict
    > DOCTYPEs.


    We've already had reports that some of our ASP apps dont work in IE7 -
    joy...not sure why, probably because of the popup whoring techniques we've
    used in the past, my understanding of IE7 (limited as it is) is that it now
    has tabs, much like FireFox? If so, I would imagine our popups are appearing
    as new tabs...again, playing our "not supported" card at the moment, but
    something else we're going to have to consider...

    Perhaps its time to get out of this business! :eek:)

    Rob
    Rob Meade, Jul 26, 2006
    #8
  9. Rob Meade

    Rob Meade Guest

    Re: <div> <span>

    "Dave Anderson" wrote ...

    > LOL.


    :eek:)

    > If ever there were a time to get out of this business, it was when
    > browsers were moving AWAY FROM each other, rather than TOWARD (NN4/IE4 was
    > probably the most divergent point). The current trend is toward standards,
    > and that can only make our jobs easier in the long run.


    hehe, true - just be nice if we could sit them all down in a room, bash some
    heads together and get them all to develop new version over night that did
    everything the same - that way, on Monday I could have something consistant
    to use! :eek:)

    Rob
    Rob Meade, Jul 28, 2006
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    546
    dorayme
    Jun 26, 2009
  2. Stéphane Klein
    Replies:
    2
    Views:
    1,757
    John Nagle
    Mar 30, 2010
  3. Stefan Behnel
    Replies:
    0
    Views:
    486
    Stefan Behnel
    Mar 29, 2010
  4. Dan Bishop

    DataGrid (body only) contained in <span>...</span> tags

    Dan Bishop, Jun 7, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    277
    Kilic Beg
    Jun 7, 2004
  5. Wang, Jay
    Replies:
    5
    Views:
    471
    Wang, Jay
    May 25, 2004
Loading...

Share This Page