473,404 Members | 2,178 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,404 software developers and data experts.

How to let the layout laterals auto sizing?

Hi
I want to create one layout with 3 columns.

The left and right columns should have a auto-width.
The center column should have a fixed size of 300px.

By example:

If the browser window width is 500px I need the left column have
width=100px and right column have width=100px and center off course
width=300px.

If the browser window width is 300px then both left and right have
width=0px and the center keep with width=300px.

Obs.:
The left and right columns will be empty but having a different
background for each one.

If possible I prefer a tableless solution.
Mar 26 '08 #1
9 1831
On 2008-03-26, Neviton <ne*******@gmail.comwrote:
Hi
I want to create one layout with 3 columns.

The left and right columns should have a auto-width.
The center column should have a fixed size of 300px.

By example:

If the browser window width is 500px I need the left column have
width=100px and right column have width=100px and center off course
width=300px.

If the browser window width is 300px then both left and right have
width=0px and the center keep with width=300px.

Obs.:
The left and right columns will be empty but having a different
background for each one.

If possible I prefer a tableless solution.
Float the left column left, float the right column right, leave the
middle column normal-flow and give it left and right margins of 100px.
Mar 26 '08 #2
In article
<b6**********************************@8g2000hse.go oglegroups.com>,
Neviton <ne*******@gmail.comwrote:
Hi
I want to create one layout with 3 columns.

The left and right columns should have a auto-width.
The center column should have a fixed size of 300px.

By example:

If the browser window width is 500px I need the left column have
width=100px and right column have width=100px and center off course
width=300px.

If the browser window width is 300px then both left and right have
width=0px and the center keep with width=300px.

Obs.:
The left and right columns will be empty but having a different
background for each one.

If possible I prefer a tableless solution.
Not really possible under your conditions I am afraid. Care to lower the
bar a bit?

--
dorayme
Mar 26 '08 #3
my*******************@googlemail.com wrote:
>
search engines guidelines recommend to
avoid negative margins.
What do negative margins (or any CSS for that matter) have to do with
search engines? I'd like to know where you read such guidelines.

--
Berg
Mar 27 '08 #4
On Mar 27, 5:43 pm, Bergamot <berga...@visi.comwrote:
mynameisnobodyodyseea wrote:
search engines guidelines recommend to
avoid negative margins.

What do negative margins (or any CSS for that matter) have to do with
search engines? I'd like to know where you read such guidelines.

--
Berg
Google (and probably other search engines as well) does not
like hidden content, see
http://www.google.com/support/webmas...y?answer=66353
about CSS see the bit about not using CSS to hide text.

Negative margins can hide content,
content that could be in the source of a page but not
visible on a screen.
(Other style information that can hide content
are setting display:none, or setting the font size to 0,
or using similar-colour text and background, etc.....)

It depends on the content of the page of course.
Negative margins are used a lot for layout and they are
very good and useful in styling,
but the fact that sometimes they can be used to hide content
is something to consider,
maybe not to use negative margins if there are other solutions,
just in case.

There is no fixed rule about search engines and
negative margins,
but I thought it was better to mention that
there can be some doubts about the use of
negative margins in some cases.

Mar 27 '08 #5
Bergamot <be******@visi.comwrites:
my*******************@googlemail.com wrote:
>>
search engines guidelines recommend to
avoid negative margins.

What do negative margins (or any CSS for that matter) have to do with
search engines?
They're used by cheaters to include non-relevant keywords in HTML that
are invisible to most human visitors. Another common sign that someone
is trying to game the search engines is identical text and background
colors.

sherm--

--
My blog: http://shermspace.blogspot.com
Cocoa programming in Perl: http://camelbones.sourceforge.net
Mar 27 '08 #6
my*******************@googlemail.com wrote:
On Mar 27, 5:43 pm, Bergamot <berga...@visi.comwrote:
>mynameisnobodyodyseea wrote:
search engines guidelines recommend to
avoid negative margins.

What do negative margins (or any CSS for that matter) have to do with
search engines? I'd like to know where you read such guidelines.

Google (and probably other search engines as well) does not
like hidden content
Yeah, we all know that.
Negative margins can hide content,
So? One has nothing to do with the other.

