This problem is probably quite easy to solve but I'm not sure what I do wrong.
I have the following code:
HTML:
<div class='absolute'>
<div class='container'>
<span>blabla</span>
unknown number of spans..
</div>
</div>
CSS:
.absolute{
position: absolute;
bottom: 0px;
right: 0px;
}
.container{
float: right;
}
span{
display:block;
float: left;
}
Basically what I want is to have all the spans in one straight line at the bottom right. The absolute div works perfectly and container div float right exactly like I want. The problem is that the spans refuse to line up in one row. I get the following look:
The red is absolute div, the blue the container div and the green the spans. Well you see my problem..
I have tried to give the container div a width. This result in a straight horizontal line, like the one I want, except that the spans float to the left as far as the width of the blue container div. And I can't calculate the width because I don't know the number of spans.
So how do I solve this without changing any order and without setting a width to the container div? Or rather, why does the container div shrink at all and not just stay as wide as the floats wants it to be?
Thanks for any answer!
change display:block to display:inline-block?
Change you span to:
display: inline-block;
should make them go next to each other.
This isn't supported in IE7 or earlier though, if that's important to you, you can do this:
display: inline-block; *display: inline;
Oh and remove the float left on the span.
Related
It seems that in Microsoft's edge and google chrome the floating doesn't rearrange the divs properly, if you have three divs floated left and the page is scaled in a width between 444 and 436 px the third div goes to the second div's position instead of going below it. This "bug" does not occur in firefox.
I made a JSFiddle to be tested http://jsfiddle.net/e47jckrh/
HTML
<div id="d1">
<p>1</p>
</div>
<div id="d2">
<p>2</p>
</div>
<div id="d3">
<p>3</p>
</div>
CSS
div{
float: left;
}
Down below there is a visual representation of how it should behave
Full page Layout
Correct div floating when page width is more than 444px
Wrong div floating order when page width is between 444 and 436px
Correct div floating when page width is less than 444px
It may be just me thinking there is something wrong, but i assume the firefox behavior to be the correct one.
I've edited your fiddle here: http://jsfiddle.net/e47jckrh/5/
You didn't float all your elements as you'd suggested in the question. So I added float: left; to the div numbered 3 and set all 3 to display: inline-block;. And using display: table; and display: table-cell; with vertical-align: center; is a really old way to get something to align vertically.
These 3 lines work for most things:
position: relative;
top: 50%;
transform: translateY(-50%);
Okay. So #d3 shouldn't be on the right side at all because it isn't floated, but you used display:table. This gives it the effect of being floated with the other two divs for some reason.
Since it uses display: table #d3's margins are off the page but don't count as "not fitting" and don't force it to the next line.
#d2 is floated though so its margins DO affect it. So in the small range you're experiencing this #d1 + #d2 won't fit because of their margins contributing to an overall larger size width but #d1 + #d3 will because #d3 is not being affected by its margin on the right side giving the combo an overall smaller size width.
Simple solution is to float #d3 as well:
#d3 {
background-color: #ede4ad;
border: 3px dotted #6e5b3c;
clear: right;
float: left;
}
The behavior is caused by margin-right.
When div 2 reaches its containers right limit it overflows. In this case you control his limit by margin-right. BUT margin-right is only effective if there is succeeding element ( its calculated base on a succeeding element ). In this case div 3.
After it overflows in new line the div 3 takes its spot. But in this case margin-right has no effect since its the last element in this flow.
EDIT : I just realized you haven't floated all element , I don't know if that was your initial idea. If it was I won't delete this answer.
I'm teaching <div> and i have problem. Div is under image, but I want next to. I tried with setting float, position but nothing help.
Jsfiddle (here divs/images are unconnected!)
How to change it to connect images and form on up?
Divs automatically create a line break, because they are block elements. Try using display: inline-block on the div.
I updated your fiddle now: http://jsfiddle.net/aqqUV/3/
Note the code change here:
<div class="form" style="
margin-left: 70px;
color: white;
display: inline-block;
">
Just give first image a width and
display:inline-block;
float: left;
and then give these proerties to div following image
display:inline:block;
float:left;
you could try giving the first div a width and let it float left.
the folowing div elements should float next to it, but don't forget to clear:both at the end!
There are a lot of "fill available space" questions on this site, but my issue is a bit particular in that I've already gotten a solution, but it doesn't work for buttons. I'd like to understand why this doesn't work for buttons, and how I can make it work. I imagine it's just some browser-style for the button element that I need to override.
I have two floating elements within a (fixed-width, if that matters) wrapping div. The right element has fixed width, and the left element should take up whatever width remains.
I can accomplish that by setting the right element to have fixed width and float: right, and leaving the left element without any special styling. This works perfectly for divs. It also works for spans, but only if I set display: block on them. For buttons, I can't get it to work at all. I tried block, inline-block, and every obscure width value I could find on the MDN.
http://jsfiddle.net/wjFbD/2/
I don't know why I didn't think of just wrapping the buttons in divs earlier. Here's what I've come up with:
http://jsfiddle.net/SkczB/2/
This involves the overflow: hidden box formatting context trick (which I suspected was going to make an appearance here, but couldn't quite see where to fit it in). Highlights:
The two buttons are wrapped in divs with class buttonWrapper.
Those divs are formatted according to the trick I outlined in the third paragraph, above. The right div has float: right and a fixed width, the left div has no special styling.
We now apply the box formatting context trick. The left div is given overflow: hidden, which causes it to make space for the right-floated div.
We can now apply a left margin to the right div, and change its width, and the left div will always be the right size.
The divs create the desired "fill available width" effect for us, now we just have to put the buttons inside the divs and give them a height and width of 100%.
If it's the left button you wanted to have a fixed width, then basically repeat the above steps with left and right swapped.
This may not be exactly what you're looking for here, but here's an option that seems to have worked out for me with your fiddle.
If you've got a fixed width div that the elements are contained in, you could split get the remaining width of the div after button A has been set to fill up, say, 100 pixels and then set button 2 to be the remaining size.
Alternatively, another option would be to run it as percentages 20%/80%, 30%/70%, that kind of thing. Here's a fiddle that achieves what you're looking for on just the button wrapper at the bottom. I've applied specific classes for it and added divs around each button for a bit more control. The button wrapper divs are set to 20% and 80% respectively, while the button is set to fill 100% of the containing space.
Here's the modified fiddle and the modfied HTML/CSS. Hope it helps for what you're looking for...
http://jsfiddle.net/wjFbD/7/
HTML
<div class="btnWrapper">
<div class="buttonWrapperB">
<button class="left">
button Left
</button>
</div>
<div class="buttonWrapperA">
<button class="right">
button Right
</button>
</div>
</div>
CSS
.btnWrapper
{
width: 100%;
background-color: #FEE;
border: 2px solid black;
margin-bottom: 10px;
height: 50px;
}
.buttonWrapperB{
float: left;
width: 20%;
}
.buttonWrapperB button{
width: 100%;
height: 50px;
}
.buttonWrapperA{
float:left;
width: 80%;
}
.buttonWrapperA button{
width: 100%;
height: 50px;
}
I adjusted the background opacity of your .right elements to see what was going on below them. It looks like the .left elements are not only taking up the remaining space-- they're also taking up the entire row. Weirdly, the text inside these elements is centered as if it were only taking up the remaining space.
If you want the same to work for the buttons, it seems like the only solution involves a little hack. Buttons are quite complex indeed.
button.left {
margin: 0;
position: absolute; /*this seems to be the only way to get the button to stay on the same row - floating it left won't even work*/
z-index: -1; /*hides the "overflowing" part below the right button*/
width: 100%; /*make the button stretch to the full width of the row*/
padding-right: 400px; /*add a padding-right hack so that text will be centered correctly - should be same size as fixed width .right element*/
padding-left: 0;
display: block;
}
See updated fiddle: http://jsfiddle.net/wjFbD/6/
starting with
One element has fixed width, and the other element should take up
whatever width remains.
here is my general solution:
<div class="container">
<div class="two">125 €</div>
<div class="one">my favorite provider</div>
</div>
(stylus syntax, in your mind just add {,},;)
.one // red
border none
height auto
overflow hidden
white-space nowrap
text-overflow ellipsis
.two // green
float left
white-space nowrap
text-overflow ellipsis
You can set the one green thing to a fixed width, but indeed, you do not even have to! Things full up nicely. And String get's truncated with an ellipsis, if it gets too long.
Things get a bit more complicated, when one of them is a <button> rather than a <div> (and I can't figure out, which style property differenciates them, so I would need to style away), but anyway, with a wrapper, that also works:
→ See full codepen here. (Feedback appreciated.)
I have to create a div that should look like
<div id=1>
<img></img>
<div id=2></div>
</div>
the div with id 2 should appear at bottom-right corner of image, and the size of image is not fixed what should be the css applied to div with id=2
div with id =1 has no position defined so uses default and same is with image and i cannot change these
only div with id=2 is editable to me. Please suggest something
If you need to position the second DIV on top of the first DIV, then the best solution would be to position the first DIV with position:relative; and then use absolute positioning on the second DIV. The first DIV would have to have a fixed width or to be floated to limit it's width to that of the image.
If you have no way to control the first div, you are in a bit of a tight spot. You still need to make sure that the first div has the same width as the image, either by setting width explicitly or by using a float. You could then position the second DIV with negative margin and using position:relative in conjunction with z-index to make it flow on top of the image. But that would mean you'd have to know the height of the second DIV to make up for that exact amount using negative margin. It would work, but the solution wont be as robust as the first.
If you just need to have the text below the image it's a bit easier, just using plain old floats. I've coded up a very basicc version of all the three scenarios here: http://jsfiddle.net/laustdeleuran/7CnSh/
I hope it's useful.
If you cannot edit the CSS for div #1, you're sort of screwed.
If you could just add {position:relative} to that div, you'd be in business. Absolute positioning will target the first parent with 'Relative' positioning. Since the default of div 1 is 'Static'...Positioning won't work.
'Float' might work, div 2 would technically need to come before div 1 - thus causing div 1 to inherit the float of div 2; however, that would also stack your image atop div 2 rather than below it. ... So Float is out as well.
IF you can add CSS to div 1 and div 1 img, then an easy fix is this:
* { margin:0; padding:0 }
#one {position:relative; text-align:right;}
#two {position:absolute; bottom:0; right:0}
Good luck...
I think you are looking for float style.
Using numeric ids is a bad idea, so let's say you've called your divs div1 and div2.
As you can't style #div1 or the image, the only thing you might try is setting a negative margin on #div2. Try either one of:
#div1 { display: inline-block; width: 100px; margin-left: -100px }
Or, simply:
#div1 { margin-top: -100px }
Where the 100px values are just arbitrary and you'll need to decide on appropriate values depending on what you're putting in #div2
First, some valid HTML. But I guess that wasn't your real HTML?
<div id="div1">
<img [..] />
<div id="div2"></div>
</div>
You could this with position: absolute and negative margins.
#div1 { display: table; position: relative; }
#div2 {
position: absolute;
width: 50px;
height: 50px;
margin-top: -50px;
right: 0;
}
display: table should make the first div match the width of the image. position: relative so the second div will position itself relative to first div.
This might work (not sure of relative+table). But I haven't tested it. If it does't work, I suggest that you work with JS to position the second div, it's very easy.
try this:
<div id="d1">
<img src="https://encrypted.google.com/images/logos/ssl_logo_lg.gif"></img>
<div style="margin-left:225px;margin-top:-25px;z-index:1000;position: relative;" id="d2">Your Text</div>
</div>
you can play with the margin-left and margin-top
i have two divs, that float correctly in chrome, ff and safari but not iexplorer, the right div appears below the left div floated to the right- the two divs are wrapped by an outer div with a width of 800px;
<div class="b_left">
</div>
<div class="b_right">
</div>
.b_left{
width:350px;
margin-left:80px;
float:left;
display: block;
}
.b_right{
float:right;
width:350px;
height:280px;
background-color:#c8c8c8;
display: block;
}
when using divs for columns, which I assume is what you are intending for this, it is better to only float one of the divs.
Say i have a div called content which is 600px wide and inside it two 300px divs inside, leftblock and rightblock. Instead of floating leftblock left and rightblock right I instead float the leftblock left and put a 300px margin-left on the rightblock. This pushes the rightblock to the right and ensures room for the leftblock to fit in beside it while preventing IE from displaying weirdly.
Hope this helps
it is a bug of ie, it doubles the margins. you must add display inline to the .b_left.
display: inline
I created a quick jsFiddle here: http://jsfiddle.net/6JWq9/
And it shows up just fine. I suspect you have other code that adds padding or a margin.
Review my example, let me know what is different from yours and I can update my answer.
Just put margin: 0; padding: 0; on all three divs and go from there to check. Also reset styles are a MUST for IE, I use Eric Meyer's. (easy to Google).
Also, display: inline; on the one with margin will fix it for IE6 I suspect.