PROBLEM: cannot stack floats with CSS only.
In the example http://jsfiddle.net/9YQXP/7/ I have 3 divs whose width is 35% of its container. I will not know in advance the height of each div but I'd like the third div to stack right beneath the first one.
HTML
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
CSS
div {
text-align: center;
float: left;
width: 35%;
border: 1px solid #000;
}
#a1, #a3 {
height:20px
}
#a2 {
height:30px
}
OTHER ANSWERS: a similar question (Float stacking css) has been answered with a link to http://masonry.desandro.com/. However, it has been answered with a javascript solution and I too would prefer CSS only (or a working example with masonry).
This can't be done with CSS alone. Per the specs for floats:
5) The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the
source document.
Related
friends,
I decided to ask this because I've seen many answers on the internet, but no one seems to be a definitive answer.
In out HTML documents we have many elements one inside another. Eventually we'll want to add paddings and margins to these elements.
So, what if we want to have all content horizontally aligned to the center of the page? If the content has 1000px of width and the screen resolution will change from device to device, the most common solution is something like (will work on netscape based browsers):
body{
width: 100%;
}
#content{
width: 1000px;
margin: 0 auto;
}
But if we have lots of other elements inside the #content element, like a table made of DIV elements, we start to face some problems. The parent's height will not adjust to its children's height and padding and margin will not work properly (if we inspect the element we will see that the width and height is not behaving as expected) unless we add some new rules.
I use float: left but then the headache starts! When I add float: left only those elements will work fine, but the parents will not. If I add float: left to an element that already has margin: 0 auto set, it will no longer be aligned to the center of the page...
I've seen some solutions using text-align: center to the parent and display: inline-block; float: none; to the element we want to be aligned to the center. But it also has many problems (for example, we can't set the float rule)
How do you deal with this problem guys?
You need to use clear after you use float on elements in order to 'clear the floats' and make the height propagate up to its parents. You can use clear:left (or right) to just clear float:left elements but typically it's fine to just use clear:both.
In the below example there are two versions of clearfixes, one that uses a pseudo-element on the container and another that is just another element.
Demo
HTML
<div id="content">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
<div class="float-me">Test1</div>
<div class="float-me">Test2</div>
<div class="clear"></div>
</div>
CSS
#content {
width: 500px;
margin: 0 auto;
}
li {
float:left;
}
/* our pseudo-element clearfix */
ul:after {
display: block;
content: "";
clear: both;
}
.float-me {
float:left;
}
.clear {
clear:both;
}
I have a container with multiple anchor tags styled as buttons (it could have more or less buttons):
<div class="menu-container">
<div class="button-container">
Action1
Action2
Action3
Action4
Action5
</div>
</div>
How ca I style this using CSS to be able to have those buttons listed as a grid with 4 columns max? I tried with display:inline-block and float:left but without success.
I know that I need to fix a width for the container but I'm not able to but all anchor tags inside the container. And this must be dinamic as is could have more or less buttons...
What I'm trying to achieve is something like:
You need to give the links a width and height in addition to float or inline. Also, you need to define a width for the parent element, so that you can define where they can 'float' to.
.button-container {
width: 520px;
background: gray;
overflow-y: auto;
}
.button-container > a {
width: 100px;
height: 100px;
float: left;
background: lightgray;
margin: 15px;
}
Here is an implementation with jsfiddle
Next time try to include an example with fiddle so we can understand what you have already tried and where the code could have gone wrong.
Not sure if this is what you are looking for. http://jsfiddle.net/H9Ypc/
I added a div with the css properties
.action-container{
display:inline-block;
margin-bottom: 5px;
}
Definitely suggest inline-block over float.
In this gallery the last image should float to the left but it is positioned in the middle. Whats wrong with the code?
This is the whole code CSS.
This is the whole code HTML.
HTML:
<div class="text-block7" >
<img src="gal/thumb/60.png" alt="">
</div>
CSS:
#rightcolumn-12 .text-block7 { width: 239px; height: 190px; display: block; float: left; margin-top: 0px; margin-bottom: 15px;}
Before the 7th div block add:
<div style="clear:left"></div>
this happens because your 4th image is higher, so the 7th image when is floating to the left is slamming against that element.
to prevent this kind of behaviour just define a css rule that applies a clear:left on every 3n + 1 div involved: e.g.
div[class^="text-block"]:nth-child(3n + 1) {
clear: left;
}
Note: the nth-child pseudoclass unfortunately doesn't work on IE8, but if you need to absolutely support that browser you may simply use display: inline-block and vertical-align: top instead of floating elements
Here is my Question I have an HTML like this
<div class='A'>
<div class='B'>Hello World</div>
This div Height is more than first one due to the content size
</div>
now I want to get the height of Parent div with class 'A' and that height has to be given to the div with class 'B'
only using CSS3. is it possible? Some-body please help me.
Thank you...
CSS is not a programming language so, no, you cannot do this as you state it.
As mentioned before CSS is not a programming language you cannot achieve that with it however you can use jQuery instead:
$(document).ready(function(){
$(".B").css("height", $(".A").height());
});
Or you can do this with CSS:
.A {
height: 300px;
}
.B {
height: inherit;
}
If you're explicitly setting the height of the parent, you can set the child's height to be 100% to achieve this effect. View on JSFiddle.
css
#parent {
background: #eee;
height: 200px;
}
div div {
background: #aaa;
height: 100%;
}
HTML
<div id="parent">
<div>lalala</div>
</div>
If you're not explicitly setting the height, you'll need to specify the question more. Divs are block level elements and want to take up an entire row to themselves. The code you posted will result in the child div and the text of the parent being on different rows. Because of that, it's hard to know what height you're looking for...maybe if the parent just had text? And then, what do we do with the div in relation to the text? Overlap it? Or push the div out the bottom of the parent?
If you want to set the same height to upper and to lower text
You can add to parrent
.A
{
display: table;
}
And you can add to child
.B
{
display: table-row;
}
I have a list of names which is rendered inside <ul>. I am applied some CSS code but facing some browser specific issues.
Chrome : List element is getting displaced by 1 row.
Firefox : All list items collapsing to one item.
Code snippet (JS bin editor)
HTML
<div id='container'>
<ul class='list'>
<li> <div class='rel'>
<div class='abs'> item 1 </div>
</div> </li>
... More items similar to above one
Css
#container {
height: 100px;
overflow-y:scroll;
width: 200px
}
.list {
background-color: skyblue;
}
.rel {
position: relative;
}
div.abs {
position: absolute;
left: 20px;
}
I want to know the reason of this misbehavior in both the browsers. Have I written wrong CSS ?
Update: With in <div class='abs'> I have a lot of code which I have not added here as it is not necessary and the content of abs div is positioned with respect to its parent i.e. <div class='rel'>
The problem is indeed the
div.abs {
position: absolute;
left: 20px;
}
This positions every element with class "abs" 20px to the left (and 0px from top) of the ul element.
What would you like to achieve? Your menu horizontally or vertically?
Horizontally: Use float:left or display:inline with a margin-left:20px;
Vertically: for a 20px margin-left:
http://jsbin.com/ediloh/17/edit
I first added margin:0px to delete the top and bottom margin of the ul element. Next I added a left margin of 20px to move it to the right.
alternative: put margin-left on the li-element instead. This will not move the circles
The divs with position:absolute are taken out of the page flow, basically causing their parent divs to have no content at all (no content amounting to any width or height that is). So they will collapse.
What outcome do you actually want. You are fixing the div.abs to be indented by 20px inside its containing div.rel.
Could you give some idea of what you are trying to achieve.
Wing