Re: [css-d] Sum total greater than 100%
> Setup your html as follows:
>
> <--
> --->
>
>
>
>
> Left Nav Bar Red 25%
> Red 25% Red 25% Red 25% Red 25%
>
> Header bar
> Content
> Footer
>
>
>
>
>
Imho, authors should *not* use for this
>
> Now setup your css as follows:
>
> body {
> margin: 0;
> padding: 0;
> border: 0;
> text-align: center;
> }
I don't think zeroing border is necessary here
> #wrapper {
> width: 800px;
> margin: 0 auto;
> text-align: left;
>
> }
>
> #container2 {
> clear: left;
> float: left;
> width: 100%;
> overflow: hidden;
> background: yellow; /* column 2 background colour */
> border: 2px black solid;
> }
This container has no sibling, so why float:left?
And what does it clear?
Once float is removed, the width can go too (must be replaced with another
layout trigger though).
Not having width and border together is a plus.
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sum total greater than 100%
The reason could be that you have mixed px and % sizes and so the calculations
becomes difficult in browsers. However, I suggest try this:
Setup your html as follows:
<->
Left Nav Bar Red 25%
Red 25% Red 25% Red 25% Red 25%
Header bar
Content
Footer
<->
Now setup your css as follows:
body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
}
#wrapper {
width: 800px;
margin: 0 auto;
text-align: left;
}
#container2 {
clear: left;
float: left;
width: 100%;
overflow: hidden;
background: yellow; /* column 2 background colour */
border: 2px black solid;
}
#container1 {
float: left;
width: 100%;
position: relative;
right: 75%;
background: red; /* column 1 background colour */
border-right: 2px black solid;
}
#col1 {
float:left;
width:21%;
position: relative;
left:77%;
overflow: hidden;
}
#col2 {
float:left;
width:71%;
position:relative;
left:81%;
overflow: hidden;
}
#Row1 {
height: 85px;
background: green;
}
#Row2 {
height: 395px;
background: yellow;
}
#Row3 {
height: 85px;
background: lime;
}
hth
--- On Sat, 19/6/10, John Dick wrote:
>
> Why is right side longer than left side in this skeleton
> layout? You can see at the bottom of the webpage when
> this info is entered in a test document:
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Sum total greater than 100%
The right side looked longer in FF3.6.3. but looked OK in IE8. I edited out all the 2px borders in the css and that made the sides even. Frank __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sum total greater than 100%
Ar 19/06/10 23:27, ysgrifennodd David Laakso : > > Hmm. I don't know why. > > 1/ When all the borders are removed the heights are still different in > Mac Opera, Mac Safari, and the current WebKit nightly. > > 2/ When all the heights are converted to pixels, rather than percent, > the heights are the /same/ in Mac Opera, Mac Safari, WebKit nightly, > Camino, and Mac Firefox [see below]. > > Just a guess..., but rounding errors when calculating percentages?? Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sum total greater than 100%
John Dick wrote:
> Why is right side longer than left side in this skeleton layout? You can see
> at the bottom of the webpage when this info is entered in a test document:
>
>
>
Hmm. I don't know why.
1/ When all the borders are removed the heights are still different in
Mac Opera, Mac Safari, and the current WebKit nightly.
2/ When all the heights are converted to pixels, rather than percent,
the heights are the /same/ in Mac Opera, Mac Safari, WebKit nightly,
Camino, and Mac Firefox [see below].
body {
margin: 0;
padding:0;
border: 0;
text-align: center;
}
#container {
width: 800px;
text-align: left;
margin: 10px auto 0 auto;
height: 565px;
}
#left {
float: left;
width: 25%;
height: 565px;
background: red;
}
#right {
height: 565px;
float: inherit;
}
#Row1 {
height: 86px;
background: green;
}
#Row2 {
height: 393px;
background: yellow;
}
#Row3 {
height: 86px;
background: blue;
}
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sum total greater than 100%
Ar 19/06/10 22:10, ysgrifennodd John Dick : > Why is right side longer than left side in this skeleton layout? You can see > at the bottom of the webpage when this info is entered in a test document: > > > The height property does not include padding, borders, or margins (see w3schools) HTH Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Sum total greater than 100%
Why is right side longer than left side in this skeleton layout? You can see
at the bottom of the webpage when this info is entered in a test document:
Left Nav Bar
Header bar
Content
Footer
CSS is here:
body {
margin: 0;
padding:0;
border: 0;
text-align: center;
}
#container {
width: 800px;
text-align: left;
margin: 0 auto;
height: 565px;
}
#left {
float: left;
width: 25%;
height: 100%;
background: red;
border: 2px black dotted;
}
#right {
height: 100%;
border: 2px black dotted;
float: inherit;
}
#Row1 {
height: 15%;
background: green;
border: 2px black dotted;
}
#Row2 {
height: 70%;
background: yellow;
border: 2px black dotted;
}
#Row3 {
height: 15%;
background: blue;
border: 2px black dotted;
}
Thanks for any any advise on this.
_
http://clk.atdmt.com/UKM/go/19780/direct/01/
We want to hear all your funny, exciting and crazy Hotmail stories. Tell us now
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