Google is referring to keyword spamming in the content and trying to
hide it from human visitors.

There are valid uses for display:none, visibility:hidden and negative
margins that have nothing to do with spamming search engines.
Negative margins are used a lot for layout and they are
very good and useful in styling,
but the fact that sometimes they can be used to hide content
is something to consider,
Huh? As far as search engines go, there's nothing to consider unless
your *intent* is keyword spamming.

--
Berg
Mar 27 '08 #7
dorayme wrote:
>>>>
Nice Gus, but see what happens on text enlargement.
What happens?

The side panels fall short and I was just thinking the OP might not find
this something he wants. That's all.
Yes, as hewhoshallnotbenamed said, "if the content of the center box is
longer than the height of the window (viewport) ...." - so it's good to
those limitations.

His version is good but, "[only if] the content of the center bar
longer than the height of the window (viewport)" - so it's good to the
other limitations.

Is it possible to contrive a way to combine the two?

--
Gus

Mar 28 '08 #8
On Mar 28, 3:34 am, Gus Richter wrote:
Yes, as hewhoshallnotbenamed said, "if the content of the center box is
longer than the height of the window (viewport) ...." - so it's good to
those limitations.

His version is good but, "[only if] the content of the center bar
longer than the height of the window (viewport)" - so it's good to the
other limitations.

Is it possible to contrive a way to combine the two?

--
Gus
Hi Gus,
I am not a he, I am a she.
I thought that mynameisnobodyodyssea would be fun,
like in the Odyssey, like
who wrote that? nobody wrote that...

Anyway, my suggestion was a variant on your
solution, that I think is very good and adaptable.
Also, a 300pixels centered column looks like
for mobile phones, so it is very likely that the
content would be longer than the screen height.
Another thing is that if the question was indeed for
mobile phones, it is a good idea for
whatever solution will be chosen to be
tested in as many mobile phone browsers as
possible, just in case.

It would be good if we would know more about
the initial question, like what are the backgrounds like.
Mar 28 '08 #9
THANK YOU EVERY ONE!!!

and sorry cause I know that Im so late that I dont know if all of you
still alive today heheheh

ANYWAY THANX YOU ALL

What I wanted with this was take the background image(that was big)
and take off 300px from the middle of it (to save some Kb from your
size) and then divide the image in two equal parts. Set the left part
of this image as background-image of the left column and set the right
part to the right column.

This could save several Kb from the web page.

I hope you dont think Im crazy(so much) @)))

Jun 27 '08 #10

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

Similar topics

1
by: J | last post by:
I would like to create an auto sizing colored bar that stretches as the height of the section changes when content is added. This is as close as I've gotten, but no luck. Any help is...
16
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? ...
22
by: Jam Pa | last post by:
Once again my big mouth has landed me with a tough job. I have a static CSS layout, where each and every element has been defined by pixel size - lots of them, too! Mostly relative elements,...
4
by: Rob Freundlich | last post by:
I have some servlet-generated tabular data that I need to present, so I'm using an HTML Table. In some cases, it can be quite large. I'm flushing the servlet output every N lines to push the data...
30
by: Diane Wilson | last post by:
I'm trying (once again) to figure out how to make a robust CSS layout style that can replace tables. I'd like to be able to do a basic two-column layout, with a one-column header, a two column...
4
by: Eric | last post by:
I'm trying to reproduce the following table layout using CSS only and am having some trouble with it. I'd like them to look identical but I'm having trouble sizing the labels properly as it doesnt...
2
by: spacix | last post by:
Does anyone know a work around for "table-layout: fixed;" to prevent the automatic evenly space cells width without assigning classes or ID to cells? My program prints a HTML "report" file and I...
4
by: ge5talt | last post by:
Longtime reader, 1st time poster :) I am in the process of overhauling a website and replacing an old table-based quirksmode layout with a standards-mode tableless one. I am currently working on...
5
by: creative1 | last post by:
hi everyone, I am struck in layout of my site. Im using 1024 fixed width layout. I have a site layout designed in psd files. Bisically I have to stick with that design tightly and I am asked not to...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
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...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
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...
0
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...
0
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,...

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.