473,803 Members | 3,428 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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=10 0%;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 4781
On 2007-10-22, Jeff <do*********@al l.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=10 0%;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*********@al l.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=10 0%;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*********@al l.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=10 0%;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.supernew s.com>,
Jeff <do*********@al l.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.supernew s.com>,
Jeff <do*********@al l.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
12230
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 in a TD is the complete column width including any CELLPADDING. For example for a 400 pixel wide table with four 100 pixel wide columns and 10 pixel cellpadding... <TABLE WIDTH="400" BORDER="0" CELLSPACING="0" CELLPADDING="10">
2
6360
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 height but I don't want to use absolute positioning. I want the height to be determined by the height of the longest column. I've defined the columns using inline <span> elements surrounding the column content. All works fine except the height.
11
7887
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%-->| |.M.|----------| |.E.|----------| |.N.|----------| |.U.|----------|
8
20873
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 link ;) The scenario is simple: An XHTML 1.0 page in Strict Mode. A single DIV for the content. I want this DIV to occupy the full height of the viewport. A somewhat satisfactory prototype is here:
2
4413
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: Menu5_5_1=new Array("'Lonely Church","javascript:window.open ('http://www.photo.net/photodb/photo?photo_id=2640310')","",0,20,300); That works fine, except I can't figure out how to modify it to make it open full-screen.
7
7447
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 Grail" layout). I'm using paragraph borders to set off items in the middle column. But I occasionally want to create paragraphs within those paragraphs, and that's where my layout screws up (Some of you may have already decided my layout screwed up...
3
9488
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 height stays the same) If I repopulate its datasource (datatable) then the rows resize OK, but that is an uneccessary overhead.
5
1765
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 get me height that i can see not full height with scrollbars so how to get height full web height??? i hove you understand me i you don't write i will try to explane again
8
5118
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 indexed). dbo.maintable(ProfileID int pk) dbo.fts_table(ProfileID int pk fk, col1 xml, col2 xml, col3 xml) I want to perform a query that will return any rows that contain ‘x’ and ‘y’ in any columns. I.e. ‘x’ could be in col1 and ‘y’ could be in
0
9700
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
9564
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,...
0
10546
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10310
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10292
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
10068
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
6841
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5498
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...
2
3796
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.