I have two div with float left each.
When the content of the second div is too long, this div goes under the first block.
http://jsfiddle.net/Xuqv4/
#one {
float : left;
}
#two {
float : left;
margin-left : 10px;
}
But what i want, is that this div remains on the right of the other, regardless of its content.
The only way i found is to fix his width, but i cant in my site. The div should occupy all the available space.
Maybe you can help me ?
Many thanks :)
EDIT : The #two div has not fixed width.
Instead of floating the divs, set the display to table-cell:
div {
display:table-cell;
}
jsFiddle example
Related
Why do floated divs don't take full width? Aren't they still block elements?
Here is an example http://jsfiddle.net/GKjC8/
html
<div id="a">a</div>
<div id="b">b</div>
css
div {
background-color:cyan;
}
#a {
float:left;
}
#b {
clear:left;
}
The a div looks like it's inline since it takes as much space as its content. Can someone explain?
You have to set width:
#a {
float: left;
width: 100%;
}
“You should always set a width on floated items (except if applied
directly to an image – which has implicit width). If no width is set,
the results can be unpredictable.” Floatutorial: Float Basics
fiddle
That's because float elements behave like if a display: inline-block was applied to it. They expand to their content width.
As #Alek stated, if you want to set the width manually, you need to explicitly set it.
You can check this stackoverflow question for more informations
I have a container which has left and right padding. Inside this container are two divs which should be side by side with a space between. Now because this space is fix but the site is responsive, the two text-divs must have a dynamic width. This is the reason why I can't use %-width.
I thought with text-align: justify it will work, but it doesn't.
Here is the JSFiddle: http://jsfiddle.net/qGw48/
Here the JSFiddle how it should look like: http://jsfiddle.net/4ekSm/ (it only works because of the %-widths)
just change:
div#container > div {
display: inline-block;
}
to:
div#container > div {
display: table-cell;
}
UPDATED FIDDLE
This can be done fairly easily if you make the width value take into account the padding. So I'm using the style:
box-sizing: border-box;
http://jsfiddle.net/qGw48/1/
This means that when you set a width then the padding will be included in that value.
Have you seen this http://jsfiddle.net/cUCvY/1/
I think It solves what your looking for
Two Divs next to each other, that then stack with responsive change
you could add some margin to one of the boxes ie
.left{
margin-right: 5px;
}
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.
I have 4 <div> tags one after the other, all in position:absolute and I align them using top and left.
The 3rd div tag contains dynamic content and the height of the div changes according to the amount of text in it. However, as I set the top and left of all divs, the 4th div is affected by the height of the 3rd dynamic div.
How can I solve this?
http://jsfiddle.net/25Xrh/
You may want to try wrapping the 4 divs in a parent div and absolutely positioning that. Then you can allow the position of one of the children divs to affect another.
http://jsfiddle.net/25Xrh/5/
The solution you had meant that no matter what you tried to affect the top:60px and left:180px stopped it from moving anywhere other than this, so the dynamic content div wasn't able to reposition it.
Here is my test:
http://jsfiddle.net/neuroflux/25Xrh/7/
Code:
.first {
position:relative;
left:180px;
}
.second {
position:relative;
left:180px;
}
.third {
position: relative;
left:180px;
}
.fourth {
position:relative;
left:180px;
}
I want to make an HTML, CSS page where the layout is as:
<div id="content">
<div id="left">
.....
</div>
<div id="right">
.....
</div>
</div>
The content div has a background image which should be repeated in y-direction. Also the left and right div should be side by side over the same background image.I am able to accomplish it but by keeping the height of the content fixed but I don't want to make the content's height fixed. Please help me folks.
Thanks in Advance :)
without seeing your code... my guess is you're floating the left and right DIVs... but you're not floating the content DIV...
your CSS should look similar to this to make it work:
#content {
float:left;
background-image:url('whatever.png');
background-repeat:repeat-y;
}
#left {
float:left;
}
#right {
float:left;
}
I am able to accomplish it but by
keeping the height of the content
fixed but I don't want to make the
content's height fixed.
If you are able to repeat the background image in the Y direction then it shouldn't matter how heigh the #content div is, as your background will just fill the remaining space - correct?
If your content div is not expanding to the height of the child div's then clearly #content must be outside of the normal flow of the page, in which case you should float it and not set a height for the container div.
It's quite hard to understand what you're trying to do, but I think what you want to do is add overflow: auto to your content div, so that it becomes the same height as the left and right divs:
#content {
overflow: auto;
background: [bg code]
}
#left, #right {
float: left;
}