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;
}
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
I have a 4 element horizontal list using a sprite image as the li background that I've been trying to get centered in the footer div. At this point I think I'm just running in circles randomly changing styles trying to get it. Here's the relevent CSS and HTML:
#footer-share-links {
width:400px;
text-align:center;
margin:10px auto;
background:#FF6666;
border: 1px solid red;
height:36px;
}
#footer-share-links ul {
padding:0;
position:relative;
list-style-type:none;
}
#footer-share-links li {
margin:0 auto;
display:inline;
float:left;
text-align:center;
position:absolute;
}
#footer-share-links li, #footer-share-links a {
height:36px;
}
#ftr_facebook {left:0px;width:25px;}
#ftr_facebook {background:url('sprites/spriteGlobal.2014-0001.png') 0 0;}
#ftr_twitter {left:30px;width:26px;}
#ftr_twitter {background:url('sprites/spriteGlobal.2014-0001.png') -25px 0;}
#ftr_gplus {left:61px;width:26px;}
#ftr_gplus {background:url('sprites/spriteGlobal.2014-0001.png') -77px 0;}
#ftr_linkedin {left:93px;width:26px;}
#ftr_linkedin {background:url('sprites/spriteGlobal.2014-0001.png') -51px 0;}
The background and border on the div are just to help me see the box. The HTML is:
<div id="footer-share-links">
<ul>
<li id="ftr_facebook"></li>
<li id="ftr_twitter"></li>
<li id="ftr_gplus"></li>
<li id="ftr_linkedin"></li>
</ul>
</div>
Using this I get a centered red box from the div, but the list elements are pushed to the left edge. If I add margin:0 auto; to the UL it stays the same. If I add margin-left:100px it does move it towards center, but I don't want to use a fixed value unless I absolutely have to.
Stripped out some of the competing properties to the bare minimum.
JSfiddle Demo
CSS
#footer-share-links {
width:400px;
text-align:center; /* this centers the inline-block list items */
margin:10px auto;
background:#FF6666;
border: 1px solid red;
height:36px;
}
#footer-share-links ul {
padding:0;
position:relative;
list-style-type:none;
margin: 0;
}
#footer-share-links li {
display:inline-block;
width:26px;
height:36px;
background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-6.jpg);
background-position: center;
}
Here is one way of doing it, try the following CSS:
#footer-share-links {
width:400px;
text-align:center;
margin:10px auto;
background:#FF6666;
border: 1px solid red;
height:36px;
line-height: 36px;
}
#footer-share-links ul {
padding:0;
margin: 0;
list-style-type:none;
}
#footer-share-links li {
margin: 0;
display: inline-block;
width: 50px; /* demo only */
background-color: yellow; /* demo only */
}
#footer-share-links a {
display: block; /* or inline-block */
}
Demo: http://jsfiddle.net/audetwebdesign/yN5MP/
As suggested earlier, remove any floats and absolute positioning.
For the parent container #footer-share-links, set the line-height equal to the height value, that way the vertical centering takes care of itself.
On the ul element, make sure to zero out the margins.
Finally, on the li elements, use display: inline-block so that the width is recognized.
You can use your id names to specify width's on the individual li elements as needed.
On the a elements (links), use display: block to get make the link take up the width of the li element so that the link has enough active/control area.
What you need to do:
#footer-share-links li {
/*margin:0 auto;*/
display:inline-block; // change this to inline-block
/*float:left;*/
text-align:center;
/*position:absolute;*/
}
#footer-share-links ul {
...
...
margin: 0; // add this
}
Take out those I commented out, it works
I want my blockquotes aligned, not overlapping. The issue can be seen here: http://ymirsgirlfriend.tumblr.com/post/86505956778/caramelcheese-carry-on-my-wayward-butt
Example Image of requirement.
Here is my CSS:
blockquote {
display: block;
width:200px;
margin-left:20px;
margin-right:10px;
border:1px solid #bbb4b4;
padding: 5px 5px 5px 5px;
border-radius:0px;
color:#aaaaaa;
background-color: #fafaf7;
width:180px;
margin-left:0px;
cursor:url(http://img69.imageshack.us/img69/7673/cursorw.png);
}
Thank you to anyone who looks at the question!
Avoid width and set a negative margin-right. Keep the padding and don't use overflow:hidden, otherwise the content will get cut or too close to the border.
blockquote {
/* width: 200px; no width!*/
margin-right: -6px; /*this is the code*/
}
A JSfiddle would be useful but
#stuff > blockquote {
overflow:hidden;
}
seems to do the trick.
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
Could anybody write the CSS fragment to do this?
<div class="container">
<span class="left">Left</span><span class="right">Right</span>
</div>
Here's the CSS for .container:
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
}
Notice the position is absolute because it is "absolute positionated" on its containing element.
I've alredy tried float:left/float:right on the two nested elements but nothing happens.
Set the elements to block, set a width and float them.
.left{
display: block;
float:left;
width: 100px;
}
.right{
display: block;
float:right;
width: 100px;
}
Example: http://jsfiddle.net/LML2e/
float: left and float: right will work perfectly when you set a (relative or absolute) width for your .container div
Demo
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
width: 200px; //either absolute width
width: 100%; // or relative width
}
Side note: If you set the .container to width: 100% you will get ugly scroll bars due to the margin. Just use the margin in the .left and .right classes. See here.
You need to set a width in order to use float. If you want a width of 100% you can set .container { width: 100%; } or improve your code into something like:
.container {
position:absolute;
bottom:5px;
left:5px;
right:5px;
}