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.
Related
The problem i'm having is i need to float one element with a fixed width to the left, and have an element next to it fill the remaining width.
The only solution that i know of is to float the first element, and then the element next to it will automatically fill the remaining width. The problem i'm having is the following:
http://codepen.io/anon/pen/udBsx
If the green content is higher than the red, it will jump down below the red. Is there any way to prevent this from happening? I've played around with clear but i don't think there's anything i can do to keep it from happening.
To make it even worse, the site is responsive. If it weren't, i could just give the green element a static width and float it as well, but that is not the case. I can't use percentage because the red element has a static width.
I believe flexbox has what i'm looking for but unfortunately it's not an option right now due to lack of support.
Ideas?
EDIT:
The css code should look like this:
.floated {
width:200px; float:left;
}
.fill {
margin-left:200px;
}
I have a page with some divs that have a width of 800px and margin: 0 auto
to center them.
One of the divs contains an image and the rest of the div is empty, in IE8+ it looks
as well as all other browsers, but in IE7 the empty area of the div takes space and throws other elements off their place,
is there a quick solution for making the empty area of the div not take space?
the reason I have to keep the blank area is that the fixed with and margin: 0 auto make
the picture align with the other divs that have the same width.
thx in advance!
Try setting line-height:0 and font-size:0 for that element.
It should make the element occupy no space..
just wanted to tell anyone reading this post, what I did in the end is put an Internet Explorer conditional comment as nothing seemed to solve the problem.
another thing that is possible is to make one of the DIVs' position absolute and then it's
outside the normal flow, but I couldn't find a way to make the empty part of the DIV not take
space in the normal flow.
Yes it does...just put ; after them
I just had the same problem on IE7 and used the answer
line-height:0;
font-size:0;
in the CSS corresponding to that div
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.
I am just trying to get the image box to slide up next to the BBD logo and I can't seem to figure it out.
A bit new to css and floats, etc. Can anyone offer a suggestion???
I'm working off of a template, so didn't set up the css myself.
Thanks!
link text
You will need to float both the div with the bbd logo and the div.slideshowgallery. When both siblings are floated (left for example), they will be next to each other (if the width of the containing block permits it).
A suggestion? I can give you that.
#sliderWrapper > div { float: left; }
Add this CSS and your divs will be side by side. Rounded corners and the background will break. To solve the background, add <div class="clear"></div> to the bottom of the sliderWrapper div. The rest... no idea.
always remember to work with a wrap container with a specific width otherwise is very difficult, to make this with a elastic design.
and then just float both divs... ideally on the same side and spearate them with their own margins.
Can anybody think of a non-Javascript way to do the following:
There is a DIV element somewhere on the screen. Its position can not be predicted.
It has a fixed width, and should overlap all the other content in the document, ie. it has "position" set to "absolute".
This is the catch: I want the bottom edge of the DIV to be glued to the bottom of the Viewport. I tried giving the element "bottom: 0px", but in absence of a "height" setting, the whole DIV moves down to the bottom corner, which is not what I want. I want it to stretch from the random position in the document to the bottom edge of the viewport.
I cannot see a solution without using JavaScript, but maybe somebody has a brilliant idea.
I believe the following is not IE6 compatible, but works on all other browsers. With the bottom, you should also give it a top. Once you set the height, it will take precedence (I gave it a border so you can see it stretching):
<div style="position:absolute;top:150px;bottom:10px;width:100px;border:1px solid red;">
I'm stretched to the bottom
</div>
try this
http://www.doxdesk.com/software/js/fixed.html
also try to check position:relative; position:static; position:fixed;
Thanks
freeweb.pk