I have a collection of floating divs within another div. The child divs are of variable width and height - that is they're populated using dynamic data which I have no control of. Now sometimes what happens if that the last child div has a massive height with a wall of text because it is forced into a small width by the other divs. This only happens in IE 6, 7, 8 - FF3.6 handles it correctly - it makes sure the huge div starts after a line break with a big width.
Is there anyway I can force IE into the same behaviour?
Actually, if you specify a width for that floated div, then it will use that width, or else the floated div will "shrink wrap" to the content. So you can try that, or you can use this style for that float:
#the-last-div { clear: both; float: left }
you may or may not want it floated if you want it to be across the page all by itself.
The only solution to this is one of three: specify clear: both;, specify a default width, or do either or both of these dynamically with jquery/javascript. As long as you are letting the content decide the height and width you are going to run into problems.
Using clear:both; on all divs will put each float onto its own row. This doesn't sound like what you want.
Specifying a width will be the most predictable. The browser will respect the width and will clear to the next line if there is not enough space.
If you are loading content dynamically that requires a specific width then it should be trivial to dynamically adjust the containing div width appropriately. You can perhaps check the length of the content and assign a width to the div receiving the content if the content is too long. Since we don't have your code you'd have to experiment with the length and width to get it right.
Is the content that you're loading simple text or does it contain divs and other block level elements?
How is it floated? is it a mix of float: left; and float: right; ? or is it all to one side?
Related
I know that vertical alignment is an age-old issue and I don't want to beat a dead horse. But I feel like I've spent hours reading all of the clarifications and hacks, as well as what's supposed to work now with HTML5/CSS3 via flex box model, yet I have tried them all and still cannot solve this particular case:
<div style="border: 1px solid black; width:50%; height:50%; margin:auto;">
Notice when you resize your browser window, the div is always 50% the height and width of the browser window, and is always horizontally centered in the browser window. What I need is to get/keep it vertically centered as well. Is there absolutely any way, given that the div itself and the enclosing div are both of non-fixed (and unpredictable) heights?
Please note the goal usage here is to have this div inside another div, however the my example here puts it merely inside the body in order to best illustrate/simplify/test the results given an arbitrary size of both the enclosing and inner divs via realtime window resizing.
Use flexboxes, specfically the align-self property. Since you're using relative sizes its parent element will need to have some height one way or another, e.g. via min-height:100vh, otherwise it will have no height that its content could align itself to. A body element by default only is as tall as its content, not as tall as the viewport.
I have a layering issue with a site that I can't seem to figure out how to get around.
Essentially, I have a float:right div that contains some linked images and a bunch of block divs on the same page (in the same wrapper). The text (content) all wraps as expected, but the block elements overlap the floated elements making the image links non-clickable. It becomes quite obvious when viewed using chrome/firebug/whatever that the blocks are getting in the way of the floats but nothing I have tried as yet has floated them to the top.
example from: http://wanganuilibrary.recollect.co.nz/nodes/view/280
What I need is a way of allowing the links on the images in the float to be clickable. The float can have a set width but not height, and the rest of the content needs to be free flowing and wrap under the float if/when required, so no forced padding or margins, e.g.: http://wanganuilibrary.recollect.co.nz/nodes/view/1519
Any ideas on how this could be achieved would be appreciated.
Usually columns like this are built using floats.
The left content column would be float: left with a set width.
The right content would be float: right with a smaller width.
Otherwise you can set the z-index of the anchors around the images to higher than the other content,
I have a list inside a div with text of varying lengths. How do I make the div's width hold all of that content. I've tried width: auto (without actually knowing what would happen), but the div stretched out to the left of the window. Is there a property with which I can use to accomplish this?
If I'm understanding you correctly, you can use display: inline-block;
http://jsfiddle.net/H66TB/1/
I'm taking you to mean that you want it to stretch to the content and not just go all the way to the end of the screen.
I have an issue (code is dynamic so difficult to print - I hope this is simple) whereby when a parent container div contains 3 div elements floated left, yet the if the 3rd div goes beyond the body of the page (i.e. the browser's width) it line breaks to go underneath.
I want it to float: left whatever, whether it goes past the 'end of the browser' or not. Is this possible?
Example code:-
<div id="container"><div id="divLeft"></div><div id="divCenter"></div><div id="divRight"></div></div>
Where all the divs left, center and right are float: left;
Yet #divLeft will break to go under divCenter if it's width goes outside the browser width.
Any help much appreciated!
The best way to be sure is to set a fixed width to your div here.
An example here
#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}
Don't forget the overflow:auto on your container if you want to apply a background or a border, else it won't be under your divs.
it seems the divs don't fit in container div, and the last one floats under them. this is how float works. you must arrange the widths of them.
Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
transparent image at the beginning of your document <img src="t.gif" width="1250">
set body's minimum width css as min-width: 1250px; has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
A very straight-forward and simple
and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.