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.
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.
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;
}
learning html/css here. I'm trying to add a border-bottom to my .menu ul li ul li
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
border-bottom: 1px solid #911;
}
but the border gets cut off on the right because of the right padding in this style:
.menu ul li ul{
position:absolute;
right: 0px;
border:1px solid #911;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
-moz-box-shadow:0 1px 5px #CCCCCC;
box-shadow:0 1px 5px #CCCCCC;
margin-top:0px;
display:none;
padding:0px 16px 0px 0px;
}
I'm confused about why the right padding of 16px is needed... When I remove the right padding my drop down menu no longer displays correctly (the border is off and when you drop down the menu it expands to the right and causes a scroll bar to appear).
Also there is missing space on border in the bottom left corner of the drop down menu, any ideas why this is happening?
http://jsfiddle.net/vJaaR/
Thanks a ton! I really appreciate any insights.
If you use a width of 100% AND also apply border, padding, or margin, then your content will be larger than 100%.
For example, if your page width is 900 pixels wide.
100% of 900px is 900.
If you apply a 16 pixel padding to both the left and right, that adds 32 pixels.
If you apply a 1 pixel border, that's another 2 pixels.
If you add a 10 pixel margin to the left and right, that's another 20 pixels.
When you add it all up, the width of your element will be:
900 + 32 + 2 + 20 = 954
update
If you have a block level element (display: block), you don't need to specify the width as being 100%. If you tell it to have a specific padding, margin, and border, then the width will take up the rest of the space (width: auto).
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.