473,372 Members | 804 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,372 software developers and data experts.

full height columns

Nearly identical post in alt.www.webmaster, where it is languishing.

I'd like a column that flows the full height of a page, even if you
scroll down.

If I did this:

<div style="width: 100px;height=100%;background-color: red">
side bar
</div>
<div style="float: left; background-color: #fff">
main content, enough to have vertical scroll bars on the browser
</div>

I'd have problems after I scrolled down with content wrapping around.

What do I need to do? Seems like I should know this, but... I'm
drawing a blank.

What's the support level of inline-block these days?

Jeff
Oct 22 '07 #1
6 4760
On 2007-10-22, Jeff <do*********@all.ukwrote:
Nearly identical post in alt.www.webmaster, where it is languishing.
I did see it but couldn't really understand what you were asking.
I'd like a column that flows the full height of a page, even if you
scroll down.

If I did this:

<div style="width: 100px;height=100%;background-color: red">
side bar
</div>
<div style="float: left; background-color: #fff">
main content, enough to have vertical scroll bars on the browser
</div>
This puts the main content after the sidebar, which is what I don't
get-- surely the sidebar is supposed to be at the side?
I'd have problems after I scrolled down with content wrapping around.

What do I need to do? Seems like I should know this, but... I'm
drawing a blank.
Probably put the sidebar inside a container that contains both it and
the main content. The container's height will grow to fit the content.
Then you just have to make the sidebar fill its container, which can be
done with absolute positioning (position: relative on the container,
position: absolute; top: 0; bottom: 0 on the sidebar).

Height: 100% of an auto-height container is no good-- it will be
ignored. But you can locate a positioned box to the top and bottom edges
of an auto-height container.
What's the support level of inline-block these days?
Supported in Opera, Konqueror/Safari. OKish in IE7 I heard so long as
you set widths on the inline-blocks. Completely and utterly broken in
Firefox.
Oct 22 '07 #2
Ben C wrote:
On 2007-10-22, Jeff <do*********@all.ukwrote:
> Nearly identical post in alt.www.webmaster, where it is languishing.


I did see it but couldn't really understand what you were asking.

Two columns. Right column doesn't wrap below left column. Exactly what
you would have with this:

<table>
<tr>
<td>left column</td>
<td>content here that doesn't wrap below left column</td>
</tr></table>
>
> I'd like a column that flows the full height of a page, even if you
scroll down.

If I did this:

<div style="width: 100px;height=100%;background-color: red">
side bar
</div>
<div style="float: left; background-color: #fff">
main content, enough to have vertical scroll bars on the browser
</div>


This puts the main content after the sidebar, which is what I don't
get-- surely the sidebar is supposed to be at the side?
Sorry, left out the float: left
>
>>I'd have problems after I scrolled down with content wrapping around.

What do I need to do? Seems like I should know this, but... I'm
drawing a blank.


Probably put the sidebar inside a container that contains both it and
the main content. The container's height will grow to fit the content.
Then you just have to make the sidebar fill its container, which can be
done with absolute positioning (position: relative on the container,
position: absolute; top: 0; bottom: 0 on the sidebar).
Not sure what you mean. Are you talking about positioning relative both
coolumns? The sidebar at left: 0px, and the main at say left: 100px and
putting both those in a container div?

Jeff
>
Height: 100% of an auto-height container is no good-- it will be
ignored. But you can locate a positioned box to the top and bottom edges
of an auto-height container.

> What's the support level of inline-block these days?


Supported in Opera, Konqueror/Safari. OKish in IE7 I heard so long as
you set widths on the inline-blocks. Completely and utterly broken in
Firefox.
Oct 22 '07 #3
Ben C wrote:

Well, I haven't read this group for sometime and see that is a big
mistake.

The solution is just three threads up!

Sorry to have failed my net etiquitte!

Jeff
On 2007-10-22, Jeff <do*********@all.ukwrote:
> Nearly identical post in alt.www.webmaster, where it is languishing.


I did see it but couldn't really understand what you were asking.

> I'd like a column that flows the full height of a page, even if you
scroll down.

If I did this:

<div style="width: 100px;height=100%;background-color: red">
side bar
</div>
<div style="float: left; background-color: #fff">
main content, enough to have vertical scroll bars on the browser
</div>


