23 replies [Last post]
guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Hi,
I'm new to this forum;

I doesn't manage in solving this problem;

practically, I've a simple page with two column;
these columns are created by two div with absolute position;

#navBar{ position: absolute; top: 0; left: 0; bottom: 0; width: 200px; // IE specific code height: expression(document.body.clientHeight + "px"); background-image: url("b_left.gif"); background-repeat: repeat-y; }

#content{
position: absolute;
top: 0px;
left: 200px;
right: 0px;
// IE specific code
width: expression(document.body.clientWidth - 230 + "px");
border-style: ridge;
border-width : 2px;
margin: 15px 15px 15px 15px;
padding: 5px 5px 5px 5px;
min-width: 600px;
}

The page is showed correctly, if there is no vertical scroll.
But if the content of the right column is more long than the screen height resolution, the vertical scroll appear for the whole page (as I want), but in the left column the background image isn't repeated completely to the bottom but it stops when it reach an height equal to screen height resolution.

I hope its clear.

Thank you in advance

gg.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Yes it is clear. You

Yes it is clear.

You shouldn't be using position absolute anyway.

Float each column left (also make them display inline).

Put them both inside a containing div (let's call it float-wrap) and put a background on the float-wrap that is for both columns.

The float-wrap will need to have code to contain the floats (just seach on this forum for floatcontainer and grab the css and attach that as a class to the float-wrap div).

Beware of the 3px right margin float bug in IE6.

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Thank you Trevor for the

Thank you Trevor for the answer;
but I don't want to use the same background for the two columns;
I want a small gradient image (black to white) as background-image in the left column (suppose a 200x10 image),
and I want no background for the right column (I want to leave it blank).

gg.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Fine Is the div you want

Fine

Is the div you want the gradient behind a fixd width?

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

yes, it is: <div

yes,
it is:

Now, I post two images explain better the problem:

without problem:

with problem:

Thank you again.
And excuse me if images are too large;
I can delete it at the end of discussion.

gg.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Well, try as I said before

Well, try as I said before with that image in the background of the float-wrap set to repeat-y and left top. Even though it is not as wide as the float-wrap, the rest of the background will be transparent.

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Ok, I've tried to use float

Ok,
I've tried to use float property but it doesn't work;
Float require a fixed width, but I want only the left column to have a fixed width, while the right one must adapt to browser viewport change.
That is the div containing the right column must resize itself every time browser viewport is changed.

I manage in doing this with the property
right:0;
of the absolute positioning.

For this I use absolute position.

Any alternative to solve?

Thank you.

gg.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

guestguest wrote:I've tried

guestguest wrote:
I've tried to use float property but it doesn't work;

Strange that it works for all of us, but not for you, eh? Are you saying CSS has properties that work one way for everyone else and another way for you? Doesn't seem too likely to me. Or, perhaps, just possibly, do you think that you just might not be doing it right because you haven't understood it yet?

Quote:
Float require a fixed width

You are using your special personal version of CSS again eh?

Quote:
but I want only the left column to have a fixed width, while the right one must adapt to browser viewport change.

So only float the left column. Give it a width. Don't float the second column, it's not necessary. Merely give it a left margin greater than the width of your left column. That will give you the effect you want, if I understand you correctly. Assuming your browser implements CSS the same way as everyone else's browser.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Ed seedhouse wrote:Strange

Ed seedhouse wrote:
Strange that it works for all of us, but not for you, eh? Are you saying CSS has properties that work one way for everyone else and another way for you?

No.
It is obvious I meant the use of float property has not solved my problem.

Ed seedhouse wrote:
Or, perhaps, just possibly, do you think that you just might not be doing it right because you haven't understood it yet?

Yes, sure.
But have I never said the opposite?
I've said the effect ("don't work"), not the cause.

Quote:
You are using your special personal version of CSS again eh?

No, I use W3C's Cascading Style Sheets.
I've simply read tutorials on this forum;
that is:

Quote:
Do floated items need a width?

You should always set a width on floated items (except if applied directly to an image - which has implicit width). W3C's Cascading Style Sheets, level 2, CSS2 Specifications states:

"A floated box must have an explicit width..."

If no width is set, the results can be unpredictable. Theoretically, a floated element with an undefined width should shrink to the widest element within it. This could be a word, a sentence or even a single character - and results can vary from browser to browser.
http://css.maxdesign.com.au/floatutorial/introduction.htm

Ed seedhouse wrote:
So only float the left column. Give it a width. Don't float the second column, it's not necessary. Merely give it a left margin greater than the width of your left column. That will give you the effect you want, if I understand you correctly.

Thank you.
I'll try.

gg.

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Hi, can anyone post some

Hi,
can anyone post some simple working code in firefox?

Because I have tried to use create an example page, using your CSS tips;
I've used:

#fullPage{ overflow: auto; background-image: url("images/background_left.gif"); background-repeat: repeat-y; }

#navBar{
float: left;
width: 200px;
background-image: url("images/background_left.gif");
background-repeat: repeat-y;
}

