473,763 Members | 9,161 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

css column layout

Hello All,
If this is not the appropriate group for this post, please point me in
the right direction.

I am trying to create a layout that has three main columns. The
primary content is the left most column. The width of this should be
variable depending on the size of the browser window. The middle and
right columns should have a fixed width of 200 pixels. I can get the
middle and right columns working as expected. I can't figure out how
to make the first column change with the browser size. If I use a
width of 60% it almost works, but when the browser window is small,
the third column wraps around and appears way down at the bottom.

Is there some way to make the width of the first column simply "the
remainder". For example:
<div style="float: left; width: remainder">
main content
</div>
<div style="float: left; width: 200px">
middle column
</div>
<div style="float: rigth: width: 200px">
left column
</div>
Any suggestions? Thanks!
Jan 2 '08 #1
12 2192
Yofnik said:

>

Any suggestions? Thanks!

This is a javascript newsgroup, you're looking for CSS or html authoring.

~A!
Jan 2 '08 #2
Response to Yofnik <je********@gma il.com>:
If this is not the appropriate group for this post, please point
me in the right direction.
comp.infosystem s.www.authoring.stylesheets

There is also:

comp.infosystem s.www.authoring.html
comp.infosystem s.www.authoring.site-design

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
Jan 2 '08 #3
Yofnik wrote:
If this is not the appropriate group for this post, please point me in
the right direction.

I am trying to create a layout that has three main columns. [...]
CSS is on-topic in comp.infosystem s.www.authoring.stylesheets, where more
competent people probably have already discussed your problem a number of
times. Suffice it to say that using any search engine before posting would
have gotten you much farther.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8************ *******@news.de mon.co.uk>
Jan 2 '08 #4
Randy Webb said:
[snip]

When a table solution does exactly what you want it to do, and a CSS
solution doesn't, you use the one that does what you want it to do.

That, I cannot argue with. When the OP heads over to the CSS group and
mentions tables there, I hope they are as forgiving. Tables make good
things bad and bad things unusable.

[snip]

'action' is null or not an object

Well, don't tell his wife. She already suspects. ;)

Besides, it doesn't give a solution, it gives a hack to make it appear
as if you have a solution.

I think I mentioned that it was illusory. Either way, the OP was asking
about CSS, and I abhor table layouts. I have seen too many break too
frequently and too easily. Getting started at a bad CSS tutorial is
better than using tables and applying CSS to them.

~A!
Jan 2 '08 #5
Response to Anthony Levensalor <ki******@mypet programmer.com> :
I think I mentioned that it was illusory. Either way, the OP was
asking about CSS, and I abhor table layouts. I have seen too many
break too frequently and too easily. Getting started at a bad CSS
tutorial is better than using tables and applying CSS to them.
I wouldn't call anything written or elaborated on by Dave Child, "bad."

Perhaps unorthodox, definitely another way of doing the same old thing
(which is all this new-age Web 2.0 BS is about), but definitely not
bad.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
Jan 2 '08 #6
Thomas 'PointedEars' Lahn said:

CSS is on-topic in comp.infosystem s.www.authoring.stylesheets, where more
competent people probably have already discussed your problem a number of
times. Suffice it to say that using any search engine before posting would
have gotten you much farther.

Hear hear. I'm with you on this one.

~A!
Jan 2 '08 #7
-Lost said:

I wouldn't call anything written or elaborated on by Dave Child, "bad."

Perhaps unorthodox, definitely another way of doing the same old thing
(which is all this new-age Web 2.0 BS is about), but definitely not
bad.
Oh, I had no intention to disparage his work in the slightest, I was
just trying to point out that even a bad CSS would be preferable to
tables. I didn't mean to infer anything about him or his site.

~A!
Jan 2 '08 #8
Anthony Levensalor said the following on 1/2/2008 12:09 PM:
Randy Webb said:
[snip]
>When a table solution does exactly what you want it to do, and a CSS
solution doesn't, you use the one that does what you want it to do.
That, I cannot argue with. When the OP heads over to the CSS group and
mentions tables there, I hope they are as forgiving. Tables make good
things bad and bad things unusable.
[snip]
>Besides, it doesn't give a solution, it gives a hack to make it appear
as if you have a solution.
I think I mentioned that it was illusory. Either way, the OP was asking
about CSS, and I abhor table layouts. I have seen too many break too
frequently and too easily. Getting started at a bad CSS tutorial is
better than using tables and applying CSS to them.
I am not going to have a tables vs. broken CSS debate here. If a table
is the best solution, then it is the best solution no matter where it is
debated. The same goes for a CSS solution. But, to simply make a blanket
statement "Don't ever use tables for layout" is just plain wrong.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 2 '08 #9
Randy Webb said:

