I tried using padding:10px to this example but it makes the div move to the left. Any solutions you might think?
That's because the width does not include any padding or margin you might have on the element. You'll need to subtract the 40px from your total width size to keep it the same size.
Try this:
.promo {
color:#5f5f5f;
width:240px;
height:74px;
background:url('http://i27.lulzimg.com/e1de57065d.png') no-repeat;
float:right;
display:block;
margin-top:20px;
padding: 20px;
}
http://jsfiddle.net/animuson/NncNE/3/
Edit: If you want, you can use padding: 15px 20px, I think it looks better and it's better centered.
Related
Good evening,
I have a question that has been bothering me for a while. I have 2 divs, 1 is menu wrapper and the other one is main content div. they have the following CSS code:
*{
margin:0px;
padding:0px;
}
#menu{
height:6%;
border-bottom: 4px solid #3D3D3D;
}
#mainContentDiv{
height:93%;
padding: 0.5%;
}
With the following code I get an overflow (scroll bar), which I would like to avoid. After a little Googling I've found that box-sizing: content-box; is supposed to fix it, but apparently it doesn't (or I'm doing something wrong).
Is there any way to fix this, without having any overflow or fixing the overflow with CSS?
Without the rest of the page I cant say for sure but try the overflow: property in CSS;
http://www.w3schools.com/cssref/pr_pos_overflow.asp
CSS example:
div
{
width:150px;
height:150px;
overflow:hidden;
}
I guess you have this situation : http://jsfiddle.net/rHBq2/2/.
Then you have scroll beacuse total height is calculated this way:
6% of #menu
+
4px border of #menu
+
93% of #mainContentDiv
+
1% padding of #mainContentDiv
=
100% + 4px
Then you have extra space in addition to the 100%. You can solve that with box-sizing:
#menu{
box-sizing:border-box;
height:6%;
border-bottom: 4px solid #3D3D3D;
}
#mainContentDiv{
box-sizing:border-box;
height:94%;
padding: 0.5%;
}
The demo http://jsfiddle.net/RDExD/
I'm working on a mobile version for my website and I'm coming across a problem. I have an outer div that I want to stretch across the entire width, and then I want 4 divs inside of that to be of equal width, with a margin inbetween them.
This would be easy if I did not need a margin between them. I would simple set width:25% and be done with it, but I want a 3 pixel margin between them. When you set this margin, the actual widths will be more than 100%, therefor taking up more than one line in the div.
I thought about trying to set a negative margin-left, but this just gets rid of the margin on the right.
CSS:
.wrapper {
width:300px;
height:50px;
background-color:#f00;
}
.inner {
width:25%;
margin-right:2px;
float:left;
background-color:#00f;
}
And here is a fiddle so you can see exactly what I mean.
By the way, I know that I could use some jQuery or JavaScript to accomplish this after the page loads, but I wanted to know if there is a purely CSS way to do this.
You can use calc() to subtract 2px from the widths of the elements.
jsFiddle example
.inner {
width:calc(25% - 2px);
}
However, this results in a 2px margin on the last element. To fix this, add in:
jsFiddle example
.inner:last-child {
width:25%;
margin-right:0;
}
Alternatively, you could just use percentage based margins.
You can use % for your margins too. IE:
margin: 0 0 0 1%;
Just make sure to compensate the margin with a decrease in width. So instead of 25% for "inner" class, you would use 24% for the above margin implementation.
Fiddle incorporating the above
You could make the columns spread 24% and do a % based margin between them.
.wrapper {
width:100%
height:50px;
background-color:#f00;
overflow:hidden;
}
.inner {
width:24%;
margin:0 .5%;
float:left;
background-color:#00f;
}
you could use border and box-sizing to include this 2px gap inside your 25% width.
If background is not a plain color, then border should be transparent and background-color drawn as inset shadow.
.inner {
width:25%;
border-right:2px solid transparent;
-moz-box-sizing:border-box;
box-sizing:border-box;
float:left;
box-shadow:inset 0 0 0 10000px #00f;/* make it big , so it doesnt matter wich size it becomes.*/
}
http://jsfiddle.net/g5mgD/4/
width a background-image and a translucid color http://jsfiddle.net/g5mgD/9/
I would divide the 100% within elements and the margin like so:
.inner {
width:24%;
margin: 0.5%;
float:left;
background-color:#00f;
}
If you want the outer margins and the inner margins to be of the same size, you may assign specific margins to the first element.
Sorry for asking the same question which is asked many many times.. but my case seems to be a bit weird.. i checked all posts, but couldnot find a solution for me.
http://jsfiddle.net/pBPQ7/1/ this is my code.
I want to make rightson always stick to leftson even if you resize the window.
in my big screen, the rightson is going far to right side of screen leaving leftson in the middle. i want them to stick to each other always.. how is it possible in css? :(
Just set a min-width to your #father and make your elements inline.
#father {
min-width:476px;
}
Check this code http://jsfiddle.net/pBPQ7/15/
use
float: right
on both elements.
Like this?
http://jsfiddle.net/pBPQ7/5/
Just add a
float:left;
to both.
Make these divs with display: inline-block;
jsfiddle.net/pBPQ7/10/
Check this:
you can add margin-right to your div and add width for your father div.
#father div {
display: table-cell;
}
#father {
display:table;
width:500px;
}
Here is jsfiddle http://jsfiddle.net/pBPQ7/17/
Depend on what you want to do.
If you don't need to have a fix width for the left or the right column, you can add % on your items.
Here is an example of what you want
CSS
#father{
width:100%;
}
#leftson{
width:65%;
background:#FFFFFF;
border: 1px solid #E7E6E5;
box-shadow: 0px 0px 35px gray;
float: left;
}
#rightson{
width:30%;
float: left;
box-shadow: 0px 0px 35px gray;
}
Otherwise, you can float your content (with the same size). Here is an other example
Another possibility, If you have a fixed div in width, you can resize only the other one when resizing. Here is an example
I'm using two css files [for my fluid width site here][1]: one where the left hand nav is 'display:none' when below a certain width.
I'm setting the right hand nav (with banners) to max-width:348px and a padding-left:20px.
The problem happens when I set the #main-content div to a percentage width: it doesn't resize correctly and causes it to drop down below the right nav when the window's reduced. It doesn't really make sense so not sure how the best way to go about it is.
Within the #main-content div, there is the #left-nav and #middle divs which are floated left and I've specified max-widths and padding.
When the window is below a certain width I'll remove the left nav with display:none, but until then I'd like the #main-content width to be fluid.
The left nav also needs to be a specific width to ensure the list items stay on one line.
Hope someone can help; it's probably something simple, but just can't make it to work..
Here's the CSS:
.right-nav {
padding:0 0 0 20px;
margin:0;float:right;
width:348px;
}
#main-content {
border: 1px solid #e3e3e3;
border-botom:0;
box-shadow: 0px -1px 18px #e0e0e0;
margin-top:-2px;
position:relative;
z-index:1;
float:left;
width:70.2%;
background-color:#fff;
height:100%;
float:left;
padding:30px 0 0;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
#left-nav {
float:left;
width:20.5%;
padding:15px 0 5px 20px;
background-color:#fff;
color:#888;
height:100%;
margin:0;
}
#middle {
width:72.3%;
background-color:#fff;
height:100%;
float:left;
margin:0 21px 5px;
}
error page: here
It's to do with the margins on your #middle element. Your widths are percentages but your margins are absolute values.
To give you an example, when you reduce the screen size down so #main-content is 824px wide, you end up with;
#left-nav: 20.5% = 168.92px plus padding-left = 20px;
#middle: 72.3% = 595.72px plus margin = 42px (21px either side)
Total = 828px and therefore #middle has to drop down below #left-nav
So it's a case of either reducing the percentages, making the margins percentages or adding a new #media screen style for those smaller widths.
*EDIT based on comments.
It's the same thing going on again - you're .right-nav element has a fixed width of 348px, the #main-content has a max-width of 67% but absolute padding of 20px either side;
So if the whole #content-wrapper has a width of 1069px you have;
.right-nav: 348px
#main-content = 716px; padding: 40px (20px left and 20px right).
Total = 1104px and the #main-content drops down. It's the mix of relative(%s) and absolute(pixels) that's causing the issues.
Hello I have a wrapper div around three float div, I want to wrap the wrapper around these divs,but I can't completely wrap them, I have given a top :25px to the floating div ,so this div overflow exacltly 25 px below the wrapper,
Here is my page http://jsfiddle.net/vpcxP/ ,see how floating div overflow the main container div at the bottom
PS:I don' t want to give overflow:hidden
have you tried adding padding to the bottom of #mainContainer?
For #mainContainer instead of height:auto use overflow:auto
#mainContainer
{
overflow:auto;
width: 835px;
margin:0 auto;
position:relative;
top:50px;
background-repeat:no-repeat;
background-image:url("Images/mainContainerBG.jpg");
box-shadow: 3px 10px 20px 5px #000;
}
you also may need to adjust the width. Set it around 900px.
You seem to have redefined style for .column. remove that property and use this for column.
.column
{
width:280px;
height:452px;
top:25px;
float:left;
left:5px;
box-shadow:3px 10px 7px 3px #4f4848;
background-color:#2c2b2b;
margin-left:5px;
}