This puts the main content after the sidebar, which is what I don't
get-- surely the sidebar is supposed to be at the side?

>>I'd have problems after I scrolled down with content wrapping around.

What do I need to do? Seems like I should know this, but... I'm
drawing a blank.


Probably put the sidebar inside a container that contains both it and
the main content. The container's height will grow to fit the content.
Then you just have to make the sidebar fill its container, which can be
done with absolute positioning (position: relative on the container,
position: absolute; top: 0; bottom: 0 on the sidebar).

Height: 100% of an auto-height container is no good-- it will be
ignored. But you can locate a positioned box to the top and bottom edges
of an auto-height container.

> What's the support level of inline-block these days?


Supported in Opera, Konqueror/Safari. OKish in IE7 I heard so long as
you set widths on the inline-blocks. Completely and utterly broken in
Firefox.
Oct 22 '07 #4
In article <13*************@corp.supernews.com>,
Jeff <do*********@all.ukwrote:
Ben C wrote:

Well, I haven't read this group for sometime and see that is a big
mistake.

The solution is just three threads up!

Sorry to have failed my net etiquitte!

Jeff
Ben C did not write this. Try to quote properly. If you have
found a solution to a problem, share it with others, "three
threads up" is not a good reference.

--
dorayme
Oct 22 '07 #5
dorayme wrote:
In article <13*************@corp.supernews.com>,
Jeff <do*********@all.ukwrote:

>>Ben C wrote:

Well, I haven't read this group for sometime and see that is a big
mistake.

The solution is just three threads up!

Sorry to have failed my net etiquitte!

Jeff


Ben C did not write this. Try to quote properly.
Sorry, I don't know what happened there.
If you have
found a solution to a problem, share it with others, "three
threads up" is not a good reference.
Well, I really didn't feel the need for a message ID, and even that
solution (and you are posting in that thread) has problems.

You'd think this was CIWAH. Lighten up.

Jeff
>
Oct 23 '07 #6
Jeff wrote:
dorayme wrote:
>
>If you have found a solution to a problem, share it with others,
"three threads up" is not a good reference.

Well, I really didn't feel the need for a message ID, and even that
solution (and you are posting in that thread) has problems.
Well actually that would make sense. See: http://message-id.net/

Depending on ones news server, client, settings, etc., the thread could
be 3 up, 3 down or not present at all! That is why folks get on your
case about quoting and references.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Oct 23 '07 #7

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

Similar topics

7
by: Graham J | last post by:
Apologies for the partial post that mysteriously escaped as I was composing. I shall try again. For many years I have been happily and successfully coding tables such that the WIDTH specified...
2
by: zing | last post by:
Hello, I want to define n columns that appear with specific background colors, different to the body background (i.e. so you can see the area they occupy). I want the columns to be of the same...
11
by: Not4u | last post by:
Hello, I have a problem with CSS code. I want to have one menu column with a fixed width and a 100% height and the rest of the page for content. ---------------- |.|.|<--100%-->|...
8
by: Terry | last post by:
OK folks, I know this has seemingly been discussed to death but honestly, I could not find posts related to the specific problem I'm submitting here. Feel free to flame me, as long as you provide a...
2
by: Larry R Harrison Jr | last post by:
I have pull-down menus in javascript and I have the code for opening a link in a new window. But I want it to open a full-sized window. I can't figure out the syntax. What I have so far: ...
7
by: questionz_99 | last post by:
I've created a style sheet with three columns contained in a fixed-width box. The columns are all relative position, percentage widths. (I wanted to avoid the fixed-width columns in the "Holy...
3
by: steve | last post by:
Hi All How can I get the datagridview to redraw after changing the rowtemplate.height at runtime ( it is databound to a datatable) I have tried datagridview1.refresh etc to no avail (The row...
5
by: tader | last post by:
Hi again, so i got another question this time i need to get full web height but i just can't do it can anyone help me plz i try to use innerHeight, screen.availHeight and so on but thous function...
8
by: Sham | last post by:
I am trying to perform the following query on a table that has been indexed using Full Text Search. The table contains multiple columns than have been indexed. (Below, all xml columns are...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
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: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
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: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
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:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.