I have got this structure:
<div id="wrapper2">
<div id="smallImages">
<span>
Small Image 1
</span>
<span>
Small Image 2
</span>
<span>
Small Image 3
</span>
</div>
</div>
The problem is when I try to float the spans that are inside that div.
When I float them, they get off the flow of the div.. the div actually lie above them.. Note that they all fit the divs width.
CSS:
#smallImages{
margin:auto;
background-color:#267990;
width:300px;
}
#smallImages span{
background-color:#f18e99;
width:90px;
height:150px;
display:block;
float:left;
}
why does it happen?
Floating element are not considered when calculating the height of parent elements, if the parent's overflow is set to visible according to the CSS2 specification.
There are however CSS hacks to get around this: https://stackoverflow.com/a/11597829/384617
Related
Is there a way to stick a div (#divA) to another div (#divB) that has left absolute position in pure CSS without javascript?
For example:
#divB {
position: absolute;
left: 100px;
}
I want that the #divA is attached to the left side of the #divB,
also if I dynamically increase the #divB left...
Update: my final objective is to manage the position of the others divs,
basing on the position of the div in the middle (div B in the picture)
staying sticked on it:
img http://www.sumoware.com/images/temp/xzpsxdkdnccotgoe.png
Just use absolute positioning with offsets of 100% to stick to the sides of the originator.
HTML:
<div id="a">
<div id="b">
</div>
<div id="c">
</div>
</div>
CSS:
div {
position:absolute;
height:50px;
width:50px;
}
#a {
left:100px;
background:red;
}
#b {
right:100%;
background:blue;
}
#c {
background:green;
left:100%;
}
Will give you exactly what you want.
Making something absolute takes it out of the normal flow. A block element gets its context from its nearest positioned ancestor(ie:fixed,absolute, or relative) element. One more thing to watch out for is inheriting unwanted margins, paddings, and borders. That being said...
According to your diagram you have a containing element, which you should use to position your 'set' of elements where you want. Putting "container -> subdivs = display:inline-block" allows you to dynamically add as many divs as you want. If something covers more than 1 element, make a class or direct it towards the children of an element. If it concerns 1 element, you may be better off with an Id. You can now absolutely position your desired sub and float the others...
Also, in order for empty divs to 'show' they must be positioned(or floating) and have a dimension.
#container{position:relative;padding:0px;margin:0px;
top:0px;left:400px;width:300px;height:105px;}
#container div{display:inline-block;}
.sub{width:100px;height:100px;padding:0;display:inline-block;}
#subA{float:left;background-color:red;}
#subB{position:absolute;left:100px;background-color:yellow;}
#subC{float:right;background-color:green;}
<div id="container">
<div id="subA" class="sub"></div>
<div id="subB" class="sub"></div>
<div id="subC" class="sub"></div>
</div>
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
See JSFIDDLE here.
As the parent-parent node of pink div, the blue div included the css style overflow:hidden, which is essential in my project for other parts of content.
But now I have to show the pink square across the border, it seems a part of it was overlapped because of it parent's overflow:hidden. What should I do if I want to make it?
Thanks!
This is not possible. If you declare overflow:hidden on an element, all child elements have to obey this rule.
What you can do is to move the box out and position it accordingly:
<div class="paper">
<div class="container">
</div>
<div class="box">
</div>
</div>
Remove to you parent class .papaer overflow:hidden and
add this css
.paper:after{
content:'';
overflow:hidden;
display:table;
}
Demo
I have a problem as I mentioned above.
In my web app, I'll be generating many divs dynamically by jQuery(ASP.NET MVC).
Each new div can have a different width, and all of them MUST be floated to the left
I tried (test) to float to the left 2 divs, but with no success. What am I doing wrong ?
Each div has a defined width, because when the total width of all divs > mainDIV's width, then the scrollbar will appear. Now, in that case, this 2 divs are not floated to the left
Here's the code
<div id="mainDIV" style="overflow:auto; width:100%;">
<div style="width:960px; float:left; background-color:Lime;">
a
</div>
<div style="width:960px; float:left; background-color:Red;">
b
</div>
</div>
You have to make sure that the containing div is wide enough to accommodate the floated div's side by side.
So in your example, you would have to set the width of the containing div mainDIV to at least 1920px.
You need an additional wrapper if you want the scroll-bars to appear on mainDIV:
html:
<div id="mainDIV" style="overflow:auto; width:100%;">
<div id="wrapper">
<div style="width:960px; float:left; background-color:Lime;">
a
</div>
<div style="width:960px; float:left; background-color:Red;">
b
</div>
</div>
</div>
css:
#wrapper {
width: 1920px;
}
I'd try to use CSS in a way that doesn't have to do style= for each element. Without more context and/or testing I can't guarantee it will fix your problem, but its possible it will and its better form.
Either set float:left for all div tags
div {float:left;}
put all div tags to be floated left in the same class
<div class="className" style="width:960px; background-color:Red;">
a
</div>
div.className {float:left;}
Also, make sure you do not specify any kind of absolute position as this will override the float. There appear to be some subtleties concerning float and width, so check those out too http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://css.maxdesign.com.au/floatutorial/
i've got 4 spans in a row.
<div id=container>
<span id="1">blue</span>
<span id="2">red</span>
<span id="center">all colors</span>
<span id="3">grey</span>
</div>
i want to have the 'all colors' in the center of the webbrowser and the blue and red to the left of it, and the grey to the right.
how could i do this?
<div id="container">
<span class="float_l blue">blue</span>
<span class="float_l red">red</span>
<span>all colors</span>
<span class="float_r gray">grey</span>
</div>
#container {text-align:center;overflow:hidden;}
#container span {display:block;width:auto;height:20px;line-height:20px;padding:0 10px;}
.float_l {float:left;}
.float_r {float:right;}
.blue {background:blue;}
.red {background:red;}
.gray {background:#ccc;}
If you want to have the right floated element in the same line as others you will have to put it before left floated elements.
Can you pad out each side with empty spans so #center is always middle by count?
If so, you can set each span to display: table-cell (and possibly the parent to table or table-row, don't know if that'd be required to get them to fill the width) with the same width, or at least all but #center with the same width.
Edit: Well, I've been playing with it in Firefox, and it doesn't at all do what I expected, so the only solution I can think of is scripted placement.
Edit: Actually, it kinda works with the div set with display: table and width. *shrug*