#content{
display: inline;
border-style: ridge;
border-width : 2px;
margin: 215px 0px 0px 0px;
padding: 5px 5px 5px 5px;
}

and this HTML code:
...


Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test


...

But I obtain a very awful and scrambled output.

Thank you in advance.
gg.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Can the OP please check his

Can the OP please check his code?

#fullPage {...

and

<div id="fullpage">

nuff said.

Try this:

Your Page Title Here

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
input,select{
margin:0;
padding:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
}
strong,b{
font-weight:bold;
}
p{
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */

#fullpage{
font-size:90%;
background: url("background_left.gif") repeat-y;
position:relative;
}

#navBar{
float: left;
display:inline;
width: 200px;
}

#content{
position:relative;
border-style: ridge;
border-width : 2px;
margin-left: 215px;
padding: 5px 5px 5px 5px;
}

Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Ok, it works for pages with

Ok,
it works for pages with height longer than screen size height resolution;
but for pages with height smaller than screen size resolution, I obtain this:

but I want this:

yes, I could use a fixed height, but I don't want to use it,
because, in this case, as example, if the page is showed in a browser with resolution height longer than my fixed height, it suffer the problem.

I want simply that my page has a dynamic height, that is the height of browser viewport;
then I use min-height property, to avoid eccessive minimize.

Is it possible to do this?

For the time being, thank you for all.

gg.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Is this closer to what you

Is this closer to what you want:

Your Page Title Here

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
input,select{
margin:0;
padding:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
}
html, body { height: 100%; min-width:900px}

strong,b{
font-weight:bold;
}
p{
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */

#fullpage{
font-size:90%;
background:url("background_left.gif") repeat-y;
position:relative;
display: table; /*** For non-IE browsers ***/
height: 100%;
width:100%;
}

#navBar{
float: left;
display:inline;
width: 200px;
}

#content{
position:relative;
border-style: ridge;
border-width : 2px;
margin-left: 215px;
padding: 5px 5px 5px 5px;
}

#fullpage{ height: auto; min-height: 100%;}

Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Ok, it works; I'm studying

Ok,
it works;
I'm studying your css.

But I had simplified problem;
really I had created with absolute positioning a page like this:

for the header div I have this:

#header{ position: absolute; top: 0; left: 200px; right: 0; height: 100px; /* IE Specific */ width: expression(document.body.clientWidth - 200 + "px"); background-image: url("images/background_top.gif"); background-repeat: repeat-x; padding: 0 10px 0 0; min-width: 630px; }

How must I convert it in order to use it with your code?

Thank you again.

gg.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I think I've done enough to

I think I've done enough to show the way, it's up to you now. Take it one step at a time.

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Ok, you are right; I'm

Ok,
you are right;
I'm reading some tutorials on float, and float container;

can you recommend a good CSS editor, eventually with code autocompletion, syntax highlighting, and errors detection?
I actually use dreamweaver latest version;
Is it the best?
Is there anything better?

Thank you very much for your help.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

There is a thread on text

There is a thread on text editors in off topic.

My choice is WebCoder (current version is 2005).

BUT, a major new version is due out in a month or two (alpha testing right now)

You can get a flavour here:

http://www.tsware.net/blog/

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Thank you Trevor, I'm

Thank you Trevor,
I'm downloading it.

In the meantime I doesn't manage in understand this piece of code:

/* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */

I don't understand the mean of the * before html;
Is it a continuation of the previous line?
because dreamweaver syntax highlighting show me the line
/* Hides from IE Mac \*/
as a comment, while the line
* html .floatcontainer {height:1%}
as an active line

