Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
So, I have had many issues with floats in the past, which seem to have resolved themselves somehow. But now as I work on my most current project I encounter trouble again.
I am just laying the elements down to see how they work, it's a rough sketch if you will. What I want is the one column, with the photo and caption, to sit on the left, while the second column, with the header and text, is on the right.
I can never, however, remember what column gets the float, or if they both do, or how much extra space I need for the float to succeed. All I know is I can't seem to do it. If anyone else has a solution, I would love to A) hear it and B) commit it to memory. -
I’ve seen people approach this in two different ways.
Method one (what I would do) is have both columns float to one another. The design should determine how exactly they are floated and if they need to be within a container.
Method two is to have the main column not floated but with a left margin set to the width of the left column and then float the left column with float:left. -
- CommentAuthorNick Presta
- CommentTimeJan 26th 2006
There's two ways to use floats for a liquid design.
One way is to float your menu and give you content a margin on the side your menu is on. Your content will expand with resolution while your menu will always stay on one side.
REMEMBER: Floted objects appear on the page where they are in the document. Meaning that if you want to float a menu left and not float your content, your menu must appear before your content in the markup.
Or you could float both your menu and content by float: right and float: left; For the benefit of all browsers, don't try to have exact percentage matchups.
so like
#foo { width: 24.9%; float: right; }
#bar { width: 74.9%; float: left; } -
Well, I've gone ahead and done the second method of mrignlein, because I didn't quite get the first method.
The results are in. It succesfully floated, but now there appears to be a small problem with the bounding box. I gave the box a clear: left property, but that didn't do anything.
Would using the first method help? -
uh, while we're talkin about floats. i just wanna ask something.
why does a floated element always dissapear when placed next to an absolutely positioned elements? this only happens on IE....
i don't know is it just me, but i never heard people talkin about it, so i'd never bother finding a hack for it either.
usually i just apply a child selector hack.. the html>body #foo thingy...but i'm just curious on what's the cause of this mysterious dissapearance... -
It succesfully floated, but now there appears to be a small problem with the bounding box. I gave the box a clear: left property, but that didn't do anything.
Containers of floated items collapse as if the floated items weren't in them at all, putting a clear value on them doesn't relate to that problem at all.
Your options are to either put another element set to clear:both; inside the end of your container element (which is easy, but poop in terms of semantic markup). Or to use the Position is Everything method for clearing a container without additional structural markup. -
found an example gif from when I was having a related problem in the past...
In this sample the black box is the container. The red box is a header, the green boxes are both floated and the blue box is used to clear the floats to expand the container back out. It's decent if you need to use a seperate image at the end of your container or something. But I prefer sticking with the PiE fix when possible.
1 to 7 of 7