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/
Related
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!
Here's an example of my code:
http://jsfiddle.net/9ECkE/1/
HTML
<div class="wrapper">
<div class="sidebar">
<ul>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
</ul>
</div>
<div class="content">
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
</div>
</div>
CSS
.box{float:left; padding:20px; border:1px solid red;}
.three{clear:left;}
.sidebar{float:left;}
I have tried adding float:left to .content{} however, that only works when the screen is wide, for mobile displays the full content area ends up going below the sidebar. If I try using span7 (bootstrap, width: 58%), then it doesn't work for wide screen.
Is there another way I can set the arrangement without needing to set the width?
The problem you are having with float is due to the height of your first left float. There is enough height on the left float to prevent box 1 and 2 from falling below it but not box 3. There are two ways to prevent this. You can add artificial height to .sidebar with height: 300px; or something like that. Or you can use a more common practice and use left and right floats. So your .sidebar would be float: left; and your .content would be float: right;. If you choose to go with different floats you should declare the width for each say .sidebar would have a width: 30%; and .content would have a width: 70%;. You can play around with the percentages for the widths they are there to help format the page style. If you use borders you will have to change the percentages to accommodate them.
Clear your content class
as like this
.content{overflow:hidden;}
Demo
-------------------------
Option two
and define your content class
float left
as like this
.content{float:left;}
I have a wrapper containing an inner wrapper, and that inner wrapper contains 2 floating divs. The left one contains more content than the right one, so it's height is greater than the one on the right. What I am looking for is that both of the containers would have the same height.
http://jsfiddle.net/Kh2Fh/
My html:
<div id="wrapper">
<div id="sub-menu">
<div id="left-column" class="column">
Agenda</br>
Here I put some texte
</div>
<div id="right-column" class="column">
sdfdsf
</div>
</div>
</div>
My css:
body{
background-color:#E5E5E5;}
#wrapper{
background-color:#FFFFFF;
width:800px;
margin-left:auto;
margin-right:auto;
overflow:auto;}
#sub-menu{
margin:10px;
width:780px;
position:relative;
float:left;}
.column{
float:left;
height:100%;}
#left-column{
width:500px;
background-color:yellow;}
#right-column{
width:280px;
background-color:magenta;}
You cannot do this via CSS alone using floated elements, unless you can guarantee the height of each column (which you generally can't, with such a fluid medium as the web). However, you do have options:
Using display: table-cell: http://jsfiddle.net/8LdQk/3/. Unfortunately, this will not work in IE6 or 7. This blog post detailing its use might be helpful.
Using JavaScript: http://jsfiddle.net/8LdQk/5/.
Using Dan Cederholm's classic faux-columns trick.
use a 1 pixel high repeating background image with 500 px wide yellow and 280 px wide magenta. When one column increases in size - you get the illusion of both columns being the same height.
<div class="backgroundColumn">
<div>
Left column
</div>
<div>
right column
</div>
<div class="clear">
</div>
</div>
This seems to do the trick for me. Can it be that simple? :)
.column{float:left;height:100px;}
I have a block of html like this. Judging by the background color of the divs, the outer div is not containing the inner div, unless I remove "float:left" from the inner div, or add "float:left" to the outer div. Why is that? http://jsbin.com/ihiqoz/2/edit
<div style="width:900px; background-color:#1EFF1E">
<p>outside</p>
<div style="float:left; width: 25%; background-color:#BD78C8">
<p>inside</p>
</div>
</div>
You need to clear your float:
<div style="width:900px; background-color:#1EFF1E">
<p>outside</p>
<div style="float:left; width: 25%; background-color:#BD78C8">
<p>inside</p>
</div>
<div style="clear: left;"></div>
</div>
Floating elements break out of the layout, so your div doesn't get considered by the elements around it. The clear css property forces an element to move after the last floating element, so when you place an empty div below your floating element by giving it the clear style, the outer div will stretch to contain it.
#ray; if you have float in your child element so you have to clear it's parent so just write overflow:hidden in it's parent div to clear it.
For Example:
<div style="width:900px; background-color:#1EFF1E; overflow:hidden">
<p>outside</p>
<div style="float:left; width: 25%; background-color:#BD78C8">
<p>inside</p>
</div>
</div>
read this article for more http://www.quirksmode.org/css/clearing.html
You can also add <BR> at the end of the div, after the floated one.
Edit: You need to clear the div.
How to (top) align 3 div that should be relative to a previous div (but not between them)?
I can't use floats or position:inline-block (if you set display:none on 2 divs the last one shouldn't move).
position:absolute neither because there's a relative footer underneath.
vertical-align:top doesn't work using spans - any workaround?
I tried using a wrapper but it can't work cause the height of the divs is not fixed.
The height of the wrapper gets completely ignored anyway (by the following footer) unless Im using relative children.
Any ideas?
HTML
the order is important and the wrapper is optional (to position the side divs)
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
<div id="footer"></div>
CSS
#left {float:left}
#middle {margin:0 auto}
#right {float:right}
#footer {clear:both}
unless someone comes up with something easier
ill accept my answer in 24h