Is this right?

gg.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

guestguest wrote:In the

guestguest wrote:
In the meantime I doesn't manage in understand this piece of code:

/* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */

I don't understand the mean of the * before html;
Is it a continuation of the previous line?
because dreamweaver syntax highlighting show me the line
/* Hides from IE Mac \*/
as a comment, while the line
* html .floatcontainer {height:1%}
as an active line

Ah well, so much for Dreamweaver.

If you look a this line:

/* Hides from IE Mac \*/

It OUGHT to be a comment. But IE Mac doesn't see the end of the comment, and so thinks the comment is continuing. All other borwers therefore ignore this line, but IE Mac sees it as a start comment.

The * html takes advatage of a sort of coding bug in IE4-6. Browsers should ignore any code that starts like this, but IE4,5 & 6 treat the line as normal css, so this means that we have a code block for IE before v7.0 and other browsers will ignore. But, IE Mac sees the css block as a comment, and the last line:

/* End Hack */

IE Mac nows sees the end of the comment, all other browsers see a normal comment line and ingore it.

So, the code in between those two comment lines is just for PC versions of IE, from version 4 to version 6. Hey ho. It is called the Holly Hack after Holly Bergavin.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

These are some basic and

These are some basic and essential filters to understand.

I would have a read of link below it's the origin of this set of clearing rules and explains the code that you are using so that you better understand what you're dealing with, there are also plenty of links to follow for further explanation, we could explain but it's pointless when there are perfectly good guides written already.

http://csscreator.com/attributes/containedfloat.php

edit/ hmm, too slow, surprising!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

Yes, I've read that topic

Yes,
I've read that topic and some other tutorials.

Now I've managed in create what I want;
That is, this:

This is showed correctly with firefox.
In IE I obtain strange small modification;
that is:


and

CSS I've used is:
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}

body{
font-family:arial,sans-serif;
font-size:100.1%;
}

html, body { height: 100%}

.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */

.clear{clear:both}

#fullpage{
position:relative;
display: table; /*** For non-IE browsers ***/
height: 100%;
width:100%;
min-height: 400px;
background:url("background_left.gif") repeat-y;
}

#navBar{
float: left;
display:inline;
width: 200px;
}

#header{
position:relative;
margin-left: 200px;
padding: 5px 5px 5px 5px;
height: 100px;
min-width: 600px;
background:url("background_top.gif") repeat-x;
}

#content{
position:relative;
border-style: ridge;
border-width : 2px;
margin-left: 215px;
padding: 5px 5px 5px 5px;
min-width: 600px;
}

#cell{
float: left;
width: 280px;
margin: 5px;
padding: 0 5px 0 5px;
}

HTML code is:
...

This is a test message.
This is a test message.
Test1
Test Message.Test Message.Test Message. Test Message.Test Message.Test Message. Test Message.Test Message.Test Message.
Test2
Test Message. Test Message. Test Message.
Test3
Test Message. Test Message. Test Message.
Test4
Test Message. Test Message. Test Message.

...

I want to know what are the specific properties causing the differences.
Opera, like firefox, show the page correctly;
only explorer.

Thank you.

gg.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

IE adds a 3px margin to

IE adds a 3px margin to floats. Try adding a -3px right margin to the left float (to IE only with the * html hack).

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

I don't understand how to

I don't understand how to set this margin;
I've already used html hack;
but If I add a html -3px margin property, the whole page in IE move 3px left;
but I want only the header div move 3px left;

how must I do?

for the header div I've:

#header{ position:relative; margin-left: 200px; height: 100px; background:url("images/background_top.gif") repeat-x; padding: 0 10px 0 0; min-width: 600px; }

and html code simply is:

............something...........

Thank you.
gg.

guestguest
guestguest's picture
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2007-04-19
Posts: 46
Points: 0

OK. Finally, after 3 days of

OK.
Finally, after 3 days of pain, I've solved the first problem;
I've added two Holly hacks;
one after the #header definition and one after the navbar definition;
that is:

/* Hides from IE Mac \*/ * html #navbar {margin-right: -3px;} /* End Hack */ and /* Hides from IE Mac \*/ * html #header {margin-left: -3px;} /* End Hack */

But the second problem still remains.
I'll open a new topic on this problem, because the question isn't related to the main object of this topic.

Thank you for all.
gg.