Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Specific 3 column div issue

Reply
Thread Tools

Specific 3 column div issue

 
 
Stuart Palmer
Guest
Posts: n/a
 
      06-07-2006
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

--



 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-07-2006
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
 
Reply With Quote
 
 
 
 
Travis Newbury
Guest
Posts: n/a
 
      06-07-2006
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

 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      06-07-2006
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/css.../3-column.html

--
-bts
-Warning: I brake for lawn deer
 
Reply With Quote
 
Stuart Palmer
Guest
Posts: n/a
 
      06-07-2006
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
>

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-07-2006
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
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      06-07-2006
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.u k%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
 
Reply With Quote
 
Ed Seedhouse
Guest
Posts: n/a
 
      06-07-2006
On Wed, 07 Jun 2006 05:53:51 GMT, "Stuart Palmer"
<(E-Mail Removed)> 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.

 
Reply With Quote
 
Stuart Palmer
Guest
Posts: n/a
 
      06-07-2006
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


 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      06-07-2006
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
<H1> causing a gap between head div and left column / content div Kate HTML 4 02-19-2005 10:22 PM
Re: <H1> causing a gap between head div and left column / content div Kate HTML 1 02-19-2005 06:20 PM



Advertisments