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;}
Related
Are there any way to make this jsFiddle code look in two columns like
a b
c d
c
c
e f
g h
so that the height of the border of d is the same as the border of the big block c with pure css?
The number of blocks is unpredictable.
The blocks should be in two columns.
The blocks that are in one line should have the same height (the height of green borders should be the same).
The content of each block is the text and could be different in its size.
Is it possible to make it with pure css?
I think that souldn't be hard if there were no additional inner divs that I named <div class="baddiv"></div> to emphasize the html code structure is a little bit more complicated.
Applying class names and css are allowed for the solution.
Thank you.
And here is the jsFiddle code:
<style>
.main{
overflow:hidden;
width:204px;
}
.inner-div{
border:1px solid green;
width:100px;
float:left;
overflow:hidden;
}
</style>
<div class="main" style=" border:1px solid red;">
<div class="baddiv">
<div class="inner-div">a</div>
<div class="inner-div">b</div>
<div class="inner-div">ccccccccccc<br/>cccccc<br/>cccccc</div>
</div>
<div class="inner-div">d</div>
<div class="baddiv">
<div class="inner-div">e</div>
</div>
<div class="inner-div">f</div>
<div class="inner-div">g</div>
<div class="inner-div">h</div>
</div>
P.S. Also, adding
.inner-div{
min-height:200px;
}
is not a perfect solution as a lot of spaces would appear in most of blocks and there is no guarantee one of divs would not contain the text that is bigger than 200px in height.
Flexbox would be an ideal way to fix this. But if you need browser support, you can force your div's to behave like tables through:
display: [table|table-row|table-cell]
http://jsfiddle.net/pVHw6/
div
{
display:table-cell;
}
This can solve your problem. However you need to realign the div's according to layout.
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;}
The solution doesn't need to be supported by all browsers.
<div id="page">
<div id="header"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</div>
Let's see. page got width:100%;height:100%. header and content got both width:100% (is this required anyway?), but they got fixed heights, let's say height: 200px and height: 500px. Now I want the footer to fill the rest of the page.
Any solution for that?
Thanks for your help.
you could use something like this:
html,body,#page {height:100%}
#page {position:relative;}
#header {height:200px;background:green;}
#content {height:500px;background:grey;}
#footer {position:absolute;top:700px;bottom:0;background:red;width:100%;}
in fact you set position:absolute for #footer and give a value for top 700px; the total height of #header and #content and bottom:0 so will fill the empty space.
Demo: http://jsbin.com/icuza3/2
as far as i know css3 can do "Maths" adn simple functions
see w3c-specifications , search for "calc" ;)
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'm slicing a psd, and there is a part of the screen that will repeat with as many items as it needs, similar to the question list of stackoverflow.
It needs to have this structure:
Is it possible? How should the css be?
Thanks!
You could try the following:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
}
#user-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<!-- The rest of the page's content goes here. -->
</div>
</div>
This makes the "content" div fill the rest of the space that "user-content" doesn't fill. It will only be an issue when your content is taller than the user content... but that's a different problem :)
This is another possiblity:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
float:left;
}
#user-content {
float:left;
}
#page-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<div id="page-content">
<p>This should take up the rest of the space.</p>
</div>
</div>
</div>
The problem lies in your left div where you state "width can increase depending on the content". How is this width defined? The div to the right can expand to 100% of the remaining space but you must define the relationship between the left and the right divs by either providing a fixed width to the left div or providing a percentage to both that equals 100%.
Well, as you’ve probably seen, so.com used fixed width div’s to achieve your layout goal.
Obviously my first tries setting the width automatically failed, but maybe I’ve a useful workaround for you: use left and right floating of both boxes.
<div style="border: 1px solid #000000; width: 60%">
<div style="border: 1px solid #444444; float: left;">
some text
</div>
<div style="border: 1px solid #999999; float: right;">
foo
</div>
</div>
Of course this will only help if I understood your question correctly ;)
As far as I know the only way to give your variable width container a variable width and float it to the left is to give it {width:auto;float:left;}
But I don't know if you can do anything useful with this because if you have text or a lot of small fixed width items to put in this container, they will keep expanding out along the first line until they've filled the width of the outer div before going on to the second line. They won't fill up the whole height and then push outward gradually as the text gets too much to contain.
Just a thought - you might be able to do some nifty JavaScript (possibly using jQuery?) which sizes those divs like you need them.