Here's the problem. I got simple html template:
<div class="wrapper"><div class="inside">
<div class="left"><p>Lorem ipsum...</p></div>
<aside><p>Lorem ipsum...</p></aside>
<div class="left"><p>Lorem ipsum...</p></div>
<aside><p>Lorem ipsum...</p></aside>
<div class="left"><p>Lorem ipsum...</p></div>
<aside><p>Lorem ipsum...</p></aside>
</div></div>
And simple CSS:
div.wrapper {width:1020px;margin:0 auto;}
div.wrapper .inside {padding: 10px;}
div.left {width:700px;background:#EEE;float:left;border-top:1px solid #000; clear: left;}
aside {width:300px;background:#CCC;float:right;border-top:1px solid #000; clear: right;}
I want all divs to be on the left side of the page, one after another, without any spacing and all asides on the righ side. And there it is. No matter how high the content of asides is the divs are working fine. But if the content of any div is too hight I'm getting empty space between asides, like there was something like clear:both along with this div.
Example:
I want it to always look like this, no empty spaces whatsoever:
I cannot change html (divs&asides order), I can change only CSS. I can use html5 and css3.
http://jsfiddle.net/HRp2H/
You could add a CSS gradient to simulate full columns:
http://jsfiddle.net/HRp2H/5
div.wrapper {
width:400px;
margin:0 auto;
padding: 10px;
}
div.wrapper .inside {
background: -moz-linear-gradient(left, #eee 250px, #ccc 250px);
overflow: auto;
}
div.left {
width:250px;
float:left;
border-top:1px solid #000;
clear: left;
}
aside {
width:150px;
float:right;
border-top:1px solid #000;
clear: right;
}
Here I've moved the padding that you had on .inside to its child elements: http://jsfiddle.net/HRp2H/3
UPDATE: Here's how you might do it using jQuery. I'd use my earlier answer as a fallback.
http://jsfiddle.net/HRp2H/7/
.leftCol, .rightCol {float: left;}
.leftCol .left, .rightCol aside {display: block}
div.left {
display: none;
...
}
aside {
display: none;
..
}
var myLefts = $('.inside').clone().find('aside').remove().end().html();
var myAsides = $('.inside').clone().find('.left').remove().end().html();
$('.wrapper .inside').html('');
$('.wrapper .inside').append('<div class="leftCol" />');
$('.wrapper .leftCol').append(myLefts);
$('.wrapper .inside').append('<div class="rightCol" />');
$('.wrapper .rightCol').append(myAsides);
Check this fiddle out:
http://jsfiddle.net/HRp2H/4/
It utilises a css hack to make floating columns the same height:
margin-bottom: -500px;
padding-bottom: 500px;
overflow: hidden;
and then
overflow: hidden;
on the main div
Try using JQuery masonry. It can stack all of your DIV blocks neatly on top of each other
Related
I'm struggling to understand divs.
I want to have the 'nav' panel expand vertically as required. The second issue I have is that I can't seem to get padding to work. Any changes I make tend to end up with the 'section' div drop below the 'nav' div.
Please see below jsfiddle and code.
Thanks in advance.
https://jsfiddle.net/s59cwy9s/
<div id="container">
<div id="nav">
test
</div>
<div id="section">
test
<br><br><br><br>
test
<br><br><br><br>
test
</div>
</div>
#container
{
width: 1156px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 10px rgb(0,0,0);
position: relative;
background-color: transparent;
height: auto;
}
#header
{
background-color:black;
color:white;
text-align: center;
padding:5px;
}
#nav
{
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
float:left;
padding: 15px;
display: inline-block;
height: auto;
}
#section
{
/*float: none;*/
padding: 10px;
display: block;
/*position: absolute;*/
/*overflow: auto;*/
background-color: white;
width: auto;
height: auto;
}
This may be due to the fact that your name bar doesn't span the height of the webpage completely. Try something like height :100% for the navbar. It might do the trick.
Here is some help :
https://jsfiddle.net/6ubhyL5k/
Some advices :
Take time to really understand how the page flow works (float : left/right) so you will then understand how padding and margin work when you have floating div
Use what you really know and don't improvise :)
Don't use br to make spaces between blocks (margin and padding are what you should use)
Take a look at how bootstrap works and never forget the responsive design
First I will recommend is using box-sizing attribute
It contains any type of padding or borders within the container's width and height. Find more about it Here. So i suggest:
*
{
box-sizing:border-box;
/* Use browser prefixes if u want support for other browsers */
}
Second is add a class to the container which contains elements wit float css attribute like clearfix and add this code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
or you can just create a div after the container containing elements with float css attribute and clear it.
<div class='clear'></div>
.class
{
clear:both;
}
Using float as much as it is useful brings about a problem in layout if not properly used. https://css-tricks.com/all-about-floats/
My Solution:
html,body {height:auto; width:100%; background:red; }
* { box-sizing:border-box; margin:0; padding:0; display:block; position:relative; }
#container
{
min-width:800px;
height:auto;
margin:0 auto;
width:100%;
}
#nav
{
float:left;
width:30%;
padding: 15px;
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
background:white;
}
#section
{
float:left;
width:70%;
padding:0 100px;
background:yellow;
}
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Hope It Helps You. Though i recommend researching more on layouts since there's other layout which will give you less problem than floats.
Try
#section{
clear:both;
}
JSfiddle
clear:both allows floated divs to stop continuing on the same line with the other floated ones, and drop below.
Update: https://jsfiddle.net/s59cwy9s/2/
You could fix your issue by giving a margin-right to the #nav
In the following code, the #wrapper div contains the #left and the #right div. But they do not turn out to be contained inside the #wrapper div.
I want them to be treated as the content of the #wrapper div, so they are contained inside it, leaving the 10px padding applied to the #wrapper. Why are they displaced?
JSFiddle here.
<div id="wrapper">
<div id="left">Alpha</div>
<div id="right">Bravo</div>
</div>
The CSS is as follows.
#wrapper {
background-color:grey;
border-top: 1px solid black;
border-botton: 1px solid black;
padding:10px;
}
#left {
background-color:yellow;
float:left;
}
#right {
background-color:pink;
float:right;
}
I want to solve this without manipulating position attributes of the #wrapper as that might disrupt the normal structure of my page (I'm afraid so).
Because you are floating them so they sit outside of the DOM flow. If you want the parent to consider them, add overflow: hidden to the parent CSS or add a div at the bottom of the container with the rule clear: both;
Demo : http://jsfiddle.net/cros1mrv/1/
You should set the overflow of your wrapper to overflow: auto to flow around your floating divs.
#wrapper {
background-color: grey;
border-top: 1px solid black;
border-botton: 1px solid black;
padding: 10px;
overflow: auto;
}
See this fiddle.
Because of floating. One way to clear that is to use:
#wrapper {
overflow: hidden;
}
can someone please tell me what I am doing wrong here. I've tried to write the clear:both; also inside the floated elements but nothing seems to work.
I would like those small orange boxes inside the green border and not like this (see image).
Fiddle here and code:
<style type="text/css">
.wrap {
border:solid 2px green;
}
.wrap div {
margin: 0 0 0 10px;
padding: 10px;
text-align: center;
width: 67px;
float:left;
}
.wrap div span {
display:block;
background-color:orange;
margin:2px;
}
.clear {
clear:both;
}
</style>
<div class="wrap">
<div>
<span>xx</span>
<span>xx</span>
<span>xx</span>
</div>
<div>
<span>yy</span>
<span>yy</span>
<span>yy</span>
</div>
<div>
<span>zz</span>
<span>zz</span>
<span>zz</span>
</div>
<div class="clear"></div>
</div>
add
display: inline-block;
to your wrap container css
Fiddle: http://jsfiddle.net/Pv6m2/1/
Updated Fiddle
You're floating the <div class="clear">. That's why it does not work.
Try this selector for the floating divs instead so it does not match the clearing div:
.wrap div:not(.clear) {
margin: 0 0 0 10px;
padding: 10px;
text-align: center;
width: 67px;
float:left;
}
Another way of solving this, is to add float: none to your clearing class:
.clear {
clear: both;
float: none !important;
}
It is happening because .wrap does not have any height.
Add
overflow:hidden;
to .wrap. It will give height to it.
Updated fiddle here.
Add float:left; on the .wrap div
Demo
.wrap {
border:solid 2px green;
overflow:hidden;
}
This should be in your css.
Alternatively use
.wrap {
border: solid 2px green;
overflow: hidden;
}
and remove the <div class="clear"></div>
All of the other answers are perfectly fine too. Enjoy learning about floats!
I have a .container in that there are n number of (left-block and right-block) div's.
left-block is floated left and right-block is floated right.
But I am not getting margin after 1st left-block and right-block and 2nd left-block and right-block
here is a demo: JSBin
Add margin-top to .left-block as well as .right-block
Demo
.left-block {
float:left;
border:solid #CCC 1px;
width:350px;
height:125px;
background:transparent;
clear: right;
margin-top: 10px;
//position:relative;
}
.right-block {
float:right;
border:solid #CCC 1px;
width:350px;
height:125px;
background:transparent;
clear:right;
//position:relative;
margin-top: 10px;
}
P.S Remove the <br /> tags, they are not required.
The above will add 10px margin to top boxes as well, inorder to get rid of it, use the selectors below.
.container > div:nth-of-type(1) {
margin-top: 0;
}
.container > div:nth-of-type(2) {
margin-top: 0;
}
http://jsbin.com/ayiziNa/7/
You have to be careful with floated elements because they become inline elements - you might want to define them as inline-block first, so they are able to maintain margin without causing other problems
Here is the code I applied:
.container > div {
display: inline-block;
margin-top: 20px;
}
I have 2 divs and I want to align them in the same line. The html code is:
<div class="box">
<div class="boxleft"> </div>
<div class="boxright"> </div>
</div>
I tried 'float: left;' and 'float: right;' but the background is going crazy, it apears just on ~30px of the height. I tried to put a height('till then I didn't use height in CSS). It didnt' work. I tried 'display: inline-block' too, but without succes.
Thanks.
CSS:
.box {
width: 956px;
margin-left: auto;
margin-right: auto;
background: #584231;}
.boxleft {
width: 706px;
margin-right: auto;
border-right: 2px solid black;}
.boxright {
width: 250px;
margin-left: auto;
float: right;}
Float: left should do the trick depending on the width of the parent boxand the width of boxleft and boxright. If the parent box has width: 500px; and boxleft and boxrightboth have width: 250px; float:left;. You should be fine.
Have a look at the css properties float:left and clear:both.
http://www.w3schools.com/css/css_float.asp
I put some colors on each background to make it clear, you're maybe lacking a width and height for each element..
.boxleft , .boxright {
float : left;
width : 200px;
height : 100px;
margin : 10px;
}
.boxleft {
background : yellow;
}
.boxright {
background : blue;
}
http://jsfiddle.net/n9mHX/
On most modern browsers nowadays display: table-cell is the better alternative to floating.
You may use
display:inline-block;
or
float
or as per latest browser out you may use
display: table-cell
or you may use
clear: both
If you're not a "CSS guy", look at http://twitter.github.io/bootstrap/. With bootstrap, put two div on the same line is done this way :
<div class="row-fluid box">
<div class="span6 boxleft"></div>
<div class="span6 boxright"></div>
</div>
You need to clear the floats via clearfix on the parent container.
.box {
width: 956px;
background: #584231;
}
/* clearfix */
.box:after {
content: '';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.boxleft {
width: 704px;
border-right: 2px solid black;
float: left;
}
.boxright {
width: 250px;
float: right;
}
The border is adding 2px to your divs width. That's why I specified it with 704px.
Using inline-block as display for the left and right box should work too.