Re: [css-d] Floats
On Sat, Jan 17, 2015 at 11:01 PM, Crest Christopher crestchristop...@gmail.com wrote: Updated [Link http://jsfiddle.net/0kmbr4cq/5/] I want to know what I'm doing wrong why Pseudo-element:after with a clearing of floats is not working for the orange box ? In this version all four blocks float left. There is nothing to clear. Works in most browsers and mobile phones. Open in a full width window and drag to small-screen rendering [or view in your mobile phone]. Please see: http://ccstudi.com/chris2.html Best, David Laakso __ css-discuss [css-d@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] Floats
On Sun, Jan 18, 2015 at 4:46 PM, Crest Christopher crestchristop...@gmail.com wrote: Updated [Link http://jsfiddle.net/0kmbr4cq/13/] shouldn't the orange box be below the blue boxes, as in; Blue Box Blue Box Blue Box Orange Box Is this what you had in mind? http://ccstudi.com/chris3.html Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ css-discuss [css-d@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] Floats
Updated [Link http://jsfiddle.net/0kmbr4cq/13/] shouldn't the orange box be below the blue boxes, as in; Blue Box Blue Box Blue Box Orange Box David Laakso mailto:laakso.davi...@gmail.com Sunday, January 18, 2015 1:17 PM Updated [Link http://jsfiddle.net/0kmbr4cq/5/] I want to know what I'm doing wrong why Pseudo-element:after with a clearing of floats is not working for the orange box ? In this version all four blocks float left. There is nothing to clear. Works in most browsers and mobile phones. Open in a full width window and drag to small-screen rendering [or view in your mobile phone]. Please see: http://ccstudi.com/chris2.html Best, David Laakso Crest Christopher mailto:crestchristop...@gmail.com Saturday, January 17, 2015 11:01 PM Updated [Link http://jsfiddle.net/0kmbr4cq/5/] I want to know what I'm doing wrong why Pseudo-element:after with a clearing of floats is not working for the orange box ? David Laakso mailto:laakso.davi...@gmail.com Saturday, January 17, 2015 12:08 PM As above with generated content .box1:before and .box1:after added... http://ccstudi.com/chris1.html Best, David Laakso David Laakso mailto:laakso.davi...@gmail.com Saturday, January 17, 2015 10:27 AM On Sat, Jan 17, 2015 at 7:58 AM, Crest Christopher Not sure I understand what you are attempting to do-- maybe something like this? http://ccstudi.com/chris.html Best, David Laakso Crest Christopher mailto:crestchristop...@gmail.com Saturday, January 17, 2015 7:58 AM How come, with or without the pseudo-element of clearing float to the left, it doesn't appear to make a difference ? Everything still floats to the left, shouldn't some of the class=box be floating to the right, especially the orange box ? [Link http://jsfiddle.net/WildWind/0kmbr4cq/1/] __ css-discuss [css-d@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] Floats
How come, with or without the pseudo-element of clearing float to the left, it doesn't appear to make a difference ? Everything still floats to the left, shouldn't some of the class=box be floating to the right, especially the orange box ? [Link http://jsfiddle.net/WildWind/0kmbr4cq/1/] __ css-discuss [css-d@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] Floats
Crest Christopher wrote: How come, with or without the pseudo-element of clearing float to the left, it doesn't appear to make a difference ? Everything still floats to the left, shouldn't some of the class=box be floating to the right, especially the orange box ? [Link http://jsfiddle.net/WildWind/0kmbr4cq/1/] Question 1 : which element has class after-box ? Question 2 : in which browser(s) is the orange box not rendered as floating right ? Philip Taylor __ css-discuss [css-d@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] Floats
On Sat Jan 17 2015 at 8:42:22 AM Philip Taylor p.tay...@rhul.ac.uk wrote: Crest Christopher wrote: How come, with or without the pseudo-element of clearing float to the left, it doesn't appear to make a difference ? Everything still floats to the left, shouldn't some of the class=box be floating to the right, especially the orange box ? [Link http://jsfiddle.net/WildWind/0kmbr4cq/1/] Question 1 : which element has class after-box ? Question 2 : in which browser(s) is the orange box not rendered as floating right ? Philip Taylor __ I don't see a pseudo-element in that jsfiddle. All blue boxes are floating left, orange box is floating right. Just as expected from the code. Perhaps the fiddle has changed since you posted the question, Crest Cristopher? Tim __ css-discuss [css-d@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] Floats
On Sat, Jan 17, 2015 at 7:58 AM, Crest Christopher crestchristop...@gmail.com wrote: How come, with or without the pseudo-element of clearing float to the left, it doesn't appear to make a difference ? Everything still floats to the left, shouldn't some of the class=box be floating to the right, especially the orange box ? [Link http://jsfiddle.net/WildWind/0kmbr4cq/1/] Not sure I understand what you are attempting to do-- maybe something like this? http://ccstudi.com/chris.html Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ css-discuss [css-d@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] Floats
On Sat, Jan 17, 2015 at 10:27 AM, David Laakso laakso.davi...@gmail.com wrote: On Sat, Jan 17, 2015 at 7:58 AM, Crest Christopher crestchristop...@gmail.com wrote: How come, with or without the pseudo-element of clearing float to the left, it doesn't appear to make a difference ? Everything still floats to the left, shouldn't some of the class=box be floating to the right, especially the orange box ? [Link http://jsfiddle.net/WildWind/0kmbr4cq/1/] Not sure I understand what you are attempting to do-- maybe something like this? http://ccstudi.com/chris.html As above with generated content .box1:before and .box1:after added... http://ccstudi.com/chris1.html Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ css-discuss [css-d@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] Floats
Updated [Link http://jsfiddle.net/0kmbr4cq/5/] I want to know what I'm doing wrong why Pseudo-element:after with a clearing of floats is not working for the orange box ? David Laakso mailto:laakso.davi...@gmail.com Saturday, January 17, 2015 12:08 PM As above with generated content .box1:before and .box1:after added... http://ccstudi.com/chris1.html Best, David Laakso David Laakso mailto:laakso.davi...@gmail.com Saturday, January 17, 2015 10:27 AM On Sat, Jan 17, 2015 at 7:58 AM, Crest Christopher Not sure I understand what you are attempting to do-- maybe something like this? http://ccstudi.com/chris.html Best, David Laakso Crest Christopher mailto:crestchristop...@gmail.com Saturday, January 17, 2015 7:58 AM How come, with or without the pseudo-element of clearing float to the left, it doesn't appear to make a difference ? Everything still floats to the left, shouldn't some of the class=box be floating to the right, especially the orange box ? [Link http://jsfiddle.net/WildWind/0kmbr4cq/1/] __ css-discuss [css-d@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] Floats
I see a stray exclamation mark. On Sat, Jan 17, 2015 at 11:01 PM Crest Christopher crestchristop...@gmail.com wrote: Updated [Link http://jsfiddle.net/0kmbr4cq/5/] I want to know what I'm doing wrong why Pseudo-element:after with a clearing of floats is not working for the orange box ? David Laakso mailto:laakso.davi...@gmail.com Saturday, January 17, 2015 12:08 PM As above with generated content .box1:before and .box1:after added... http://ccstudi.com/chris1.html Best, David Laakso David Laakso mailto:laakso.davi...@gmail.com Saturday, January 17, 2015 10:27 AM On Sat, Jan 17, 2015 at 7:58 AM, Crest Christopher Not sure I understand what you are attempting to do-- maybe something like this? http://ccstudi.com/chris.html Best, David Laakso Crest Christopher mailto:crestchristop...@gmail.com Saturday, January 17, 2015 7:58 AM How come, with or without the pseudo-element of clearing float to the left, it doesn't appear to make a difference ? Everything still floats to the left, shouldn't some of the class=box be floating to the right, especially the orange box ? [Link http://jsfiddle.net/WildWind/0kmbr4cq/1/] __ css-discuss [css-d@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-discuss [css-d@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] Floats followed by paragraphs
See a sample here:
http://www.alliedcorrosion.com/products/manufacturer_introduction.php
Then click on BOX test at the top of the menu on the left.
Do you have a reason for not giving us the correct URL?
http://www.alliedcorrosion.com/products/allied_box_test.php
#container1 p
{
clear:both;
}
That fix worked fine. So does giving the paragraph a class with the style
clear both. I like yours better, but for the sake of understanding---
Now I have two follow-up questions.
1) If I add a second paragraph, I don't need to give it the style clear
both.
Does the first one reset the normal flow?
2) This is what is currently illustrated. If I comment out the container1
div, so that the pictures and paragraphs are in the content div, the
paragraphs get pushed down as far as the bottom of the left menu (which is
not in the content div).
Why does that happen?
Finally, I did not give the correct URL because I have an uncorrected
error with a php session start.
Del
__
css-discuss [css-d@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] Floats followed by paragraphs
Good Day; I frequently float one image right another left and follow that with a paragraph of text. What is the best method for preventing the text from creeping up between the two pictures? See a sample here: http://www.alliedcorrosion.com/products/manufacturer_introduction.php Then click on BOX test at the top of the menu on the left. Should I enclose the paragraph in a div of width 100%? Del __ 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] Floats followed by paragraphs
Hello, you have to define clear: both; on the p element in order to have it clear the left and the right floated image. Best regards, Christian Kirchhoff Editura GmbH Co. KG Tempelhofer Damm 2 · 12101 Berlin www.editura.de http://www.editura.de AG Berlin-Charlottenburg · HRA 43189 B · USt.Id. DE217180548 Geschäftsführer: Stefan Krause · Ralf Szymanski Am 12.01.2011 22:44, schrieb Del Wegener: Good Day; I frequently float one image right another left and follow that with a paragraph of text. What is the best method for preventing the text from creeping up between the two pictures? See a sample here: http://www.alliedcorrosion.com/products/manufacturer_introduction.php Then click on BOX test at the top of the menu on the left. Should I enclose the paragraph in a div of width 100%? Del __ 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-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] Floats followed by paragraphs
On Wed, 12 Jan 2011, Del Wegener wrote:
Good Day;
I frequently float one image right another left and follow that with a
paragraph of text. What is the best method for preventing the text from
creeping up between the two pictures?
See a sample here:
http://www.alliedcorrosion.com/products/manufacturer_introduction.php
Then click on BOX test at the top of the menu on the left.
Do you have a reason for not giving us the correct URL?
http://www.alliedcorrosion.com/products/allied_box_test.php
#container1 p
{
clear:both;
}
Should I enclose the paragraph in a div of width 100%?
P has a width of 100%.
--
Chris F.A. Johnson, http://cfajohnson.com/
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
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] Floats on multiple lines
Another tip or experiment: http://onwebdev.blogspot.com/2010/12/css-floats-on-multiple-lines.html HTH :-) http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ 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] Floats in IE6 ... again :-(
Hi,
I am having a problem with a floated element in IE6. Big surprise :o)
I have read many posts here as well as many of articles on the subject,
including this very recent one: http://bit.ly/clrfxReloaded , and have
tried , in vain, to apply what I thought I learned to my problem.
The page in question is here:
http://dl.dropbox.com/u/2488267/untitled%20folder/Toolbox_template_15_Oct_2010.html
The code for the floated element in the IE specific css is :
article {
height: auto;
/* for IE */
width: 45%;
background:#ddd;
color:#5e7497;
float:left;
margin:0 18px 22px 0;
padding:15px 15px 65px;
border:#abb9d8 1px solid;
}
No other elements on the page are floated.
In IE the first two boxes Overview and Links appear as expected. In the
second row however, the float somehow breaks and pushes the faq box down
and shifts the templates box to the right.
Oddly enough, adding additional text to the Links box fixes the float
position of the two boxes ... faq and templates.
Any hints or tips would be greatly appreciated.
For good measure the full IE specific .css is here:
http://dl.dropbox.com/u/2488267/untitled%20folder/toolboxIE.css
Thanks in advance,
Tony
__
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] Floats in IE6 ... again :-(
I found a solution, but it is not very elegant.
First I updated the css by changing the margin declaration for the
article element. Second I added a class of .left and applied it in the
HTML to the two article elements I wanted to place well ... on the left.
Here is the .css snippet :
article {
height: auto;
/* for IE */
width: 45%;
background:#ddd;
color:#5e7497;
float:left;
/* changed from margin:0 18px 24px 0; */
margin-bottom:24px;
padding:15px 15px 65px;
border:#abb9d8 1px solid;
}
/* added class to every other article element and gave them a right margin
*/
.left {
margin-right:24px;
}
and a link to a page which behaves in IE6. The .css linked below is
unchanged except from the lines above.
http://bit.ly/IE6fixed
I arrived at the solution mostly through trial and error and am not 100%
clear on what was wrong to begin with and how switching the margin
declarations fixed it.
If anyone cares to enlighten me, it would be appreciated :-)
/ Tony
On Wed, Oct 20, 2010 at 10:27 AM, Anthony L antl69or...@gmail.com wrote:
Hi,
I am having a problem with a floated element in IE6. Big surprise :o)
I have read many posts here as well as many of articles on the subject,
including this very recent one: http://bit.ly/clrfxReloaded , and have
tried , in vain, to apply what I thought I learned to my problem.
The page in question is here:
http://dl.dropbox.com/u/2488267/untitled%20folder/Toolbox_template_15_Oct_2010.html
The code for the floated element in the IE specific css is :
article {
height: auto;
/* for IE */
width: 45%;
background:#ddd;
color:#5e7497;
float:left;
margin:0 18px 22px 0;
padding:15px 15px 65px;
border:#abb9d8 1px solid;
}
No other elements on the page are floated.
In IE the first two boxes Overview and Links appear as expected. In the
second row however, the float somehow breaks and pushes the faq box down
and shifts the templates box to the right.
Oddly enough, adding additional text to the Links box fixes the float
position of the two boxes ... faq and templates.
Any hints or tips would be greatly appreciated.
For good measure the full IE specific .css is here:
http://dl.dropbox.com/u/2488267/untitled%20folder/toolboxIE.css
Thanks in advance,
Tony
__
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] Floats at the beginning of lists
Take a look at this page: http://www.indiana.edu/~intlserv/orientation/arrival_housing.php, and scroll down to the cab company list. In Firefox 3.6, the bullets appear correctly. However, that's the only place it's right. The problem, I believe, is that I've floated the first thing in the list. Because in Webkit (Chrome, and Safari, and Arora) the bullet shows up in front of the first non-floated element. In Opera, it shows up twice- once in front of the float, and once in front of the non-float. And in IE, there's no bullet at all. And of course, in IE6/7, the bullet's in the wrong place, AND the non-float is on a new line. I don't think I'm looking for a solution, actually, because this is the umpteenth problem I've run into with this structure. So I think I might just give up and re-work it. But it thought it might amuse you all to see something this screwed up. ---Tim __ 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] floats with margins
Hello all, I have a div container which has many floated images inside of it. The images have 10px bottom and right margins, so they can space out and look good. I noticed when I put a background color on the container that it contains the all the images, yay which brings me to my question... I also though noticed the bottom margins of the floated images affected the container, so it has 10px of space at the bottom. i dont want this. I assumed the margins would 'pop out' since i've seen that before (when the container or sibling div's don't contain padding/borders, i think it should do this default so margins 'collapse' ... But not sure for floats, they may not affect in same way). Anyway is there a way to stop the images margin from affecting parent? Thanks!, Ari __ 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] floats with margins
Ari Army wrote: Hello all, I have a div container which has many floated images inside of it. The images have 10px bottom and right margins, so they can space out and look good. I noticed when I put a background color on the container that it contains the all the images, yay which brings me to my question... I also though noticed the bottom margins of the floated images affected the container, so it has 10px of space at the bottom. i dont want this. I assumed the margins would 'pop out' since i've seen that before (when the container or sibling div's don't contain padding/borders, i think it should do this default so margins 'collapse' ... But not sure for floats, they may not affect in same way). Anyway is there a way to stop the images margin from affecting parent? Thanks!, Ari Hello Ari, please see. http://www.w3.org/TR/CSS21/box.html#collapsing-margins Two point from the part on vertical margins collapsing. Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children). Vertical margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children. Would the container happen to have a property that has established a block formatting contexts? http://www.w3.org/TR/CSS21/visuren.html#block-formatting To remove the 10px gap under the images, remove the margin:bottom. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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] floats with margins
You could create a class for the images on the bottom row img class=last
and change the padding on the bottom to img.last {padding-bottom: 0;}
The last row though may be populated by any number of images, as the site is
a dynamic CMS like Drupal, so if the thumbnail size changes (if the user
uploads a pic that is landscape alongside portrait pics, the pic is resized
to a height 100px so looks clean, but can't set a last row for this reason).
I could loop through the pics and put pretend 3 pics per row if the width
was the same, but then the rows don't look as neat as height-wise thumbnails
in my opinion.
To remove the 10px gap under the images, remove the margin:bottom.
Still want the images to be spaced out nice though, I'll try to think up
something. Doesn't look bad, friend just need would like the border-left on
the container to line up with the bottom of the images if possible, like
noticed how border sticks out of bottom here:
http://arianhojat.com/temp/float-bottom-margin.jpg
thanks!,
Ari
__
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] floats and clears
hey everyone,
i have recently started working on debugging a site that has a lot of messy
styling. i keep running into the following declarations on many different
elements.
.example {
float:left;
clear:both;
}
i was always under the impression that if you floated your elements that
essentially would clear them also. is that not the case? any help in
understanding this would be great.
thanks,
jeff
__
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] floats and clears
i was always under the impression that if you floated your elements that essentially would clear them also. is that not the case? any help in understanding this would be great. I believe not. I've use something like that, for example, when I have a float inside a float for example. I.e.: We have a child element inside a parent element and this parent element is floated to the left, but we want to float the child element to the right. If I don't clear the float on the child element, he will float to the left as well, so, to make the child element on the right side, of our parent left floated element we have to, on the child: 1st)clear the float, 2nd)float the element to the right. I could be wrong however, since this is just my experience talking, not knowledge so, to knowledge source: http://css.maxdesign.com.au/floatutorial/index.htm Regards, Márcio __ 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] floats and clears
i was always under the impression that if you floated your elements that
essentially would clear them also. is that not the case? any help in
understanding this would be great.
That is not the case. Floating an element means that it will shrink to fit its
contents (or shrink to the width you gave it) and let other stuff come up next
to it. So, let's say I have 3 divs.
div id=div1 class=col
/div
div id=div2 class=col
/div
div id=div3 class=col
And I style them like this:
div.col {
float: left;
width: 33%;
}
Then I end up with a three column layout. The first div takes up a third of
the page. Then, since there's enough room for the second div up next to the
first one, it floats up to take up some space. And then, since there's still
room next to the second one, the third div also floats up.
But let's say I wanted div 3 not to float up, but to stay below div 1.
Then if I add
div#div3 {
clear: left;
}
Then it won't float up next to the left floated divs.
I could also do this instead (same html):
Div#div1 {float: right}
Div#div2 {float: right}
Div#div3 {float: right; clear: left}
I this case, div1 one will be on the far right side, div 2 will be floated up
next to div1 in the middle, and div three will be floated up next to div 2 on
the left side.
But we told it to clear!
But we told it to clear LEFT. It's below all the things there are floated left
(because there aren't any. Everything is floated right). If we clear: right,
then it'll drop below divs 1 and 2 again.
Now, let's do clear: both.
Same HTML.
div#div1 {float: left}
div#div2 {float: right}
now div1 is on the left side, and div2 is on the right side, and div three
(since it's not floated) comes up between those two divs, and then continues
wrapping below them, like this:
content of div content of div3 div 2 content
1. content of content of div3
Div 1. Content of div 3 content of div3
Content of dive content of div 3
Content of div 3. Content of dive 3 content of d
If you set div3 to clear right, then it'll start below div 2, like this:
content of divdiv 2 content
1. content of
Div 1. Content of div 3 content of div3
Content of dive content of div 3
Content of div 3. Content of dive 3 content of d
If you set div3 to clear both, it'll start below both divs, like this:
content of divdiv 2 content
1. content of
Div 1.
Content of div 3. Content of dive 3 content of d
This is the same as clear: left in this case. But if div2 had more content,
then clear left would start below div1, and bump up against div2.
That was really long, but I think it's about as clear as I could make it.
---Tim
__
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] floats and clears
On Fri, Sep 18, 2009 at 10:48 AM, Climis, Tim tcli...@indiana.edu wrote:
i was always under the impression that if you floated your elements that
essentially would clear them also. is that not the case? any help in
understanding this would be great.
That is not the case. Floating an element means that it will shrink to fit
its contents (or shrink to the width you gave it) and let other stuff come
up next to it. So, let's say I have 3 divs.
div id=div1 class=col
/div
div id=div2 class=col
/div
div id=div3 class=col
And I style them like this:
div.col {
float: left;
width: 33%;
}
Then I end up with a three column layout. The first div takes up a third
of the page. Then, since there's enough room for the second div up next to
the first one, it floats up to take up some space. And then, since there's
still room next to the second one, the third div also floats up.
But let's say I wanted div 3 not to float up, but to stay below div 1.
Then if I add
div#div3 {
clear: left;
}
Then it won't float up next to the left floated divs.
I could also do this instead (same html):
Div#div1 {float: right}
Div#div2 {float: right}
Div#div3 {float: right; clear: left}
I this case, div1 one will be on the far right side, div 2 will be floated
up next to div1 in the middle, and div three will be floated up next to div
2 on the left side.
But we told it to clear!
But we told it to clear LEFT. It's below all the things there are floated
left (because there aren't any. Everything is floated right). If we clear:
right, then it'll drop below divs 1 and 2 again.
Now, let's do clear: both.
Same HTML.
div#div1 {float: left}
div#div2 {float: right}
now div1 is on the left side, and div2 is on the right side, and div three
(since it's not floated) comes up between those two divs, and then continues
wrapping below them, like this:
content of div content of div3 div 2 content
1. content of content of div3
Div 1. Content of div 3 content of div3
Content of dive content of div 3
Content of div 3. Content of dive 3 content of d
If you set div3 to clear right, then it'll start below div 2, like this:
content of divdiv 2 content
1. content of
Div 1. Content of div 3 content of div3
Content of dive content of div 3
Content of div 3. Content of dive 3 content of d
If you set div3 to clear both, it'll start below both divs, like this:
content of divdiv 2 content
1. content of
Div 1.
Content of div 3. Content of dive 3 content of d
This is the same as clear: left in this case. But if div2 had more
content, then clear left would start below div1, and bump up against div2.
That was really long, but I think it's about as clear as I could make it.
---Tim
Tim,
thanks for the detailed explanation. this helps a lot and i can definitely
move forward with the debugging with a better grasp on how i'll need to use
my floats and clears.
Cheers,
Jeff
__
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] Floats without width?
To take this in a slightly different track... On the page given at http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#floats it says: A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). Is it correct to understand this statement to mean that if what is being floated is a replaced element that has it's width given in the html element, then the width does not need to be declared in the CSS rule? -- Brian __ 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] Floats without width?
On Jul 1, 2009, at 1:57 PM, Brian Funk wrote: http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#floats it says: A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). Is it correct to understand this statement to mean that if what is being floated is a replaced element that has it's width given in the html element, then the width does not need to be declared in the CSS rule? That would be a correct reading, yes. The other reason being that an img always has an intrinsic width. Note the link above points to the old CSS 2.0 text. What is implemented by current browsers is the CSS 2.1 text, linked to in my previous post. For more on width, read CSS2.1:10.2 (and subsequent 10.3) http://www.w3.org/TR/CSS21/visudet.html#the-width-property Philippe --- Philippe Wittenbergh http://l-c-n.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/
[css-d] Floats without width?
Hello again, sorry, I'm starting to be addict to the list. :s On the validation of this page http://www.cantinho.org/pt/cantinho-site/layout4_ups.html , here: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cantinho.o rg%2Fpt%2Fcantinho-site%2Flayout4_ups.htmlprofile=css21usermedium=allwarn ing=1lang=en-UK I get 3 warnings: They tell that, to float something, that something needs to have a width declared. However, I prefer to not declare width on the elements displayed as problematic on the validation. Is there a more valid way for doing it? Thanks once again, Márcio __ 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] Floats without width?
On Jun 30, 2009, at 10:34 AM, MEM wrote: On the validation of this page http://www.cantinho.org/pt/cantinho-site/layout4_ups.html , here: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cantinho.o rg%2Fpt%2Fcantinho-site %2Flayout4_ups.htmlprofile=css21usermedium=allwarn ing=1lang=en-UK I get 3 warnings: They tell that, to float something, that something needs to have a width declared. 1. it is a warning, not an error 2. CSS 2.0 actually required floated elements to have a width declared. This requirement has been dropped from CSS 2.1 in favour of a shrink-to-fit algo. http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#floats vs http://www.w3.org/TR/CSS21/visuren.html#floats http://www.w3.org/TR/CSS21/visudet.html#float-width 3. it is not necessarily a bad practice to assign a width to a floated element. Depending on the content of the floated element, rendering engines may differ on how wide the floated element is. Older rendering engines have problems with width-less floated elements. Philippe --- Philippe Wittenbergh http://l-c-n.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/
[css-d] floats and divs
I've attached a simple html page below. It is broken into TOP and BOTTOM
sections.
Here is the look I'm after. Notice the border:
FLOATING ELEMENTS on top
--
Normal elements in the bottom
Since the TOP is composed of a div with two floating elements, I think the
browser is giving it 0 space when drawing the borders. So this CSS rule:
div.TOP
{
border-bottom: 1px solid #c8c8c8;
clear: both;
}
doesn't draw the border beneath the TOP div, it draws it above ...
On a well-defined note, the BOTTOM div clearly starts beneath the TOP div (I
can make the BOTTOM element draw a border-top and that seems to work out
fine). So the browser knows where the TOP ends and the BOTTOM begins.
Unfortunately, its not always easy to simply draw a border on the element
following something like TOP. Who knows what might follow ... ul, span, etc
...
Obviously, div style=clear: both/ works if I put it in TOP after the
h1 and h4 sections. But that is not ideal. Is there a simple,
better, more standard way to make that div.TOP actually draw a border
beneath everything.
Again, the browser knows to paint BOTTOM div beneath the entire TOP div ...
so it has to have some idea of where the TOP Really ends ... which leads me
think there is a standard way to actually draw the border-bottom on the
div.TOP element.
Thanks,
-Luther
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleTest Float/title
style type=text/css
div.TOP
{
border-bottom: 1px solid #c8c8c8;
clear: both;
}
div.TOP h1,
div.TOP h4
{
float: left;
}
div.BOTTOM
{
background-color: #ef;
/* --- */
/* This works... */
/* border-top: 1px solid #c8c8c8;*/
/* --- */
clear: both;
padding: 1em;
}
/style
/head
body
div class=TOP
h1Welcome To the Top/h1h4About/h4
/div
div class=BOTTOM
pBorder above me /p
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
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] floats and divs
Luther Baker wrote:
Here is the look I'm after. Notice the border:
FLOATING ELEMENTS on top
--
Normal elements in the bottom
Make div.TOP expand to contain its floating children, for instance by
adding...
div.TOP { overflow: hidden;}
...and you'll get the border rendered where you want.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] floats and divs
Luther Baker wrote:
I've attached a simple html page below. It is broken into TOP and BOTTOM
sections.
Here is the look I'm after. Notice the border:
Clear the floats for all browsers. IE7 needs the min-height or the h1
descender will touch the rule.
div.TOP
{
overflow:hidden;
min-height:60px;
}
IE/6 needs height or h1 and h4 will be below the rule.
* html div.TOP
{
height:60px;
}/*IE/6*/
__
css-discuss [EMAIL PROTECTED]
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] floats and divs
Setting overflow worked great for firefox but as David suggested, IE
requires min-height or height to be set as well.
Thanks for the great help.
-Luther
On Sun, Sep 21, 2008 at 4:03 PM, David Laakso
[EMAIL PROTECTED]wrote:
Luther Baker wrote:
I've attached a simple html page below. It is broken into TOP and BOTTOM
sections.
Here is the look I'm after. Notice the border:
Clear the floats for all browsers. IE7 needs the min-height or the h1
descender will touch the rule.
div.TOP
{
overflow:hidden;
min-height:60px;
}
IE/6 needs height or h1 and h4 will be below the rule.
* html div.TOP
{
height:60px; }/*IE/6*/
__
css-discuss [EMAIL PROTECTED]
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] floats and IE
Hi, I have a few pages on my website that display images, or videos or even just a list of contacts that I have put in divs with the float attribute. They don't work (they don't stack up under themselves, they hide off to the right of the page) in Windows/IE7. I have looked into fixes online and I am very confused. At best I just need to add a width dimension on the #floatwrap div that I have wrapped either the #left55 (on the jc page) or the #floatleft (on the people page). On the video page I see I didn't even wrap the #left55 divs... They all work Mac/ FF or do I need a clear:after somewhere? OUY I am brain dead. Any help much appreciated. Thank you! Cynthia Links http://bio3d.colorado.edu/docs/jc.html http://bio3d.colorado.edu/docs/people.html http://bio3d.colorado.edu/docs/video.html css http://bio3d.colorado.edu/b3dsc.css __ css-discuss [EMAIL PROTECTED] 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] floats and IE
Cynthia Page wrote:
I have a few pages on my website that display images, or videos or
even just a list of contacts that I have put in divs with the float
attribute. They don't work (they don't stack up under themselves,
they hide off to the right of the page) in Windows/IE7.
Same in all IE/win versions, it seems.
or do I need a clear:after somewhere?
There's no such property/value in any existing standard.
Only checked this page: http://bio3d.colorado.edu/docs/jc.html
Add a 'hasLayout' trigger...
#floatwrap {
height: 1%;
}
...and delete the following 'clear: right'...
.floatleft {
clear: right;
}
.left55 {
clear: right;
}
...since they upset IE/win' tender feelings :-) and doesn't do anything
useful anyway since there's nothing to clear in that direction.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] floats and IE
Cynthia Page wrote:
They don't work (they don't stack up under themselves, they hide off to the
right of the page) in Windows/IE7.
added
width:auto;
removed
clear:right;
#floatwrap {
width:auto;
overflow: hidden;
margin: 10px;
border: thin solid #FF6600;
}
Cheers and good luck ;)
SCL
__
css-discuss [EMAIL PROTECTED]
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] floats and IE
Shawn Lawler wrote:
#floatwrap {
width:auto;
overflow: hidden;
margin: 10px;
border: thin solid #FF6600;
}
In case it matters: that won't work properly in IE6.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] floats and IE
Dear Shawn and Georg,
Thanks so much!
Will this not work in IE6 because of width:auto? Does one need to declare the
height:1%, and is this for the HasLayout trick?
Cheers, Cynthia
- Original Message
From: Gunlaug Sørtun [EMAIL PROTECTED]
To: Shawn Lawler [EMAIL PROTECTED]
Cc: Cynthia Page [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Sent: Sunday, December 2, 2007 7:59:29 PM
Subject: Re: [css-d] floats and IE
Shawn Lawler wrote:
#floatwrap {
width:auto;
overflow: hidden;
margin: 10px;
border: thin solid #FF6600;
}
In case it matters: that won't work properly in IE6.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] floats and IE
Whoops, I did want the jc page to line up the cover images horizontally
according to the width of the content div. As here
http://hoengerlab.colorado.edu/b3d/docs/jc.html. It looks like now they just
stack up one image above the other hortizonally
http://bio3d.colorado.edu/docs/jc.html. I want them to go 2,3, or 4 across
depending on how large the browser window is. I would like this same effect for
the video and you can see that here http://bio3d.colorado.edu/docs/video.html
Thanks again
Cynthia
- Original Message
From: Gunlaug Sørtun [EMAIL PROTECTED]
To: Shawn Lawler [EMAIL PROTECTED]
Cc: Cynthia Page [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Sent: Sunday, December 2, 2007 7:59:29 PM
Subject: Re: [css-d] floats and IE
Shawn Lawler wrote:
#floatwrap {
width:auto;
overflow: hidden;
margin: 10px;
border: thin solid #FF6600;
}
In case it matters: that won't work properly in IE6.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] floats and IE
Cynthia Page wrote:
Dear Shawn and Georg,
Thanks so much!
Will this not work in IE6 because of width:auto? Does one need to
declare the height:1%, and is this for the HasLayout trick?
IE/win (all versions) needs a 'hasLayout'[1] trigger on that #floatwrap,
and 'overflow: hidden' only acts as such a trigger in IE7, while
'height: 1%' acts as a 'hasLayout' trigger in all versions.
The 'width: auto' is default, and doesn't have to be written since
IE/win understands that much anyway.
Note that the combination of 'overflow: hidden' and 'height: (any
value)' may result in hidden content in some even older IE/win versions.
The safest solution is actually to write two sets of styles...
#floatwrap {
overflow: hidden;
margin: 10px;
border: thin solid #FF6600;
}
* html #floatwrap {
overflow: visible;
height: 1%;
}
...to make it work reliable in all IE/win versions.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] floats and IE
Cynthia Page wrote:
Whoops, I did want the jc page to line up the cover images horizontally
according to the width of the content div. As here
http://hoengerlab.colorado.edu/b3d/docs/jc.html. It looks like now they just
stack up one image above the other hortizonally
http://bio3d.colorado.edu/docs/jc.html. I want them to go 2,3, or 4 across
depending on how large the browser window is. I would like this same effect
for the video and you can see that here
http://bio3d.colorado.edu/docs/video.html
Thanks again
Cynthia
Looks like when you made your last edit you nixed an ';'.
.left55 {
margin: 10px;
padding: 5px add the ';' and it works fine ;)
float: left;
padding: 0px 2px;
border: 1px solid #FF6600;
}
note: you've got padding specified twice in that rule.
The styles should work for your video page as well (although I confess
I've never tried it with embedded quicktimes before).
SCL
__
css-discuss [EMAIL PROTECTED]
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] floats and div widths
On 07/09/2007 15:06, Cynthia Page wrote: Also is it appropriate to ask such a basic question on this list? Absolutely. We have all levels of experience on the list. -- http://antanova.blogspot.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floats and div widths
I am experimenting with layout for divs containing images and text. The outer div will go inside a three column layout. My question concerns floating and clearing images in divs, nested within a floating div. Should I float an image left and clear right to make the text stay to the right of the image, and if I declare a pixel width for the image with padding will I have problems with IE displaying the whole image? I have an example posted. Also is it appropriate to ask such a basic question on this list? Thanks, Cynthia http://hoengerlab.colorado.edu/testfloat/float.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats and div widths
Cynthia Page wrote: I am experimenting with layout for divs containing images and text. The outer div will go inside a three column layout. My question concerns floating and clearing images in divs, nested within a floating div. Should I float an image left and clear right to make the text stay to the right of the image, and if I declare a pixel width for the image with padding will I have problems with IE displaying the whole image? I have an example posted. Also is it appropriate to ask such a basic question on this list? Thanks, Cynthia http://hoengerlab.colorado.edu/testfloat/float.html All questions dealing with CSS are appropriate. And your question is anything but basic. The simple answer is what you have works cross browser (don't forget to validate). The practical problems arise in putting that inside a 3 col layout and keeping the float from dropping at narrow window widths (800 or less) and user discretion with font-scaling and side bar use at all window sizes -- /particularly in iE/. It is some what dependent on your base 3col layout-- a fixed width 750px layout may easier to cope with. This [1]is a crude sample of your stuff insie a 3c layout. See source for changes made. Others on the list may have more pertinent advice. [1] http://www.chelseacreekstudio.com/ca/cssd/5col.html Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floats
Generator Microsoft Word 11 (filtered medium) Hi I' ve recently started to try and make my css fluid using floats and %. Everything is fine until I resize the window (make it smaller) and then all images on pages drop below the page text! I' ve tried adding a % value to my images so they resize with the page but I can' t work out the exact % in order to keep the same image resolution. What am I doing wrong? Regards Gary __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats
Gary Williamson wrote: Generator Microsoft Word 11 (filtered medium) Hi I' ve recently started to try and make my css fluid using floats and %. Everything is fine until I resize the window (make it smaller) and then all images on pages drop below the page text! I' ve tried adding a % value to my images so they resize with the page but I can' t work out the exact % in order to keep the same image resolution. What am I doing wrong? Regards Gary Gary, Without a clickable link to your page or a test case page, it really is impossible to offer a solution-- there are often too many variables for one solution to fit every layout. Adding a percent width to the images may compound the issue. Try setting the width and height of the image in pixels. Sometimes adding 'max-width: 96%;' helps if the problem is in compliant browsers. For IE it gets more tricky. Try adding 'overflow-x: hidden;' to the selector that is the immediate parent (container) of the image (s) . Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floats in floats
Hi All,
Having a little problem with clearing multiple nested floats.
Take the following (simplified) markup:
div id=wrapper
div id=itemmeta
div id=itemimage
img src= /
div id=prodform
form
div class=frmleft
/div
div class=frmright
/div
/form
/div
/div
/div
h1/h1
h2/h2
p/p
/div
relevant CSS:
#itemmeta {float: left; }
#itemimage { /* no display markup, just text coloring and padding here */ }
#prodform {/* no display markup, just text coloring and padding here
*/ }
.frmleft {float: left; }
.frmright {float: right;}
How i want this to display is as follows:
|---
| image | h1
|| h2
||--|| p
|| frmleft | frmright || more p...
|| ||| more p...
|| (need a clear here)|| more p...
||--|| more p...
| more p...
| more p...
|---
But it's doing this, even without the clearing element:
|---
| image |
||
||--||
|| frmleft | frmright ||
|| |||
|| (need a clear here)||
||--||
| h1
| h2
| p
| more p...
| more p...
|---
How do i float, within my float, without messing up the outer float?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floats proving a problem
Hi All Thanks so much for all the help I have received in the past. I am now trying to sort out my own site but cannot seem to get the floats to work properly! The site is at: http://www.cregy.co.uk/ http://www.cregy.co.uk/wp-content/themes/snails/style.css The issue is the sidebar float! Why doesn't it sit in line with the top of the content please? Many thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats proving a problem
Hi Richard, Let the #sidebar flows in their actual place, i. e. unfloat the #sidebar and assign width=100% for #container. Mauricio Samy Silva - Original Message - From: Richard Brown [EMAIL PROTECTED] To: CSS-Discuss css-d@lists.css-discuss.org Sent: Wednesday, April 11, 2007 9:12 AM Subject: [css-d] Floats proving a problem Hi All Thanks so much for all the help I have received in the past. I am now trying to sort out my own site but cannot seem to get the floats to work properly! The site is at: http://www.cregy.co.uk/ http://www.cregy.co.uk/wp-content/themes/snails/style.css The issue is the sidebar float! Why doesn't it sit in line with the top of the content please? Many thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats proving a problem
Hi Mauricio On 11/04/07, Mauricio Samy Silva [EMAIL PROTECTED] wrote: Hi Richard, Let the #sidebar flows in their actual place, i. e. unfloat the #sidebar and assign width=100% for #container. Thanks so much for all the help I have received in the past. I am now trying to sort out my own site but cannot seem to get the floats to work properly! The site is at: http://www.cregy.co.uk/ http://www.cregy.co.uk/wp-content/themes/snails/style.css The issue is the sidebar float! Why doesn't it sit in line with the top of the content please? Perfect and thanks for your help. It's easy when you see how! -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floats inside a div
http://www.redroosterweb.com/floats.html How do I, or can I make a container div actually contain a other floated divs and it's height is determined by the contents of the divs contained within it. What I mean is, the page linked above, if I add a height to the 'featured' div it looks like it's height is determined by the contents of the divs contained within it. Can I do this without the height attrib.? Thanks, - D __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats inside a div
http://www.redroosterweb.com/floats.html How do I, or can I make a container div actually contain a other floated divs and it's height is determined by the contents of the divs contained within it. Float it. For details see our esteemed moderator's article: http://www.complexspiral.com/publications/containing-floats/ Regards, Nigel ... Nigel M. Duckworth One Network Enterprises www.onenetwork.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats inside a div
This is a typical clearing floats issue.
Set:
#featured {
overflow: auto;
width: 100%
...actual rules...
}
See: http://annevankesteren.nl/2005/03/clearing-floats for further
information.
There are tons of fixes:
Make Google search for: 'Clearing floats'
PS: There isn't attributes in the CSS sintax.
'height' is a CSS *property*.
The sintax for a CSS rule is:
selector { property: value;}
The pair property: value is called CSS *declaration*
Regards,
Maurício Samy Silva
http://www.maujor.com/
- Original Message -
From: List Red Rooster [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Thursday, March 29, 2007 4:37 PM
Subject: [css-d] floats inside a div
http://www.redroosterweb.com/floats.html
How do I, or can I make a container div actually contain a other floated
divs and it's height is determined by the contents of the divs contained
within it.
What I mean is, the page linked above, if I add a height to the
'featured' div it looks like it's height is determined by the contents
of the divs contained within it. Can I do this without the height attrib.?
Thanks,
- D
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats inside a div
Duckworth, Nigel wrote: http://www.redroosterweb.com/floats.html How do I, or can I make a container div actually contain a other floated divs and it's height is determined by the contents of the divs contained within it. Float it. For details see our esteemed moderator's article: http://www.complexspiral.com/publications/containing-floats/ Regards, Nigel ... Nigel M. Duckworth One Network Enterprises www.onenetwork.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Thank you all for you help. - D __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats and Overflow
Tribou, Eric wrote: Anyone using floated layouts have any tricks to share regarding the use of images or other objects within your floats that go wider than the float allows? That seems to be my biggest problem; things like images are thrown into columns that get too narrow and force columns to drop/wrap. I've used some tricks like negative right margins on images to fake their width to 0 or setting an image as the background to a 100% wide DIV. Hopefully there are tricks out there I'm just not aware of. Any suggestions you might offer would be appreciated. Certain types of negative margin layouts will allow some browsers to auto-expand divs and prevent them from wrapping down, generating a horizontal scrollbar instead. Here's a really simple example: http://www.pixelsurge.com/experiment/negative_margins_2.html In IE6, the yellow div with the big image stays propped open to the width of that image. In FF, it doesn't stay propped open, but at least the side float doesn't drop down or get overlapped. If you want FF to stay propped open too, you can feed it its own style sheet using table display values. I wrote an article on this a while back: http://www.communitymx.com/abstract.cfm?cid=EB8C5 But, this article was written before IE7 came out. Unfortunately, IE7 no longer has IE6's bug of auto expansion, nor does it have FF's support for table display values. Does this mean this method is dead? Perhaps. I haven't had a chance to play with it since IE7 came out. The best solution, of course, is to not let your structure get too small for your content, or to not put content that is too big for your structure into it. In other words, design for your content. The typical min-width solutions apply here. By the way, to start a new thread, do not reply to an existing message. When you do this, your message gets threaded on to the old thread, which messes up the archives and makes it less likely that others will see your message and subsequently reply to you. You must send a new message with an appropriate and descriptive subject line to css-d@lists.css-discuss.org in order to start a new thread. Thank you for your cooperation and participation. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floats and Overflow
Anyone using floated layouts have any tricks to share regarding the use of images or other objects within your floats that go wider than the float allows? That seems to be my biggest problem; things like images are thrown into columns that get too narrow and force columns to drop/wrap. I've used some tricks like negative right margins on images to fake their width to 0 or setting an image as the background to a 100% wide DIV. Hopefully there are tricks out there I'm just not aware of. Any suggestions you might offer would be appreciated. -- Eric Tribou The Forgettable Mister Ruthsarian __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats and Overflow
Tribou, Eric wrote:
Anyone using floated layouts have any tricks to share regarding the use of
images or other objects within your floats that go wider than the float
allows? That seems to be my biggest problem; things like images are thrown
into columns that get too narrow and force columns to drop/wrap.
Eric Tribou
Don't know if this will work in your particular situation, but this
(thanks to Georg Sortun) has worked for me:
img { max-width: 96%; height: auto; )
Best,
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats and Overflow
On Jan 30, 2007, at 6:40 AM, Tribou, Eric wrote: Anyone using floated layouts have any tricks to share regarding the use of images or other objects within your floats that go wider than the float allows? That seems to be my biggest problem; things like images are thrown into columns that get too narrow and force columns to drop/wrap. I've used some tricks like negative right margins on images to fake their width to 0 or setting an image as the background to a 100% wide DIV. Hopefully there are tricks out there I'm just not aware of. Any suggestions you might offer would be appreciated. No one-size-fits-it-all answers, I think. Context ? Browsers ? The already mentioned 'max-width:96%' can help for browsers that support it (although those browsers have less problems with what you describe). For iExploder 6 and lower, a well placed 'overflow-x:hidden' [1] can save the day. It might need a 'width' (layout-trigger) to go width it. [1] best on the most direct parent of the image. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats and 100% height ...
Grady Kelly wrote: I am building a UI for a web application. I am using 100% heights for a lot of the outer elements, like this: wrapper - this has 100% height div1 - this has 100% height/div1 div2 - this has 100% height/div2 div3 - this has 100% height/div3 /wrapper this works all fine and dandy. the problem that I am having however, is with divs inside div1, div2 and div3. When I give these divs 100% height, they end up being 100% the height of the browser window, not the containing div. When viewed in a browser, I end up with a certain number of pixels whitespace at the bottom of the page. That make sense? Is there a way to give divs 100% height of their parent? That's what they are doing. Their parents have a height equivalent to the browser viewport because *their* parents (wrapper, and then body, and then html) have a height equivalent to the browser viewport because that's what 100% equals when there's no parent with a height other than viewport set. They each fill up their parent, and you haven't told any of them to *not* be the height of the viewport. We'll need to see a page to figure out what height you really want and help you set it. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floats and 100% height ...
Hello ... I am building a UI for a web application. I am using 100% heights for a lot of the outer elements, like this: wrapper - this has 100% height div1 - this has 100% height/div1 div2 - this has 100% height/div2 div3 - this has 100% height/div3 /wrapper this works all fine and dandy. the problem that I am having however, is with divs inside div1, div2 and div3. When I give these divs 100% height, they end up being 100% the height of the browser window, not the containing div. When viewed in a browser, I end up with a certain number of pixels whitespace at the bottom of the page. That make sense? Is there a way to give divs 100% height of their parent? Thanks, Grady Kelly [EMAIL PROTECTED] http://simpledesign.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats and 100% height ...
Do you have an example page? On 1/25/07, Grady Kelly [EMAIL PROTECTED] wrote: Hello ... I am building a UI for a web application. I am using 100% heights for a lot of the outer elements, like this: wrapper - this has 100% height div1 - this has 100% height/div1 div2 - this has 100% height/div2 div3 - this has 100% height/div3 /wrapper this works all fine and dandy. the problem that I am having however, is with divs inside div1, div2 and div3. When I give these divs 100% height, they end up being 100% the height of the browser window, not the containing div. When viewed in a browser, I end up with a certain number of pixels whitespace at the bottom of the page. That make sense? Is there a way to give divs 100% height of their parent? Thanks, Grady Kelly [EMAIL PROTECTED] http://simpledesign.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats not clearing properly in IE7?
On 1/1/07, Web Developer [EMAIL PROTECTED] wrote: Hello all, I think some things aren't being cleared properly in a webpage I made for a friend, it works in FF, and i rmemeber it worked in IE6. Seems like IE7 is goofing? Not sure where my mistake is, I manually clear the floats with a div whose class=clearFloat you can see if you inspect the code. These pages specifically don't work... http://www.azizshabani.com/music.html http://www.azizshabani.com/images.html Any guidance is appreciated, thanks, Arian The conditional comment is pulling in iehacks.css. Change the conditional to !--[if lt IE 7.0] dcm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floats not clearing properly in IE7?
Hello all, I think some things aren't being cleared properly in a webpage I made for a friend, it works in FF, and i rmemeber it worked in IE6. Seems like IE7 is goofing? Not sure where my mistake is, I manually clear the floats with a div whose class=clearFloat you can see if you inspect the code. These pages specifically don't work... http://www.azizshabani.com/music.html http://www.azizshabani.com/images.html Any guidance is appreciated, thanks, Arian __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floats not floating in IE
Hi all,
So in my quest to use less absolute positioning (why, because I
wanted to try it.) I've come up against some floats not floating next
to each other. I've written a short test page here, and the css is in
page.
http://www.tonedeafstudios.com/test/test21.html
And here is the very short code.
CODE--
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
titleUntitled/title
style type=text/css title=text/css
/* ![CDATA[ */
html, body {
padding: 0;
margin: 0;
}
body {
font-size: 12px;
font-family: Trebuchet MS, Gill Sans, Verdana, Tahoma, sans-serif;
line-height: 150%;
color: #000;
background-color: #292b68;
min-width: 775px;
text-align: center;
}
#wrapper {
text-align: left;
margin-right: auto;
margin-left: auto;
position: relative;
width: 775px;
}
#header_left {
float: left;
background-color: green;
width: 171px;
height: 168px;
}
#header_right {
background-color: red;
width: 604px;
height: 168px;
margin-left: 171px;
}
/* ]] */
/style
/head
body
div id=wrapper
div id=header_left/div
div id=header_right/div
/div
/body
/html
/CODE-
It's one div floated left against another div, but in IE6 it floats
the div left, but then the adjacent div is kitty-corner to floated
div. I'm sure there is a bug in IE regarding this, but I've looked
and can't seem to find it.
The two divs have stated heights and widths and are enclosed in a
wrapper to center the whole thing on the page.
Any help would be great.
Thanks,
Mark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats not floating in IE
Mark:
This is quite an interesting case. Aparrently, applying hasLayout to the
#header_right element is causing a rendering bug in IE that is adding extra
space between the #header_left and #header_right elements. See the reference
below for a description of hasLayout and its effects in IE.
So, to solve this issue, you have two options:
1. Remove the style properties that are giving the element hasLayout
Width and height both trigger hasLayout in IE and in this case, width
is not necessary as your DIV is a block level element that will
automatically fill the remaining (604) pixels. So remove both to prevent
this issue. If it is absolutely necessary to define the height, use the 2nd
solution below.
2. Add a negative right margin to the #header_left element
This will cause the #header_right element to occupy the space removed by
the negative margin from the #header_left element. However, there is a
margin-left on the #header_right element which will cause the right
container to be displayed to the right of the left container.
So your style for the #header_right element should look like this:
#header_right {
background-color: red;
height: 168px;
margin-left: 171px;
}
I've tested this solution in: FF2, IE (7,6,5.5), Safari 2.0, Opera 9
PS: This technique of using negative margins is something I've used to
combat the float-drop problem often encountered in IE (see reference below).
References:
- http://www.positioniseverything.net/explorer/expandingboxbug.html
- http://www.satzansatz.de/cssd/onhavinglayout.html
On 11/29/06, Mark Wheeler [EMAIL PROTECTED] wrote:
Hi all,
So in my quest to use less absolute positioning (why, because I
wanted to try it.) I've come up against some floats not floating next
to each other. I've written a short test page here, and the css is in
page.
http://www.tonedeafstudios.com/test/test21.html
And here is the very short code.
CODE--
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
titleUntitled/title
style type=text/css title=text/css
/* ![CDATA[ */
html, body {
padding: 0;
margin: 0;
}
body {
font-size: 12px;
font-family: Trebuchet MS, Gill Sans, Verdana, Tahoma,
sans-serif;
line-height: 150%;
color: #000;
background-color: #292b68;
min-width: 775px;
text-align: center;
}
#wrapper {
text-align: left;
margin-right: auto;
margin-left: auto;
position: relative;
width: 775px;
}
#header_left {
float: left;
background-color: green;
width: 171px;
height: 168px;
}
#header_right {
background-color: red;
width: 604px;
height: 168px;
margin-left: 171px;
}
/* ]] */
/style
/head
body
div id=wrapper
div id=header_left/div
div id=header_right/div
/div
/body
/html
/CODE-
It's one div floated left against another div, but in IE6 it floats
the div left, but then the adjacent div is kitty-corner to floated
div. I'm sure there is a bug in IE regarding this, but I've looked
and can't seem to find it.
The two divs have stated heights and widths and are enclosed in a
wrapper to center the whole thing on the page.
Any help would be great.
Thanks,
Mark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats not floating in IE
Hi Andy,
Thanks for the reply. I've taken away the width attribute for
#header_right, and that brings the div back up, but now there is a
small break between the two divs. They should be flush. Is that where
the negative margin comes in on #header_left? I tried putting in a
-1px and -3px margin-right on #header_left, but it didn't help? What
am I missing here?
Thanks,
Mark
---
On Nov 29, 2006, at 10:18 AM, Andy Pemberton wrote:
Mark:
This is quite an interesting case. Aparrently, applying hasLayout
to the #header_right element is causing a rendering bug in IE that
is adding extra space between the #header_left and #header_right
elements. See the reference below for a description of hasLayout
and its effects in IE.
So, to solve this issue, you have two options:
1. Remove the style properties that are giving the element hasLayout
Width and height both trigger hasLayout in IE and in this
case, width is not necessary as your DIV is a block level element
that will automatically fill the remaining (604) pixels. So remove
both to prevent this issue. If it is absolutely necessary to define
the height, use the 2nd solution below.
2. Add a negative right margin to the #header_left element
This will cause the #header_right element to occupy the space
removed by the negative margin from the #header_left element.
However, there is a margin-left on the #header_right element which
will cause the right container to be displayed to the right of the
left container.
So your style for the #header_right element should look like this:
#header_right {
background-color: red;
height: 168px;
margin-left: 171px;
}
I've tested this solution in: FF2, IE (7,6,5.5), Safari 2.0, Opera 9
PS: This technique of using negative margins is something I've used
to combat the float-drop problem often encountered in IE (see
reference below).
References:
- http://www.positioniseverything.net/explorer/expandingboxbug.html
- http://www.satzansatz.de/cssd/onhavinglayout.html
On 11/29/06, Mark Wheeler [EMAIL PROTECTED] wrote:
Hi all,
So in my quest to use less absolute positioning (why, because I
wanted to try it.) I've come up against some floats not floating next
to each other. I've written a short test page here, and the css is in
page.
http://www.tonedeafstudios.com/test/test21.html
And here is the very short code.
CODE--
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
titleUntitled/title
style type=text/css title=text/css
/* ![CDATA[ */
html, body {
padding: 0;
margin: 0;
}
body {
font-size: 12px;
font-family: Trebuchet MS, Gill Sans, Verdana, Tahoma,
sans-serif;
line-height: 150%;
color: #000;
background-color: #292b68;
min-width: 775px;
text-align: center;
}
#wrapper {
text-align: left;
margin-right: auto;
margin-left: auto;
position: relative;
width: 775px;
}
#header_left {
float: left;
background-color: green;
width: 171px;
height: 168px;
}
#header_right {
background-color: red;
width: 604px;
height: 168px;
margin-left: 171px;
}
/* ]] */
/style
/head
body
div id=wrapper
div id=header_left/div
div id=header_right/div
/div
/body
/html
/CODE-
It's one div floated left against another div, but in IE6 it floats
the div left, but then the adjacent div is kitty-corner to floated
div. I'm sure there is a bug in IE regarding this, but I've looked
and can't seem to find it.
The two divs have stated heights and widths and are enclosed in a
wrapper to center the whole thing on the page.
Any help would be great.
Thanks,
Mark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats not floating in IE
Hi Andy,
Ok, I'm completely lost now. I'm sorry I'm not getting this. Here is
what I have for #header_right and #header_left;
#header_left {
float: left;
background-color: green;
width: 171px;
height: 168px;
}
#header_right {
background-color: red;
/* width: 604px;*/
height: 168px;
margin-left: 171px;
margin-right: -171px;
}
That produces no change in IE, still the small gap, and FF now makes
#header_right even longer. I'm sure your right in what you are
explaining, but I'm not getting it.
Mark
-
On Nov 29, 2006, at 12:46 PM, Andy Pemberton wrote:
Mark:
Add a negative margin equal to the width of the element. For
example, in your case, add margin-right:-171px to header_right.
Andy
On 11/29/06, Mark Wheeler [EMAIL PROTECTED] wrote:
Hi Andy,
Thanks for the reply. I've taken away the width attribute for
#header_right, and that brings the div back up, but now there is a
small break between the two divs. They should be flush. Is that
where the negative margin comes in on #header_left? I tried putting
in a -1px and -3px margin-right on #header_left, but it didn't
help? What am I missing here?
Thanks,
Mark
---
On Nov 29, 2006, at 10:18 AM, Andy Pemberton wrote:
Mark:
This is quite an interesting case. Aparrently, applying
hasLayout to the #header_right element is causing a rendering
bug in IE that is adding extra space between the #header_left and
#header_right elements. See the reference below for a description
of hasLayout and its effects in IE.
So, to solve this issue, you have two options:
1. Remove the style properties that are giving the element
hasLayout
Width and height both trigger hasLayout in IE and in this
case, width is not necessary as your DIV is a block level element
that will automatically fill the remaining (604) pixels. So remove
both to prevent this issue. If it is absolutely necessary to
define the height, use the 2nd solution below.
2. Add a negative right margin to the #header_left element
This will cause the #header_right element to occupy the space
removed by the negative margin from the #header_left element.
However, there is a margin-left on the #header_right element which
will cause the right container to be displayed to the right of the
left container.
So your style for the #header_right element should look like this:
#header_right {
background-color: red;
height: 168px;
margin-left: 171px;
}
I've tested this solution in: FF2, IE (7,6,5.5), Safari 2.0, Opera 9
PS: This technique of using negative margins is something I've
used to combat the float-drop problem often encountered in IE (see
reference below).
References:
- http://www.positioniseverything.net/explorer/expandingboxbug.html
- http://www.satzansatz.de/cssd/onhavinglayout.html
On 11/29/06, Mark Wheeler [EMAIL PROTECTED] wrote:
Hi all,
So in my quest to use less absolute positioning (why, because I
wanted to try it.) I've come up against some floats not floating next
to each other. I've written a short test page here, and the css is in
page.
http://www.tonedeafstudios.com/test/test21.html
And here is the very short code.
CODE--
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
titleUntitled/title
style type=text/css title=text/css
/* ![CDATA[ */
html, body {
padding: 0;
margin: 0;
}
body {
font-size: 12px;
font-family: Trebuchet MS, Gill Sans, Verdana, Tahoma,
sans-serif;
line-height: 150%;
color: #000;
background-color: #292b68;
min-width: 775px;
text-align: center;
}
#wrapper {
text-align: left;
margin-right: auto;
margin-left: auto;
position: relative;
width: 775px;
}
#header_left {
float: left;
background-color: green;
width: 171px;
height: 168px;
}
#header_right {
background-color: red;
width: 604px;
height: 168px;
margin-left: 171px;
}
/* ]] */
/style
/head
body
div id=wrapper
div id=header_left/div
div id=header_right/div
/div
/body
/html
/CODE-
It's one div floated left against another div, but in IE6 it floats
the div left, but then the adjacent div is kitty-corner to floated
div. I'm sure there is a bug in IE regarding this, but I've looked
and can't seem to find it.
The two divs have stated heights and widths and are enclosed in a
wrapper to center the whole thing on the page.
Any help would be great.
Thanks,
Mark
Re: [css-d] Floats not floating in IE
Mark Wheeler wrote:
So in my quest to use less absolute positioning (why, because I
wanted to try it.) I've come up against some floats not floating next
to each other. I've written a short test page here, and the css is in
page.
http://www.tonedeafstudios.com/test/test21.html
[ trimmed markup and css rec'd 12:10p ]
Any help would be great.
Try these changes to this selector for ie/6.0 (ie7.0 and compliant
browsers should be comfortable with this as well):
#header_right {
float: left; add
/*margin-left: 171px;*/ delete
}
Mark
Best,
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floats for Form Labels -- vertical alignment
I'm looking at the example for floating form labels at
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
and I find the labels get shifted up by a tiny amount.
In the The original form section the Name label is vertically
centered with the respect to the input box.
Under Positioning the form with CSS The Name label is shifted up
with respect to the input box (this is easier to notice when typing in
the field)
I see this in Firefox 2.0 and (more noticable) Safari 2.0.4 on a Mac.
Where does this come from; how can it be fixed?
_
The HTML
_
form action=#
plabel for=nameName/label input type=text id=name //p
plabel for=e-mailE-mail/label input type=text id=e-mail //p
pinput type=submit value=Submit //p
/form
_
The CSS
_
label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
.submit input
{
margin-left: 4.5em;
}
Stephan
--
Stephan Wehner
http://stephan.sugarmotor.org
http://stephansmap.org
http://www.trafficlife.com
http://www.buckmaster.ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats for Form Labels -- vertical alignment
On 24/11/06, Stephan Wehner [EMAIL PROTECTED] wrote: I'm looking at the example for floating form labels at http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml and I find the labels get shifted up by a tiny amount. In the The original form section the Name label is vertically centered with the respect to the input box. Under Positioning the form with CSS The Name label is shifted up with respect to the input box (this is easier to notice when typing in the field) Hi, I copied your exact HTML and CSS into a blank document and it shows up nicely. When I type in the boxes, the text is nicely aligned with the label. This is in FF1.5. Don't know about Safari. In the website you mention, the text in the box appears below the label (that is, if they were underlined, the lines would be broken up). However, if you are not happy with the way it is, you can adjust the position of the label text by adding line-height: 1.4em to the input rules. Change the number to get it as you want. Hope this helps, Rafael __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats for Form Labels -- vertical alignment
Thanks a lot -- I followed your suggestion and added line-height: 3ex; to the label rule and that looks good. Adding line-height: 3em; to the input rule made no difference. (This is Safari 2.0.4, and Firefox 2.0, and now also IE 6) But I don't understand why this is necessary. Without the float, the label and input field are vertically aligned. Stephan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats, fieldsets, and margins
Matt Tibbits wrote: I have a fieldset within a fieldset, I cannot put a top margin on the nested fieldset. Here’s a silly little example: HYPERLINK http://www.tibbits.ca/webdev/test.phphttp://www.tibbits.ca/webdev/test.php It doesn’t seem to matter whether or not there is text floated to the left of this nested fieldset element. I’m thinking that it probably has something to do with the preceeding inline element occurring in the form of a legend tag…but not really sure. Actually, when I removed the float on the label, it *did* recognize top margin in FF, so it seems to me it does matter whether there is text floated to the left of the fieldset. Now, whether it should matter is a different story. I don't think it should. I don't have time to test on other browsers to see where exactly this bug occurs. (Could you post a page with a top margin on the nested fieldset so it's easier to test please?) But I think you can change your markup and avoid the whole problem. You shouldn't have a label element sitting outside of a fieldset -- it can't label the fieldset. That's what the legend element is for. So, just get rid of that label entirely and make its text the legend of the nested fieldset instead of the select one text that is there now. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats, fieldsets, and margins
Matt Tibbits wrote: [...] http://www.tibbits.ca/webdev/test.phphttp://www.tibbits.ca/webdev/test.php It doesn’t seem to matter whether or not there is text floated to the left of this nested fieldset element. I’m thinking that it probably has something to do with the preceeding inline element occurring in the form of a legend tag…but not really sure. Can someone explain to me why this happens? Any suggestions on how to fix it would also be welcome. Hi Matt, I didn't get the stream of css-d mails the last day, so there is a retard somewhere and maybe I'm too late. ;-) - I cannot explain the why?, but did some playing with margins and paddings. The result is this: * Testpage 1 http://home.tiscali.nl/developerscorner/css-discuss/test-tibbits_form-legend-1.htm It is working in FF1.07 and IE6 on Win98SE, but ... not in Opera(8.01), while the original didn't come through in Opera either. * See Opera-sceenshot http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-tibbits_Opera8.01.gif. Floating the inner fieldset doesn't help. Seems Opera just cannot manage nested fieldsets. Then I removed the outer fieldset, and replaced it by an alternative common styling. The result is this: * Testpage 2 http://home.tiscali.nl/developerscorner/css-discuss/test-tibbits_form-legend-2.htm Now working in Opera8.01 too! And according to browsershots: in Opera9, in Safari on Mac, in FF1.5 on Linux, in IE7 on Win, and Konqueror on Linux: too! [1] :-) See: * http://browsershots.org/website/http://home.tiscali.nl/developerscorner/css-discuss/test-tibbits_form-legend-2.htm I hope you can use some of this. Succes and greetings, francky [1] for some of them fine tuning of the width of the form box (or input width) is needed. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floats, fieldsets, and margins
Hello again, Still working on forms and running into a bit of a problem… I have a fieldset within a fieldset, I cannot put a top margin on the nested fieldset. Here’s a silly little example: HYPERLINK http://www.tibbits.ca/webdev/test.phphttp://www.tibbits.ca/webdev/test.php It doesn’t seem to matter whether or not there is text floated to the left of this nested fieldset element. I’m thinking that it probably has something to do with the preceeding inline element occurring in the form of a legend tag…but not really sure. Can someone explain to me why this happens? Any suggestions on how to fix it would also be welcome. Thanks, Matt -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.408 / Virus Database: 268.13.5/483 - Release Date: 10/18/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floats getting hung up on previous row height differences
I am trying to create a table of contents where each entry consists of an image and some text to the right. I have a liquid layout so the number of entries in each row will vary. If a previous row has a short entry, because the image was smaller, the succeeding row will start under the short entry rather than at the beginning of the row. http://www.sandsmuseum.com/test/testcss3.html includes css and has been tidy'd and validated. I know I can put a huge height on the container but I am not sure what the maximum size is going to be. I also worry, perhaps needlessly about browser compatibility when specifying heights. I want the div's to flow, creating nice full rows (and columns,) without using tables of course... As a side issue, I prefer the text not float around the image but rather have the text appear as a single column. Is there an easy way to make this happen. I tried adding a huge bottom margin to the image to discourage text floating but that just added to the height and caused the rows to have a huge space between them. I am sure there is an easy answer and do not know why I am blocked, he says with a wry smile. Thanks for the help, Michael __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floats and lists
I was wondering if some of the veterans here have a good solution for the float next to the list problem. The floated left block next to the unfloated unordered list in particular. I know that the way it is rendered with background-image and list-style-image is to the standard and I know why it looks the way it does. Just wondering if anyone had found a work around. I had one that worked for 15 out of 16 cases but when you have to support macromedia Contribute you can only do so much for them (non technical people) to be able to edit the page. You can see the issue here http://www.vt.edu/research/ (FF gets it right) If anyone else has any pointers for the site that would be great. Tell me what we did wrong or could do better, esp people from Web Standards and accessibility. Nick -- Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats or margin alignment?
so for a two col layout as an example you would float the first col left and for the second col add margin-left to clear the first col, and add spacing, but there would be no need to float the sec col, right. Would that be the best approach? On 6/18/06, Ed Seehouse [EMAIL PROTECTED] wrote: On 6/18/06, Bruce Gilbert [EMAIL PROTECTED] wrote: I was just curious as to the benefits of floating divs, as opposed to aligning with margin spacing? It seems that floated elements often case floats drops and the floats need to be cleared etc. whereas margin somewhat more easy to manage. I'd say that if you can do it with margin adjustments that's the way to go. If you need to get a little more sophisticated then move to floats, but use them as sparingly as possible. For a two column layout you need just one float, for example, not two. -- Ed Seedhouse -- ::Bruce:: __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats or margin alignment?
On 6/19/06, Bruce Gilbert [EMAIL PROTECTED] wrote: so for a two col layout as an example you would float the first col left and for the second col add margin-left to clear the first col, and add spacing, but there would be no need to float the sec col, right. Would that be the best approach? Best is arguable, I suppose. It use it. It makes the main column scalable for text resizes and different resolutuions. It's less complex to me. I want to use as little positioning as possible because positioning is the least cross-browser robust part of most browser's CSS implementations. I try to use the natural flow of the elements on the page as much as possible, with as little positioning or floats as possible. Sort of a Go with the Flow approach. This is also the approach recommende on the CSS forum site at http://www.csscreator.com/css-forum/index.php, which is the main CSS forum I visit. I've learned a lot there. -- Ed Seedhouse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floats or margin alignment?
I was just curious as to the benefits of floating divs, as opposed to aligning with margin spacing? It seems that floated elements often case floats drops and the floats need to be cleared etc. whereas margin somewhat more easy to manage. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats or margin alignment?
On 6/18/06, Bruce Gilbert [EMAIL PROTECTED] wrote: I was just curious as to the benefits of floating divs, as opposed to aligning with margin spacing? It seems that floated elements often case floats drops and the floats need to be cleared etc. whereas margin somewhat more easy to manage. I'd say that if you can do it with margin adjustments that's the way to go. If you need to get a little more sophisticated then move to floats, but use them as sparingly as possible. For a two column layout you need just one float, for example, not two. -- Ed Seedhouse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floats and expanding vertically
Hi List --
I'm having a problem with a floating div expanding vertically to the
content.
Here is the structure:
container
div left
-- includes a float that SHOULD expand based on the amount of text
div right
/container
The floating div won't expand. I've tried clear: both, getting rid of
padding, etc.
Here's the css. Any input would be GREATLY appreciated.
CSS:
#productsDetailsContainer {
border-bottom: 1px solid #666;
width: 700px;
height: 100%;
}
.productsDetailsLeft {
width: 387px;
border: 1px solid #666;
}
.productsDetailsRight {
float: left;
position: relative;
width: 300px;
font-size: 14px;
clear: both;
}
Thanks,
Lisa
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats and expanding vertically
Hi List -- I'm having a problem with a floating div expanding vertically to the content. Here is the structure: container div left -- includes a float that SHOULD expand based on the amount of text div right /container Lisa, I apologize if your example structure was meant to symbolize your html rather than replicate it, but that's not correct html. It's not even xml, really, though it's closer to that than html. Try this: div id=productsDetailsContainer div class=productsDetailsLeft pincludes a float that SHOULD expand based on the amount of text/p /div div class=productsDetailsRight psomething else/p /div /div And use the same style you sent through in your email and everything should work a little better. Hope it helps. Bill || | Bill Brown | | Webmaster, MacNimble.com | | http://www.macnimble.com | | mailto:[EMAIL PROTECTED] | | Phone: 215-237-2037| || ___ $0 Web Hosting with up to 200MB web space, 1000 MB Transfer 10 Personalized POP and Web E-mail Accounts, and much more. Signup at www.doteasy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats making rows, not columns.
nooluyo? wrote: understood, it's working right now. but the problem is: how can i tell the width should be 100%-250px. :) because left column should be 250 px. and right column should be whatever there's left screen space. Don't float the right column, just give it a margin-left of 250px. -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floats making rows, not columns.
This page should be something like this:
Featured MagazinesMust Read
Headline
but everything keeps going under Featured Magazines Section.
You can see by yourself @ http://www.alpalp.com/css3/tablecss.html
what is wrong; i've already gave magazines-home float:left and mustread
float:left, so they should be columns, not rows.
any help greatly appreciated.
thanks,
alp
css
.content-main{
width:100%;
border-color:#00;
}
.magazines-home{
float:left;
width:250px;
}
.featuredmags{
background-color:#bed0eb;
width:250px;
}
.mustread{
float:left;
width:100%;
text-align:left;
}
css
cut
div class=content-main
!-- overall magazine block start--
div class=magazines-home
h1Featured Magazines/h1
!-- magazine block start --
div class=featuredmags
!-- repeat 3 times start--
div class=magframe-margin style=float:left;
div class=magimageimg
src=images/mags/national_enquirer.gif width=68 height=90 class=minimag
//div
div class=magframecontentDetails Magazinebr /
span class=magprice$9.97/span
span class=buyrounda href=buy.html
class=buynowBUY NOW/a/span
/div
/div
div class=magframe style=float:right;
div class=magimageimg
src=images/mags/national_enquirer.gif width=68 height=90 class=minimag
//div
div class=magframecontentDetails Magazinebr /
span class=magprice$9.97/span
span class=buyrounda href=buy.html
class=buynowBUY NOW/a/span
/div
/div
!-- repeat 3 times end --
/div
!-- magazine block end --
/div
!-- overall magazine block end --
div class=mustread
h1Must Read/h1
p class=headcontentVogue Magazine bla bla/p
h1Headline/h1
p class=headcontentLorem ipsum bla bla/p
/div
/div
cut
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats making rows, not columns.
the problem is your width: 100%; here:
.mustread{
float:left;
width:100%;
text-align:left;
}
if you tell it to be 100% width, it is going to bump down until it can
take up the whole 100%. whatever width you specify needs to take into
account the other columns you want.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats making rows, not columns.
nooluyo? wrote:
This page should be something like this:
Featured MagazinesMust Read
Headline
but everything keeps going under Featured Magazines Section.
You can see by yourself @
http://www.alpalp.com/css3/tablecss.html
what is wrong; i've already gave magazines-home float:left and
mustread
float:left, so they should be columns, not rows.
I see 3 rows of 2 magazines, and then the div.mustread below
them.
.mustread{
float:left;
width:100%;
If you want div.mustread to be next to div.magazines-home, you
need to take off the 100% width on div.mustread.
--
Els
http://locusmeus.com/
http://locusoptimus.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats making rows, not columns.
understood, it's working right now.
but the problem is:
how can i tell the width should be 100%-250px. :)
because left column should be 250 px. and right column should be
whatever there's left screen space.
thanks,
alp
cj wrote:
the problem is your width: 100%; here:
.mustread{
float:left;
width:100%;
text-align:left;
}
if you tell it to be 100% width, it is going to bump down until it can
take up the whole 100%. whatever width you specify needs to take into
account the other columns you want.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats making rows, not columns.
It looks like the width on mustread is set to 100% - too wide to fit
in the available space after the 1st column. Set it to something less than
the page width minus the 1st column. Btw, I find that setting borders on
things really helps to debug problems like this - you can see just what's
going on.
-Ann
- Original Message
From: nooluyo? [EMAIL PROTECTED]
This page should be something like this:
Featured MagazinesMust Read
Headline
but everything keeps going under Featured Magazines Section.
what is wrong; i've already gave magazines-home float:left and mustread
float:left, so they should be columns, not rows.
.mustread{
float:left;
width:100%;
text-align:left;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floats Vs Absolute positioning
Hi, Just wondering if anyone can give me some reasons why doing a three column layout with floats is 'better' than doing it with absolute positioning. I have finally achieved the layout I was trying to get by using a liquid center and two columns absolutely positioned, this was do-able with floats but didn't resize the way I wanted. I am not happy with using positioning instead of floats, but now that I think about it I amn't sure *why* exactly I have a preference for floating as a layout method. Anyone got good reasons for using one over the other or have I just picked up an irrational dislike for positioned layouts? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats Vs Absolute positioning
Eoin Maguire wrote: [...] I am not happy with using positioning instead of floats, but now that I think about it I amn't sure *why* exactly I have a preference for floating as a layout method. Anyone got good reasons for using one over the other or have I just picked up an irrational dislike for positioned layouts? I think we have rational reasons for preferring floats for main parts of layouts :-) short list Scaling and footers - font-resizing and/or changing amount of content across multiple columns: - we can clear scaling 'floats'. - we can't clear scaling 'a.p.'. Fluid page-width and varying window-width: - 'floats' can auto-linearize (those float-drops that some don't like) - 'a.p.' can't auto-linearize. Element-overlapping: - other elements do interact with 'floats', so overlapping can be prevented. - other elements don't interact with 'a.p.', so overlapping can't be prevented. /short list Personal experience: It is very easy to apply 'absolute positioning', but it's very hard to make layouts with any degree of complexity work well with 'a.p.'. It is sometimes hard to apply 'float-methods' for layouts with any degree of complexity, but once 'floats' work they tend to work well. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats Vs Absolute positioning
What about using relative positioning? How does that fit in to this argument? Thanks, Stephen - Original Message - From: Gunlaug Sørtun [EMAIL PROTECTED] Sent: Friday, May 19, 2006 11:59 AM Eoin Maguire wrote: [...] I am not happy with using positioning instead of floats, but now that I think about it I amn't sure *why* exactly I have a preference for floating as a layout method. Anyone got good reasons for using one over the other or have I just picked up an irrational dislike for positioned layouts? I think we have rational reasons for preferring floats for main parts of layouts :-) short list Scaling and footers - font-resizing and/or changing amount of content across multiple columns: - we can clear scaling 'floats'. - we can't clear scaling 'a.p.'. Fluid page-width and varying window-width: - 'floats' can auto-linearize (those float-drops that some don't like) - 'a.p.' can't auto-linearize. Element-overlapping: - other elements do interact with 'floats', so overlapping can be prevented. - other elements don't interact with 'a.p.', so overlapping can't be prevented. /short list Personal experience: It is very easy to apply 'absolute positioning', but it's very hard to make layouts with any degree of complexity work well with 'a.p.'. It is sometimes hard to apply 'float-methods' for layouts with any degree of complexity, but once 'floats' work they tend to work well. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats Vs Absolute positioning
Stevio wrote: What about using relative positioning? How does that fit in to this argument? It just complicates it ever so slightly, by altering the visual cues :-) Relative positioning can be used to offset any element - including 'floats', but 'r.p.' leaves the element's original space intact so 'r.p.' elements interacts with their environment. Layering 'r.p.' elements with 'z-index' don't remove their space, so they will still interact with their environment. We can of course also make 'floats', with added 'r.p.' if necessary, take up no space - like an 'a.p.' element. However, that's just another way to complicate 'floats' - for the designer - by altering the visual cues. 'Floats' will still act as 'floats'. Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats Vs Absolute positioning
Stevio wrote: What about using relative positioning? How does that fit in to this argument? Stephen, Relative positioning is mainly used to cure IE bugs, occasionally to shift elements from their normal position, but that's it. It's not used for creating columnar layouts because the element that is shifted leaves the space it would have taken up behind, which would create huge gaps in most designs. There are only three ways to create columnar layouts with CSS: 1. Floats 2. Absolute positioning (problematic) 3. Table display values (not supported by IE, even 7, so not in use much yet) One other thing: please make sure to trim your posts. The practice of including an entire quoted message below your added comments is really increases the size of your messages, making digests go out much more frequently. You must trim out all quoted material to which you are not directly replying, then add your comments above (discouraged) or below (greatly encouraged) the quoted material. This will really reduce the size of your messages and make many other people on the list a little happier. It's part of the list policies; see http://www.css-discuss.org/policies.html. Thanks, Zoe Gillenwater css-d list moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats and position type
Mark Fellowes wrote: One thing I haven't seen or read but curious about, can a float be positioned [relative, absolute, static, fixed]? http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo 9.7 Relationships between 'display', 'position', and 'float' ... if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', ... (please refer to the complete text and the table) meaning that a float can - be positioned relatively, - have position:static as default. but - position:absolute or fixed let float compute to 'none' Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats and content jumping
Eoin Maguire wrote: Hi, I'm working on a layout with 2 divs floating in a container div. The two divs float left and right so essentially they are two columns, however, I have it designed so that they only float side-by-side when the screen resolution expands to a certain point. The aim of this is that at 800X600 the two divs are one on top of the other, div1 contains text, div two contains graphics. Scenario 1 (at 800X600) should look like this: NAV DIV1 floated right DIV2 floated left At higher resolutions div1 (the text div) slides over to the right so now in Scenario 2 it looks like this: NAV DIV2 floated leftDIV1 floated right This is what I want to happen so that's fine. The problem I have is I can't get DIV1 to automatically expand to fill whatever amount of screen area it has. I think this is the reason why you can't accomplish this layout with pure CSS. You can add some Javascript in the mix, though. The technique is commonly called resolution dependent layout: http://www.themaninblue.com/writing/perspective/2004/09/21/ http://particletree.com/features/dynamic-resolution-dependent-layouts/ By the way, you probably didn't get any response to this thread because you replied to an existing thread instead of starting a new one. This buried your message, and messes up the archives. To start a new thread, please send a new message to [EMAIL PROTECTED] Thanks, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floats and content jumping
Hi, I'm working on a layout with 2 divs floating in a container div. The two divs float left and right so essentially they are two columns, however, I have it designed so that they only float side-by-side when the screen resolution expands to a certain point. The aim of this is that at 800X600 the two divs are one on top of the other, div1 contains text, div two contains graphics. Scenario 1 (at 800X600) should look like this: NAV DIV1 floated right DIV2 floated left At higher resolutions div1 (the text div) slides over to the right so now in Scenario 2 it looks like this: NAV DIV2 floated leftDIV1 floated right This is what I want to happen so that's fine. The problem I have is I can't get DIV1 to automatically expand to fill whatever amount of screen area it has. The only way I can get the above to function is to apply a fixed width to DIV1, which screws up the layout at 800X600, cause it ends up looking like this: NAV DIV1 floated right DIV2 floated left Div1 always ends up tucked off to the right side of the screen cause it's given a fixed with. Giving it 100% stops it from sitting nicely on top of DIV2 (it expands to fill all screen space available to it), using AUTO as the width gives the same problem. As this is only part of an overall layout the code is quite complex so I'm not really able to post it here or provide a live example. I hope this is clear enough, if not I'll try to put something together to illustrate what I'm on about. Cheers. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats and content jumping
Eoin, On Apr 25, 2006, at 6:13 AM, Eoin Maguire wrote: I'm working on a layout with 2 divs floating in a container div. The two divs float left and right so essentially they are two columns, however, I have it designed so that they only float side-by-side when the screen resolution expands to a certain point. The aim of this is that at 800X600 the two divs are one on top of the other... At higher resolutions div1 (the text div) slides over to the right... The problem I have is I can't get DIV1 to automatically expand to fill whatever amount of screen area it has. As this is only part of an overall layout the code is quite complex. Did you get an answer on this? I don't think there is a 100% solution. You are bumping up against how floats are supposed to work. You can minimize the problem for more css compliant browsers by leaving the width: auto; on div1 and setting max-width to the point at which you want to the side-by-side display to trigger (something like 900px - width of div2). Unfortunately this leaves out ie. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floats rising (was Re: Parallel texts)
Hello, all. Just a tiny detail, because I tripped with it some time ago: [...] Floats are supposed to rise up as far as they can. [...] Actually, A floating element's top may not be higher than the top of any earlier floating or block-level element, according to spec [ http://www.w3.org/TR/REC-CSS1.html#floating-elements ]. -- Saludos, Antonio http://www.mundoplus.tv/ Televisión por satélite en España __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats and border. How does this work?
On 2/10/06, Michiel van der Blonk [EMAIL PROTECTED] wrote:
For long I have been looking for the easiest way to create forms without
tables. I found several methods:
- floating
- position:absolute
- display:inline-block display:-moz-inline-box
All come with their own caveats and problems. The floating is usually
considered the best. However, it's not easy to align the input's under
each other.
The problem is usually that even if I give the label a width, it is not
used by the browser. Recently I found out that if I give the label a
little bit of padding, or an invisible border (color same as background)
that the inputs are suddenly aligned correctly in both IE and FF.
look at the difference between:
form {width:20em}
label {float:left;width:10em;margin-bottom:1em;}
input {float:left;}
and
form {width:20em}
label {float:left;width:10em;margin-bottom:1em;padding:1px}
input {float:left;}
for this html
form action=
labelName/labelinput
labelAddress/labelinput
labelEmail/labelinput
/form
I explained my methods here:
http://michiel.wordpress.com/2006/02/09/floating-forms/
I know that it works. I just would like to know why this works.
I think it is related to label being an inline element, and
therefore width not being valid for it. While floating it turns it
into a block element, some browsers develop bugs, particularly IE,
which are overcome when borders are defined (drawing borders forces
the rendering engine to calculate a width). It may be related to the
IE concept of haslayout()
Explicitly declaring display:block on label may be another fix.
--
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats dropping on text resize
[EMAIL PROTECTED] wrote: [...] Also, is there a way to avoid having the horizontal scroll bar? I have seen a few 2 column layouts that work well with multiple text increases (5+ clicks in FF) and don't get a horizontal scroll bar, but is there a way to avoid it with a 3 column layout? Thanks. :-) Site: http://www.girlscantwhat.com CSS: http://www.girlscantwhat.com/css/gcwcss.css Yes, sort of -- but not 5+clicks in FF -- a crude example http:dlaakso.com/sandbox/3cmaxmin/3c-max-min.html --600/1200 min-max width feeding 'expressions' to the evil one. Regards, ~davidLaakso __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
