Specific 3 column div issue

Discussion in 'HTML' started by Stuart Palmer, Jun 7, 2006.

  1. Hi everyone,

    I want to create a web page using divs only (rather than tables) unless this
    really isn't possible.

    Basically my design consists of a centrally aligned content space of 760px
    wide, however, to the left will be colour X and to the right colour Y, the
    whole page needs to span the width of the browser window and the 760px
    content space should not resize (otherwise it will mess up my design).
    So the colours to the left and right are in effect background colours that
    resize to the size of the browser window at a 50/50 ratio (so they are the
    same size).

    I have found lots of examples on the www using 3 column versions with
    resizable content space, but the left and right sides are fixed widths.

    Any help (or points in the right direction would be helpful

    cheers
    stu

    --
     
    Stuart Palmer, Jun 7, 2006
    #1
    1. Advertising

  2. Stuart Palmer wrote:
    > Hi everyone,
    >
    > I want to create a web page using divs only (rather than tables) unless this
    > really isn't possible.
    >
    > Basically my design consists of a centrally aligned content space of 760px
    > wide, however, to the left will be colour X and to the right colour Y, the
    > whole page needs to span the width of the browser window and the 760px
    > content space should not resize (otherwise it will mess up my design).
    > So the colours to the left and right are in effect background colours that
    > resize to the size of the browser window at a 50/50 ratio (so they are the
    > same size).
    >
    > I have found lots of examples on the www using 3 column versions with
    > resizable content space, but the left and right sides are fixed widths.
    >
    > Any help (or points in the right direction would be helpful
    >


    URL? URL? URL? Picture worth a thousands words...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 7, 2006
    #2
    1. Advertising

  3. Stuart Palmer wrote:
    > Hi everyone,


    Hi Stu (if that is REALLY your name....)

    > I want to create a web page using divs only (rather than tables) unless this
    > really isn't possible.


    Yea, you can do it

    > Basically my design consists of... bla bla bla bla bla


    You need to provide a URL to what you currently have. This will allow
    everyone to see what you are trying to say. If this will reside behind
    a firewall and you can not provide a link, then go put the code up on
    one of the many free servers.

    Thanks for playing
     
    Travis Newbury, Jun 7, 2006
    #3
  4. Stuart Palmer wrote:

    > I want to create a web page using divs only (rather than tables)
    > unless this really isn't possible.


    It is certainly possible.

    > Basically my design consists of a centrally aligned content space of
    > 760px wide, however, to the left will be colour X and to the right
    > colour Y, the whole page needs to span the width of the browser
    > window


    Um, wait a minute. 760px is about as wide as a browser window can be on
    an 800x600 monitor. What will happen to the side columns?

    > and the 760px content space should not resize (otherwise it
    > will mess up my design).


    Unless you can show why this 760px absolutely must be exactly that wide,
    then I would have to say your design has flaws.

    > So the colours to the left and right are in effect background colours
    > that resize to the size of the browser window at a 50/50 ratio (so
    > they are the same size).


    What is in these side columns besides colours? Any worthy content?
    Menus?

    > I have found lots of examples on the www using 3 column versions with
    > resizable content space, but the left and right sides are fixed
    > widths.


    Here's a template that I like. Play with the sizes.
    http://benmeadowcroft.com/webdev/csstemplates/3-column.html

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Jun 7, 2006
    #4
  5. Basically I want to create a site that looks like

    http://www.vauxhall.co.uk/

    where the content space is 760 and the left and right is expandable but
    the content always stays central.

    Thanks,

    Stuart

    On 07/06/2006 06:53, Stuart Palmer wrote:
    > Hi everyone,
    >
    > I want to create a web page using divs only (rather than tables) unless this
    > really isn't possible.
    >
    > Basically my design consists of a centrally aligned content space of 760px
    > wide, however, to the left will be colour X and to the right colour Y, the
    > whole page needs to span the width of the browser window and the 760px
    > content space should not resize (otherwise it will mess up my design).
    > So the colours to the left and right are in effect background colours that
    > resize to the size of the browser window at a 50/50 ratio (so they are the
    > same size).
    >
    > I have found lots of examples on the www using 3 column versions with
    > resizable content space, but the left and right sides are fixed widths.
    >
    > Any help (or points in the right direction would be helpful
    >
    > cheers
    > stu
    >
     
    Stuart Palmer, Jun 7, 2006
    #5
  6. Stuart Palmer wrote:

    Don't top post, the conversation gets confusing...
    > Basically I want to create a site that looks like
    >
    > http://www.vauxhall.co.uk/
    >
    > where the content space is 760 and the left and right is expandable but
    > the content always stays central.


    Why? I run 1280x1024 so I get stuck with this little patch in the center
    of the screen and my buddy over here with his cheap laptop and barely 13
    inch screen will have to scroll!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 7, 2006
    #6
  7. Stuart Palmer wrote:

    > Basically I want to create a site that looks like
    >
    > http://www.vauxhall.co.uk/


    That is not a page you want to emulate. [1]
    <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.vauxhall.co.uk%2Fvx%2Fhome.do>

    > where the content space is 760 and the left and right is expandable
    > but the content always stays central.


    Why would you need those silly grey boxes sticking out on the sides?
    Looks amateurish at best.

    See the following:
    http://allmyfaqs.net/faq.pl?AnySizeDesign

    You still need to explain why your site needs to be exactly 760px wide.
    Also consider how funny the vauxhall site looks on a maximized browser
    window with a 1152x864 monitor.

    If you won't consider that visitors have all different sized browsing
    devices, look into setting a <div> for content, and setting its width,
    with left and right margins set to auto, using CSS.

    [1] Now I have to go and erase the cookies the vauxhall site wouldn't
    operate without allowing. Way too much JavaScript and tracking scripts
    at that site.

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Jun 7, 2006
    #7
  8. Stuart Palmer

    Ed Seedhouse Guest

    On Wed, 07 Jun 2006 05:53:51 GMT, "Stuart Palmer"
    <> wrote:

    >I want to create a web page using divs only (rather than tables) unless this
    >really isn't possible.


    What can I say? This sentence alone displays a complete
    misunderstanding of modern approaches to layout.

    Using only divs is just as bad as using only tables.

    To move from table based layouts to more modern techniques is not just a
    matter of "using divs". A div is just another html element, useful for
    grouping elements into sections, but otherwise devoid of any real
    meaning.

    You need to start fresh, and forget your old way of looking at making
    web pages, at least for awhile.

    First you should learn how to write semantic, valid html or xhtml. You
    need to understand the idea of separating layout from presentation. You
    need to understand that CSS is predicated on *valid* html or xhtml.

    Your first pass through the codemight well not contain any divs at all.
    Put headings in H elements, paragraphs in P elements, lists in UL or OL
    elements, and so on. A menue is just a list in disguise. The tags you
    use should reflect the *meaning* of the content.

    Then when you have your content marked up meaningfully you apply CSS to
    style and if necessary position it. You can add divs to separate the
    sections you want to position.

    Stay away from absolute and fixed positioning until your knowledge is
    really advanced. Browsers don't support them all that well and they
    support them differently so cross browser consistency becomes a problem.
    Learn to use and understand floats, and use them for positioning.

    No one goes to a web page for it's beauty or it's layout. They go, and
    come back again, for the content. So content should come first.
    Layout's purpose is to make the content most accessible. Beauty is good
    too, but not at the expense of useability.

    Remember the web is not paper and your users have all the power over
    presentation (they may not use it, most don't, but they have it). They
    use different screen resolutions, prefer different fonts and different
    font sizes and they have control over all of those things and you don't.

    These are all oversimplifications, of course, and when you really
    understand what you are doing you can break any "rule". But perhaps
    they are good enough to get you on the right path while you are
    learning.
     
    Ed Seedhouse, Jun 7, 2006
    #8
  9. Appriciate all your comments, however, the question wasn't 'was it right to
    do it' but 'how to do it'.

    I have a way to do it using a mixture of tables but from reading other
    websites I have the understanding that it's best to use tables only for
    tabular information, this is why I asked the question.

    Regarding why I want to have content in a 760px area, most of my visitors
    have 800x600 and 1024x768 resolution, therefore the small percentage that
    have different resolution As long as the data is there to read and the text
    is resizable then I am happy.

    The design I have chosen will not work very well on a screen at 320
    resolution and/or 1280 as my user base doesn't warrant this - this design is
    my choice, it may not be yours but that's life. Consider a page that only
    has a couple of paragraphs, this would look o.k on a 760 wide content space,
    but having this run up to 1240 would make the page, and design look silly. I
    try to achieve content that is informative to the users requirement but also
    visually pleasing.

    I also appriciate that people on newsgroups tend to know far more on topics
    than others, however, advising people and complaining to people who are
    asking for help are two different things. For example a url was asked for
    what I want to achieve and indeed I supplied a url to explain what i am
    trying to do, however, I then got slagged off becuase I did as requested
    because the site I chose to show uses cookies, I provided this to enable you
    to help me, if you are not willing to help I would appriciate if you didn't
    reply to my posts.
    If it is obvious someone doesn't understand a topic, then please exaplin and
    advise, if it's not the best way to do a task - fine, explain why and how to
    do it better, but offending people doesn't do you any favours and doesn't
    get my question answered.

    Thanks for any constructive help that can be offered to assist in resolving
    my problem. If the solution is to do a mixture of tables and divs then
    excellent, I have a solution already and I apologise for posting on here.

    Kind Regards
    Stuart
     
    Stuart Palmer, Jun 7, 2006
    #9
  10. Stuart Palmer wrote:

    > Appriciate all your comments, however, the question wasn't 'was it right to
    > do it' but 'how to do it'.


    Well, this isn't a help desk, it's a discussion group. Besides, I
    already told you how to do it:

    "look into setting a <div> for content, and setting its width,
    with left and right margins set to auto, using CSS."

    I'll write it out for you.

    #content { width: 760px; margin-left: auto; margin-right:auto; }

    <div id="content">
    <h1>This is the title.</h1>
    <p>This is the content.</p>
    </div>

    About those with wide screens, why not set a max-width if you have a
    sparse amount of content?

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Jun 7, 2006
    #10
  11. Stuart Palmer wrote:
    > Appriciate all your comments, however, the question wasn't 'was it right to
    > do it' but 'how to do it'.
    >
    > I have a way to do it using a mixture of tables but from reading other
    > websites I have the understanding that it's best to use tables only for
    > tabular information, this is why I asked the question.


    Sorry, not a help desk. If members feel the question is wrong then your
    will get info as to why.
    >
    > Regarding why I want to have content in a 760px area, most of my visitors
    > have 800x600 and 1024x768 resolution, therefore the small percentage that
    > have different resolution As long as the data is there to read and the text
    > is resizable then I am happy.


    And you collected this data how? Everyone who visits ALWAYS has the
    browser maximized? I almost never do, since modern OS allow multitasking
    and large monitors have become affordable.
    >
    > The design I have chosen will not work very well on a screen at 320
    > resolution and/or 1280 as my user base doesn't warrant this - this design is
    > my choice, it may not be yours but that's life. Consider a page that only
    > has a couple of paragraphs, this would look o.k on a 760 wide content space,
    > but having this run up to 1240 would make the page, and design look silly. I
    > try to achieve content that is informative to the users requirement but also
    > visually pleasing.


    Here is a good question for your, what if your visitor ups their
    font-size? What will happen to your 760px static design?

    > I also appriciate that people on newsgroups tend to know far more on topics
    > than others, however, advising people and complaining to people who are
    > asking for help are two different things. For example a url was asked for
    > what I want to achieve and indeed I supplied a url to explain what i am
    > trying to do, however, I then got slagged off becuase I did as requested
    > because the site I chose to show uses cookies, I provided this to enable you
    > to help me, if you are not willing to help I would appriciate if you didn't
    > reply to my posts.
    > If it is obvious someone doesn't understand a topic, then please exaplin and
    > advise, if it's not the best way to do a task - fine, explain why and how to
    > do it better, but offending people doesn't do you any favours and doesn't
    > get my question answered.
    >
    > Thanks for any constructive help that can be offered to assist in resolving
    > my problem. If the solution is to do a mixture of tables and divs then
    > excellent, I have a solution already and I apologise for posting on here.


    It is actually more constructive than you realize....


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 7, 2006
    #11
  12. Stuart Palmer

    dorayme Guest

    In article <ofFhg.6147$>,
    "Stuart Palmer" <> wrote:

    > Appriciate all your comments, however, the question wasn't 'was it right to
    > do it' but 'how to do it'.


    I don't think you do appreciate what Ed Seedhouse was saying. No
    offence intended. It takes a while to see what he meant in spite
    of him being crystal clear to those folk who understand this
    stuff.

    Stuart, you need an intro primer to the idea of semantic mark up
    and you will find stuff via a Google search. You could look at
    http://brainstormsandraves.com/articles/semantics/structure/

    All your other remarks about all the rude b*stds on this ng are
    quite correct. When I become king, they will all have much to
    answer for. (They have mistreated me badly for a long time now
    and my shrink says they are very naughty but that I must be
    strong).

    --
    dorayme
     
    dorayme, Jun 8, 2006
    #12
  13. Stuart Palmer

    Wÿrm Guest

    "dorayme" <> kirjoitti
    viestissä:...
    <snip>

    > When I become king, they will all have much to
    > answer for.


    Lemme guess, some funny martian extra gender that would allow such thing to
    happen? ;)

    <snip>
     
    Wÿrm, Jun 8, 2006
    #13
    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. Kate
    Replies:
    4
    Views:
    639
  2. Kate
    Replies:
    1
    Views:
    454
    Oli Filth
    Feb 19, 2005
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    751
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    191
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    315
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page