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.
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 layout with two divs on the same line. I need one div floated left and the other floated right so that the divs will stay on their respective sides no matter the browser size and the div on the right won't fall below the left floated div when the browser size is smaller than the two divs.
I need the browser to cut off the 2nd div after the 2 divs touch each other when the browser shrinks.
I had a picture to illustrate my question but I don't have enough reputation points to post it.
Do you really need to float the divs? If not you can always create a wrapper for the divs with a minimum width set to allow the divs and a position of relative or absolute to stay next to each other,
#wrapper {
min-width: 250px;
position: relative
}
then set the inner divs display property to "inline-block".
.blocks {
display: inline-block;
position: absolute;
}
All together, this will create a "safety bubble" in which your divs can rest side by side without jumping to the next line, even after window resizing.
Check it out here.
EDIT
After a couple of trial and errors I believe we have an answer.
Javascript.
So in interest of time, I will post the code on jsFiddle here. Breifly, what I added to the previous code was a script that ( on window.onload) you get the id's of both inner divs. You then create two objects to hold the position of their facing borders which are then compared to see if the second div ( one on the right ) has crossed into the first. The numbers in the div are there as a place marker to show that the div does not slide onto/under the other.
*PS the 200px is just a demo number, they can be changed)
I'm assuming that what you mean by "cut off" is that you want the left div to appear "in front of" the right div. To do this, you want to give the left div the css
{
position:absolute;
left:0px;
z-index:2;
display:inline-block;
width:[number]px;
height:[number]px;
}
and the right div
{
position:absolute;
right:0px;
z-index:1;
display:inline-block;
width:[number]px;
height:[number]px;
}
and to their shared parent div add the css "position:relative;".
Alternately, giving both divs "position:fixed;" might work, that makes them relative to the browser winder instead of the parent div, though that will give you very different outcomes when people try to scroll. You'll also need to give the left div a background that isn't transparent, or they'll just overlap. Also note that "position:absolute;" puts the divs 'outside the flow' as it were, in the sense that they will also overlap anything else you put in, and your design has to account for this.
Working example http://jsfiddle.net/RdX5P/
If by "the browser needs to cut off the second div" you mean you want the second div to just disappear when the window gets too small, just float the two divs and put them in a container div with set height and with "overflow:hidden;"
i'm no expert when it comes to css but i'm trying to get a floating div to work. I have two div's, the top one floats left and the other div should wrap right. It seems to sort of do this. The problem is that even though it looks right, it's not actually pushing the box to the right of it. I have a jsfiddle and you'll see what i mean. i set a red border on the div called content. You'll see the content looks about right, but the dotted red line under the h1 start from the begining of the floated object instead of under the H1 title. Please help me understand. here's the jsfiddle: http://jsfiddle.net/wCnY3/
<div id="subNav">box</div><div id="content">WELCOME</div>
Target your #content element with an overflow-x:hidden property.
#content {
overflow-x:hidden;
}
Like so: http://jsfiddle.net/wCnY3/1/
By design, the overflow:hidden has the effect of forcing your element to behave like a square/rectangle. Since you don't have a set width/height for your element, that just means its wrapping behavior is changed.
I have a webpage with links down the left hand side of the page in a div that is floating left. I then have content to the right of that that is in a div floating right. The problem I'm having is that when the page is resized the content moves below the links.
I have tired putting the whole page in a wrapper div but when I did the links stopped working and I could not position the content where I needed too.
Here is the css for the wrapper div
#wrapper {
margin:0 auto 0 auto;
min-width:960px;
}
Floated elements will behave in that manner, since they're out of the page flow.
What you probably are looking for is a fluid two column layout.
The main problem is that you are giving the divs fixed widths so the first step is to change the widths of the divs to % or em.
Do this full screen to begin with, I would even go as far as creating a blank page with no content what so ever, just give the divs a different background colo(u)r. Do this as you then know the width of the content isn't interfering.
I would also float both divs to the left and maybe position them relatively to begin with.
I figured out the best way to go over the window resize issue is do like wordpress and even this site do: put balnk resizable margins around the page and make all the content fixed width.
"Liquid" style (with percents etc.) is cool but doesn't really look right most times, so the best thing is to build your page a little narrower than the full window and let different brawsers just change the margin size.
To do so I actually style the very html tag givin it a fixed width like 1000px or whatever and then margin-left:auto; margin-right:auto; to keep it always centered.
EDIT:
Put this in your css
html {
width:66em;
margin-left:auto;
margin-right:auto;
}
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.