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.
Related
I apologize for the terrible title.
I'm running into an issue. I have a couple elements, by name they are:
-page
-graph-container
-lots of elements
-selector
The graph-container element and selector are to be inline next to each other with the selector floating right. The graph-container element is supposed to have a lot of elements all next to each other (on the same line), thereby making a scrollbar in the x coordinate.
For the life of me, I can't get this to work. The current CSS goes like this:
-page - width: 820 (applies correctly)
-container - height: 500px; width: 620; display: inline-block; overflow: scroll;
-lots of elements - display:inline;
-selector - float:right; display:inline-block;
What this gets me is a vertical scroll with the elements wrapping around the end onto the next line. What I would like is all the elements to be on the same row, and the scroll be left and right/horizontal.
idem, white-space, but you have to distribute it where needed and reset where not.
another way, not as usual as white space, is to set a colum-width.
It will build as many column needed to fit in the height of its container.(set a width, else it's one line :) )
To display your 2 main containers aside each other, there's floatting, inline-block + white-space, and display:table/table-cell usually used.
Here is a mixed of possibilities.Test & Pick up the one that feet best your point.
http://codepen.io/gcyrillus/pen/kvLzu http://codepen.io/gcyrillus/full/kvLzu .
Don't hesitate to fork and play with, nothing will get broken )
Well, I figured it out and this could be helpful for anyone Googleling. Try adding
white-space: nowrap;
overflow-x:scroll;
To the container.
I have a panel div with a title bar div. In the title bar, I may have several different icons on the right side (to be determined at runtime). I'm trying to construct the CSS so the icons will always stack as far to the right as possible, and also have it that the title text doesn't run over the icons (ie, it'll wrap around to a new line if necessary). I just haven't been able to get it right. For my icons, I have <img class="icon" ...> where
.icon {
display: block;
float: right;
padding-left: 4px;
}
The icons appear fine on their own. But when I try to add the actual title is when things get wonky. I can't seem to get the title to take up the remaining space to the left correctly. The div (or span, which I've tried) will either be completely below or above the icons. Or sometimes, it'll force the icons to stacked vertically on the right, depending on the length of the title.
So in essence, what I'm looking for is one or more small fix-sized elements stacked horizontally to the upper right, and a longer element to take up the remaining space to the left, and this last element may end up taking more space vertically depending on if there's any text wrapping.
Any help would be greatly appreciated!
Adding the following rule to the css of the element you have your text in might help:
white-space: nowrap;
I think I got it working.
Basically, I had the title text within a div (also tried span). But if I didn't put it within anything (ie, it's part of the main title div), everything seems to work.
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.
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
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