[snip]
I am not going to have a tables vs. broken CSS debate here. If a table
is the best solution, then it is the best solution no matter where it is
debated. The same goes for a CSS solution. But, to simply make a blanket
statement "Don't ever use tables for layout" is just plain wrong.
Agreed. I tend to think most absolute statements are wrong. In my
vehemence over tables I overstepped.

~A!
Jan 2 '08 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
5482
by: Doug McCrae | last post by:
http://www.btinternet.com/~doug.mccrae/go4learning/index.html As it says in the subject, a two column layout (plus header and footer boxes). I feel the left column really needs to be fixed width (151px) as it contains an image, while everything else is fluid. However this only works in IE 6.0. In Netscape and Opera I found that the auto width of the right column is 100% so it jumps down below the menu if the left column is fixed - not...
8
3313
by: Zak McGregor | last post by:
Hi all I have a simple 3 column css layout here: http://www.carfolio.com/newlook.dhtml However, when the centre column is wider than the screen (yes, it does happen on some pages on the site and no it can't happen differently) then the 3rd column overlays itself over the middle column's content. Is there a css-based 3 column layout without ugly hacks that will give me a 3rd column as far to the right as need be? Can anyone suggest a...
16
6167
by: Dan V. | last post by:
How do you do a css 2 column layout with header and footer, with the 2nd column auto-stretching so entire page looks good for 800 x 600 resolution as min. and 1024 x 768 resolution as a max? Ideally the layout would be centered so it scales better visually. This would be great for me. Thanks,
10
2203
by: Ed | last post by:
The page I'm working on is at http://www.coldpizzasoftware.com/temp/layout.html I trying to get the yellow sidebar to go in the white area to the right of the green content area and between the blue header and footer. Does anyone know how to do? I know I can add float: left; to the content div and it sort of works, but it doesn't seem right either. In this case the content div and the side bar div will no longer stay in their...
15
2325
by: Tamblyne | last post by:
This problem has got to have a simple solution and I can't be the first person who has ever handled it. Perhaps Google is no help because I'm not using the right terms? (I did find one post on-point, but no one responded to it.) I have a two column layout with a header and a footer. If the "content" is longer than the "navigation", there is no problem. However, if the content is shorter than the navigation, the navigation menus...
3
7078
by: Spondishy | last post by:
OK... After a previous post, I've decided that the site layout will be two columns The layout will be: 1) Page 100% wide 2) Right column will be fixed 150px, left column will use the rest of the space
7
2619
by: Andrew | last post by:
I've been struggling to achieve the following layout for some time now and I'm not getting anywhere. I've tried several approaches including floats & absolute positioning and none seem to work, primarily due to the footer not being aware of the columns due to me floating / positioning them. I have the following (very simple) markup: <div id="head">...</div> <div id="left">...</div>
31
3107
by: Sarita | last post by:
Hello, this might sound stupid, but I got a really nice homepage template which unfortunately is a 3-Column Fixed Width CSS format. Now I don't have any content for the right column and would like the middle column just to use up that space instead. Any way this is possible? Thanks for your help, it is highly appreciated!
3
3778
by: hzgt9b | last post by:
I want a page with a centered div containing two rows. Top row has an image and some text. The bottom row needs to have three columns. I'd love to have the 1st column set to a fixed width then have the 2nd and 3rd columns fill the remaining space but I've given up on that and am willing to settle for the second row to have a fluid 3-column layout (or something else simple). Anyway, I've developed a page where the second row has this 3...
1
8900
Death Slaught
by: Death Slaught | last post by:
I will be showing you how to make a very simple but effective three column layout. First we will begin with the HTML, or structure, of our three column layout. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
0
9564
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9387
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
9938
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9823
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8822
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5270
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5406
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3528
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2794
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.