Can you, please, help me to remove the far right margin from my boxes?
I am trying to use the ::after pseudo element in CSS but it doesn't seem to work. (http://jsfiddle.net/ve0Laa8f/)
<div class="content-wrap">
<div class="content-center-wrap">
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"><p>test</div>
</div>
</div>
.content-center-wrap{
width:960px;
height:auto;
min-height:400px;
overflow:hidden;
background-color:#fff;
margin: 0 auto;
padding-top:40px;
padding-bottom:40px;
}
.index-cats-wrap{
display:block;
float:left;
width:298px;
height:400px;
margin-right:20px;
border:1px solid #95a5a6;
}
.index-cats-wrap::after{
margin-right:0px;
}
Thanks.
You need :last-child css selector.
.index-cats-wrap:last-child {
margin-right: 0px;
}
Fiddle: http://jsfiddle.net/ve0Laa8f/5/
Related
I am having extreme difficulty organizing two divs.
I have a footer, which includes two paragraphs. I want paragraph 1 hugging the left border of the footer div, and I want paragraph 2 hugging the right border of the footer div, AND these paragraphs must be on the same line.
My problem is that my divs are behaving oddly.
I have tried floating and giving widths but nothing seems to work, the paragraphs seem to keep piling on top of eachother.
Does anybody know how to resolve this? I just want to know how to write 2 paragraphs out on the same line hugging opposite borders.
HTML:
<div id='container'>
<div id='footer'>
<div id="errors">
<p>paragraph 1</p>
</div>
<div id="other">
<p>paragraph 2</p>
</div>
</div>
</div>
CSS:
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
}
JS FIDDLE which shows how my code is behaving oddly.
I have made changes to your fiddle https://jsfiddle.net/4vuywmn2/1/
You must float the errors div to the left and the other div to right and you must clear after the container around them closes.
To understand why you need to clear I suggest you read this answer
Is this what You want :
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
display:inline-block;
float:left;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
float:right;
}
<div id="container">
<div id='footer'>
<div id="errors">
<p>Paragraph 1</p>
</div>
<div id="other">
<p>Paragraph 2</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
You have to add display:inline-block; for error class, and using float : left for error, and right for other. And, on end, after other, You have to add one more div with clear:both;, how above div float will be cleared.
Try float and position attributes like this...
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
float:left;
position:absolute;
left:0px;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
float:right;
position:absolute;
right:0px;
}
try this mate, is this what you want:
#footer
{
height: 100px;
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
float: left;
margin-left:4.5%;
text-align:left;
color:red;
}
#other
{
float: right;
text-align:right;
margin-right:3%;
display:inline-block;
}
https://jsfiddle.net/4vuywmn2/5/
How lo align div blocks by the center .
I dont need left and right spaces.
I need clearly code which is align inline element
https://jsfiddle.net/ax7ddqba/
<div class="wrapper">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>
.wrapper{
border:1px solid red;
width:980px;
text-align:center
}
.block{
border:1px solid green;
width:200px;
height:100px;
display:inline-block;
vertical-align:top;
}
I can do like this:
https://jsfiddle.net/yhocvf7p/
.wrapper{
border:1px solid red;
width:980px;
text-align:left
}
.block{
border:1px solid green;
width:240px;
height:100px;
display:inline-block;
vertical-align:top;
margin-right:123px;
}
.block:nth-child(3){
margin-right:0;
}
but it's not what I need.
If I understand your desired result correctly, which is that the blocks stack horizontally, and then appear in the center of the next row when they run out of room, you should be able to achieve this with text-align:center property.
https://jsfiddle.net/y7rtptxr/1/
#wrapper {
border:red 1px solid;
text-align:center;
width:260px;
}
#wrapper .block {
background:green;
border:#000 1px solid;
height:40px;
width:60px;
display:inline-block;
}
If I got you right, you can use font-size: 0; on your container and then you set needed font-size on your children, so you get this.
You need something like this? http://jsfiddle.net/x2pmjkww/
I am making a blog page and i have designed this http://jsfiddle.net/thiswolf/6sBgx/ however,i would like to remove white space between the grey,purple and red boxes at the bottom of the big red box.
This is the css
.top_div{
border:1px solid red;
position:relative;
}
.pink{
width:40px;
height:40px;
display:block;
background-color:pink;
}
.green{
width:40px;
height:40px;
display:block;
background-color:green;
}
.orange{
width:40px;
height:40px;
display:block;
margin-top:120px;
background-color:orange;
}
.red{
width:600px;
height:240px;
display:block;
background-color:red;
margin-left:40px;
position:absolute;
top:0;
}
.bottom{
position:relative;
}
.author,.date,.tags{
height:40px;
display:inline-block;
position:relative;
}
.author{
width:120px;
border:1px solid green;
margin-right:0;
}
.date{
width:120px;
border:1px solid green;
}
.tags{
width:120px;
border:1px solid green;
}
.isred{
background-color:red;
}
.ispurple{
background-color:purple;
}
.isgrey{
background-color:grey;
}
this is the html
<div class="top_div">
<div class="pink">
</div>
<div class="green">
</div>
<div class="orange">
</div>
<div class="red">
</div>
</div>
<div class="bottom">
<div class="author isred">
</div>
<div class="date ispurple">
</div>
<div class="tags isgrey">
</div>
</div>
That'll be the actual spaces in your HTML. Whitespace between inline-block elements is actually rendered. If you remove the whitespace, then it'll work.
e.g.
<div class="bottom"><div class="author isred"></div><div class="date ispurple">
</div><div class="tags isgrey"></div>
http://jsfiddle.net/Yq5kA/
There are the whitespaces in your source code. You can either delete the whitespaces, or set the font-size of the container to 0 (0r 0.1px to avoid certain browser problems).
Just add a wrapper div around all elements, for example named "container", and give it:
font-size: 0.1px;
See updated fiddle:
http://jsfiddle.net/6sBgx/3/
Keep in mind that for this solution, if the containing divs should have text in them, you have to reset the font-size.
Change the CSS:
.author, .date, .tags {
display: block;
float: left;
height: 40px;
position: relative;
}
I know this isn’t the desired solution, but it works:
.isred{
background-color:red;
margin-right: -5px;
}
.ispurple{
background-color:purple;
margin-right: -5px;
}
.isgrey{
background-color:grey;
}
Here's my updated css will resolve the problem
.author, .date, .tags {
height: 40px;
display: inline-block;
position: relative;
margin-right: -4px;
}
There are actual spaces between HTML elements. So For removing this you can try to do following solutions:
Read This document
Try in Jsfiddle -
Remove the spaces - http://jsfiddle.net/6sBgx/7/
Negative margin - http://jsfiddle.net/6sBgx/8/
Set the font size to zero to parent element - http://jsfiddle.net/6sBgx/6/
Just float them left - http://jsfiddle.net/6sBgx/9/
Got problem with divs..
HTML
<div id="site-menu">menu1
<br>menu2
<br>menu3
<br>menu4
<br>menu5
<br>menu6
<br>
</div>
<div id="site-content">
<div class="site-content">
<div id="site-content-left">left</div>
<div id="site-content-right">right</div>
<div class="clear"></div>
</div>
</div>
CSS
.site-content {
background:pink;
}
#site-content {
background:red;
margin-left:250px;
}
#site-content-left {
background:orange;
float:left;
}
#site-content-right {
margin:5px 0 5px 0;
background:blue;
}
#site-menu {
float:left;
width: 250px;
padding: 20px 0;
overflow:hidden;
background:grey;
}
.clear {
clear:both
}
There is gap after clear both. The gap is big as menu div height (there is something with menu div).. Any solution please?
jsFiddle.
There are basically two way you can avoid big gap..
1) Instead of clear:both use clear:right
OR
2) Define proper floats for parent and sub divs instead of using margin. Proper div structure won't give above gap..
below is the style for each divs.
.site-content{background:pink; width:100%; float:left}
#site-content{
background:red;
margin-left:250px;
}
#site-content-left{background:orange;float:left; width:5%; }
#site-content-right{margin:5px 0 5px 0;background:blue; float:right; display:block; width:95%}
#site-menu{
float:left;
width: 250px;
padding: 20px 0;
overflow:hidden;
background:grey;
}
.clear {clear:both}
clear:both makes the element drop below any floated elements that precede it in the document.
Remove margin: left from #site-content
#site-content{
background:red;
}
check this fiddle
Even though my #tbr div align is set to right, sprites keep aligning to the left. Any ideas why?
Normal text, links and images work fine. (aligned to right, with 20px right margin, like it is supposed to be).
HTML:
<div id="topbar">
<div id="tbl">abc</div>
<div id="tbc">center</div>
<div id="tbr">
<div id="bar">
</div>
</div>
</div>
CSS:
#topbar {
width:100%;
height:36px;
padding-top:12px;
background-color:#e7e6e6;
border-top:1px solid #d0cdcd;
border-bottom:1px solid #d0cdcd;
}
#tbl {float:left; width: 30%; text-align:left; padding-left:20px;}
#tbc {display:inline-block; text-align:center; width: 30%;}
#tbr {float:right; width: 30%; text-align:right; padding-right:20px;}
#bar {margin-top:-5px;}
#bar a {
height:35px;
display:block;
background-image:url(http://goo.gl/yLbQ9);
float:left;
}
#sound {width:35px; background-position:0 0;}
JSFIDDLE: http://jsfiddle.net/B4n9T/
Not sure if I am following you here completely, but I think this might be your issue
#bar a {
height:35px;
display:block;
background-image:url(http://goo.gl/yLbQ9);
float:left; //you want this to be right
}
http://jsfiddle.net/B4n9T/3/
Here's how it's fixed:
position:relative; on #tbr and to stop it being incorrectly positioned again i've set the width:auto; on it too.
Just give float:right to you #bar a like this:-
#bar a {
height:35px;
display:block;
background-image:url(http://goo.gl/yLbQ9);
float:right;
}
i hope this will help you....
see the demo:- http://jsfiddle.net/B4n9T/5/
See this
Is this What you wanted?