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
Related
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
I want to equal two divs height when a div height large
example :
<div style="float:left;padding:2px;background:red;">B</div>
<div style="float:left;padding:2px;background:green;">A<br />C<br />D</div>
<div style="clear:both;"></div>
the Div 2 height larger then div one
I may have a possible solution for you:
http://jsfiddle.net/adaz/wRcWj/1/
Well, it'll probably work on ie7+ so I'm not sure if that's good enough for you.
Brief description:
1) Set position relative to the container and self-clear it (I've used overflow: hidden but you can also use clearfix).
2) Float one of the divs inside so the container will expand depending on content inside.
3) Set position absolute to one of your divs, and give it top and bottom position 0px, this will make sure that it has 100% height.
Cons:
- Lack of IE6 support
- You need to chose which div will always have less content and then position in absolute
Hope it helps!
This is typically the behavior of a table, so you can do this with display: table-cell. I based an example on Adaz's : http://jsfiddle.net/L2uX4/
Wrap the two div's whose height you are trying to equalize in a container div, i.e.
<div id="container">
<div class="column">A<br/>B</div>
<div class="column">C</div>
</div>
Set an explicit height on the container and set height=100% on the columns:
div#container {
float: left;
height: 10em;
}
div.column {
height: 100%;
background-color: red;
}
Suppose I have two divs:
<div id="container">
<div id="left">line one</div>
<div id="right">line one<br/>line two</div>
</div>
How to make left div and right div align on the bottom line? Basically to expand left div so both have the same height.
I don't want to set height explicitly for them.
Just set the height or min-height property for the parent divison in the CSS like following
min-height:50px;
You can also set the line-height for it so that <br /> works the expected way
It's easy with the display: table-cell property, but it has no support among browsers like IE7 and older. Here's how to do it, anyway.
.container {
display: table;
}
.container > div {
display: table-cell;
}
Fiddle: http://jsfiddle.net/gAQtR/1/
One possible solution is known as part of the "One True Layout":
#block_1, #block_2 {
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#wrapper {
overflow: hidden;
}
Then there is the display: table approach, but it isn't supported in IE below 8.
Apart from that google for "CSS columns float height" or any similar combination.
This can be done by two ways one is to set the equal minimum height of both divs
line one line oneline two
left { min-height:50px; }
right { min-height:50px; }
========================================================================
Or You can do it by inserting the tag giving it the style of of clear:both before the closing tag of parent div like
line one
line oneline two
The link below will show you the code for your problem
http://jsfiddle.net/tashniamit/kVqpE/1/
I have 2 div elements side by side that are set as inline-block. They both reside within a containing div. I have set the right div to height 100% but because the height of the containing div is dynamic it won't expand. Does anyone know how to make the right hand div (coulmn) expand to the dynamic height of the containing div?
<div class="container">
<div class="left_column">Dynamic Content In Here</div>
<div class="right_column">Side bar to expand to the height of the containing div</div>
</div>
Thanks
Oliver
After having some issues with the same problem, the simplest solution is, in my opinion, to use table-cell as the display property. It works perfectly fine!
I think you search something like this:
.container {
min-height: 700px;
}
.right_column {
min-height: inherit;
}
Also see this jsfiddle.
Try to add:
html, body
{
height:100%;
}
#container
{
min-height:100%;
}
I have a div that encapsulates many unordered lists (ul). I have each ul set to "float:left". And I also have the parent div that contains them set to "overflow-x:scroll". What's happening is the ul's are wrapping when they hit the edge of the page and not staying side by side to take advantage of the scrolling property of the parent div (the scroll bars are there). Why? How can I fix this?
Thanks for any help.
you need to insert those uls in another div, to which you'll give width=[width of ul]*[number of uls]
http://jsfiddle.net/seler/gAGKh/
or count total width of uls
http://jsfiddle.net/seler/gAGKh/1/
You can set your list items to display: inline-block, then use white-space: nowrap. Works in most modern browsers.
http://jsfiddle.net/gAGKh/22/
Because you floated the ULs, they don't exist in the document flow anymore so they won't expand the parent div (hence the wrapping.)
Try setting an explicit width on the parent div that allows for all of them to exist side by side.
ALSO, if you aren't clearing the ULs in the parent div then you'll more than likely run into issues there too, vertical ones. Make sure you clear your floats :)
You need to:
Make the <li> also float.
Set fixed width to each <ul>.
Set fixed width to the containing <div>, enough to hold all the lists.
For example:
ul { width: 250px; }
li { margin-left: 5px; }
ul, li { float: left; }
div { overflow-x: scroll; width: 750px; }
Test case.