Since I am not a designer, but have been given duties as one, I was curious to how the clear attribute works. It would be helpful if someone has an example?
Thanks
To understand clear, you must understand floating. An excellent resource for learning both is Floatutorial, which includes this section on clear. To summarize:
clear: left : element is moved below the bottom outer edge of any earlier left-floating boxes - example
clear: right : element is moved below the bottom outer edge of any earlier right-floating boxes - example
clear: both : The element is moved below all floating boxes of earlier elements - example
Let's say you have three elements. The first one is floated to the left and contains quite a lot of text. The second and third one are relatively short (the combined length of both is shorter than the first one). In normal scenario, they both will be shown along the floated one. However, if you set clear:left on the third , it'll be shown after the first one, not beside it.
It is similar to when you use images with align="left" and you want something later on the page to be under the image, instead of beside. You'd use <br clear=all />
This basically does the same thing for DIVs when using the float: attribute. It forces the layout to end the floating.
I wish I had a good example... although I can try to explain it in simple terms.
clear: left; basically says "Put this element after all elements above it with the float: left; attribute"
clear: right; is the same thing but after float: right; elements.
clear: both; is the same thing but after both float: left; and float: right; elements.
Sometimes when you put an element such as a "div" under another floated element (using the "float" property), you want to disallow that floating element from doing so on one side or another of your cleared element.
<div style="float:right;">
// some text
</div>
<div style="clear:both;">
// some text
</div>
Of course you're better off putting the css into a separate file. As mentioned above this tutorial is good.
clearfix is a good tool to help you not have to deal with it.
This is the way it works ... when placing elements on the page, the browser will stack elements one on top of the other, vertical, top down. Let's now say if you want the elements to line up one after the other, horizontal, left to right (no stacking); you Float them. But if you want to Float the elements and keep one item on it's own line, stacked between the first and second set, use the .clear attribute. Each number below represents a html tag element (like a div or img)
Normal vertical element stacking; nofloat and no clear...
1
2
3
4
5
Horizontal element layout; float with no clear
1 2 3 4 5
Horizontal layout, with one vertical stack, then continue with horizontal layout; float has been placed on the third element
1 2 (float, no clear)
3 (float, clear)
4 5 (florat, no clear)
Happy floating...
The clear property is used to control the element flow in an HTML page when using the float property. It can be specified to clear either the left side, right side, both or none.
none - floating elements can
be placed on both sides of the
element
left - floating elements can
not be placed on the left side of
the element
right - floating elements can
not be placed on the right side
of the element
both - floating elements can
not be placed on the left and right
side of the element
Related
I'm having an annoying problem where my h elements (h2 for example) are floating after the previous elements.
I thought that h elements should just display block, aka, start on a new line? I guess I'm wrong. Also, am I wrong about what display: block means? I thought it meant that that div will take up all the space from left to right, which I thought would mean that it should start on a new line and when it's over with, the next element will also display on a new line.
I tried putting clear: both; and overflow: hidden; in the css of my h elements but it's not working.
The page looks like a mess with everything floating after each other, (right now just pictures and h2s). When I inspect the h2 elements in chrome (I'm viewing all this in chrome), the blue part, the actual element, is going all the way across, but my text isn't. The text is starting after the previous element.
I would like all of my h elements to always be on their own line, filling from left to right.
a screen shot of the issue
Thanks in advance!
The solution is to not only add the clear: both, but also overflow: auto to the container/parent element of the floating elements, so that it takes all the space the floating elements take.
So I'm pretty new to both css and html but this is not the first time that I have used floats to achieve 2 divs sitting next to each other. This time it is not working properly and I've been tinkering around for about 3 hours and I figure I should call on some help.
I have edited the portion of my website in jsFiddle to assist in describing my problem:
http://jsfiddle.net/9QRcP/10/
The problem isn't that you're not assigning your divs to float: right, but that your divs are small enough that you can fit multiple of them within the page width, so they're doing exactly what they should do.
To fix this, though, we would add clear:right to #about_side and #about_side_footer, but that won't force them to be level, so it doesn't quite fix the problem.
To fix that problem as well, instead of floating each individual piece of your #greeting_wrapper and #about_wrapper left and right, respectively, float the wrappers left and right instead.
#greeting_wrapper {
float: left;
}
#about_wrapper {
float: right;
}
#greeting_header, #greeting, #greeting_footer, #about_side_header, #about_side, #about_side_footer {
float: none;
}
I found that you need to float #greeting_wrapper and #about_wrapper. These wrappers are the important elements. As far as I can tell, the children of these divs shouldn't need to be floated as well.
Also currently those divs are taking on the width of the body which is 960px thus forcing both divs onto a new line.
I had a fiddle with your code: http://jsfiddle.net/9QRcP/15/
I haven't bothered to correct the alignment, but left is now on left and right is now on right.
By my own admission this isn't a very good approach to this. A few pointers:
you can use 'clear: left' to force an element on the left to move to a new line http://www.w3schools.com/cssref/pr_class_clear.asp
you should probably contain your left and right elements in 2 seperate containers (e.g. class="container left" and class="container-right" ). Clear left for any sub-element in the left container that you want to move to the next vertical level, and likewise for elements in the right container. This will allow you to easily break your page up into columns. Here 's one I prepared earlier http://jsfiddle.net/9QRcP/19/ from http://www.quirksmode.org/css/clearing.html
you could probably save yourself a lot of work by using a grid system, e.g. http://960.gs/
The issue is with the width of your wrapper. If you increase the width, the floated div will take its place on the right.
This fiddle demonstrates the problem.
I'm trying to align an image and a button to the right, on two separate lines, as a joint unit. I created a wrapper div ("right-stuff"), with position:relative, so I can use position:absolute on its child, the button.
The problem is I don't know of a good way to align the button to the right without hurting the height calculations.
What I did is give it position:absolute and right:0, but this removes it from the flow, and causes the container ("right-stuff") not to include it - see how the red background doesn't reach it, although it "should".
Another problem is that the next item in the flow after "right-stuff" will need a margin-top to be in the correct position, or otherwise I have to either give "right-stuff" a width I calculate myself, or an artifical margin (that takes into account the button height). Too much knowledge here.
Is there a better way to get both items to act as a coherent unit, that is "right aligned", but without taking things out of the flow?
Obviously this is not the first time someone has asked this question, but I haven't found an answer here that addresses these specific concerns without ugly hacks (like manually adding a margin-bottom equal to the button's height).
Edit: text-align is a decent solution (better than what I thought of anyway). One caveat: It assumes the button is indeed textual, and doesn't work on the image itself. This is ok in my example because the image is the widest thing in the container - but what if I had another element in the container that was wider than the image? How would I keep the image aligned to the right?
Yes, since both of those elements (img and button) are inline-block you can simply use text-align: right.
What's wrong with text-align right?
<div id="nContainer">
<div id="nRight-stuff">
<div id="nRight-img">
<img src="http://sharecare.files.wordpress.com/2008/04/cute-animals-1.jpg?w=490" />
</div>
<button id="nRight-btn">A right aligned button</button>
</div>
<br style="clear: both" />
</div>
#nRight-stuff {
float: right;
text-align: right;
}
Fiddle
check out the editted fiddle at http://jsfiddle.net/HXH5Z/4/
basically i've just brought the button back in the flow, but enclosed it in a div, aligning the content (text-align) to the right. The same could be achieved by just adding the text-align: right rule to the #right-stuff div, but i don't know if you also want the image to be aligned to the right inside that div...
I'm using a background image to add a custom bullet to list items in my content. In the content there are also images floated left. When an image and a list item are next to each other, the bullet appears where it would do if the image wasn't there, but the text wraps around the image.
Here is an example:
http://golf2.test.textmatters.com/content/greenkeepers/turfgrass/turfgrass_speci/cool_season_gra
is there a way to make the bullet appear where is should (i.e. next to the text)?
In Firebug / Firefox (you'll have to check other browsers) I solved your problem adding a:
li {
overflow:hidden;
}
Don't know why exactly, but that magical line solves lots of problems around floated stuff :-)
Edit: Solution if you can change the html slightly
If you have any control over the html, you could perhaps use paragraph tags instead of list items:
p.list_item {
background: transparent url(/++resource++stylesheets/images/bullet.gif) no-repeat scroll left 0.45em;
padding-left: 11px;
}
However, that would kind of change the semantic meaning of the list items...
This is an old topic... but thought I would add how I usually do this in case someone stumbles in here via a search...
If I have an image on the left, and plan to have graphic bulleted unordered list (UL) to the right of it, I place the image statement inside DIV tags, and add a float:left style to that DIV.
Then, I wrap my UL tags inside a DIV, and give that DIV a float:left style as well, causing it to appear to the right of the first DIV.
If I have additional text that I would like to resume UNDER my UL, then I give the second DIV a width that equals the total width of the page/column minus the graphic width - basically, to account for all of the space to the right of the image. That will force continuing text to flow directly under the UL DIV, and if the UL is shorter than the graphic, the text will flow to the right of the graphic and then under the graphic as expected.
If the UL extends lower than the graphic, then the text will just start under the image, as expected.
If you want the text to simply start UNDER the left graphic regardless of the height of the UL, then you could just apply a clear:both style to the ensuing , i.e.
In general this approach works so long as the UL isn't too much taller than the left image, because obviously in this scenario, the list itself isn't going to wrap under the image, leaving whitespace - so to make a long list look right may require some purposeful image sizing, or stacking a couple of images in the first DIV, or whatever other solution you might have.
If you really want to get whacky, I've had a few times where I've used the two DIV method described above, but setting the first DIV to position:relative, and placing the second DIV containing the UL INSIDE the first, with a position:absolute and of course top:??px and right:??px, set of course to absolutely position my UL to the right of the image. It takes the right kind of layout to use this method, obviously...
OK that's all I had to say, hope this makes sense & good luck to whomever!
Try wrapping your list items in a <p> tag, and then give that tag a left margin.
Why do you have div.fig width set to 0 in the html?
<div class="fig" style="width: 0px;"><img src="/images/43_Fescue.jpg" float="0"/></div>
Remove that and the list will float around the image.
Well, it's not the best fix from a stylistic point of view, but floating the images right avoids this problem. Thanks for everyones suggestions
If you want the whole ul to NOT float under the image try adding overflow:hidden to the ul
The Case
I have two floating divs next to each other. Both have "fluid" contents and I want them to stay next to each other unless they touch. Then, I want them to be stacked.
The problem is that my fluid content (like text or a list) crumbles in IE 7 as soon as the two divs touch. On top of that, this only happens with some IE 7 versions, not all.
The Code
<div class="left-aligned">
<p>This is some text of undetermined length.</p>
</div>
<div class="right-aligned">
<p>This is some text of undetermined length as well.</p>
</div>
.left-aligned {
float: left;
}
.right-aligned {
float: right;
}
The Test
Case 1
Case 2
The Problem
So,apparently, this issue only happens with IE7 and appears to be random. Some people see the wrong layout, some the correct one. Anyone who can shed a light?
Unless I misunderstood, this is easily done by floating the 1st div to the left and 2nd div to the right.
Here is an example of Case 1.
Here is an example of Case 2.
I wrapped them in a <div> of fixed width in the example to more easily illustrate the behavior, but without it the same effect would happen just relative to the viewport.
Add css:
.left-aligned {
float: left;
}
.right-aligned {
float: right;
}
Unless I'm missing something, this should give you exactly the behaviour you are looking for.
The CSS2 specifications state "A floated box must have an explicit width". See the float section (9.5) in Visual Formatting Model. If no width is set, the results can be unpredictable.