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).
Related
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.
Im trying to position 3 div block horizontally but the 3 block positions itself on a new line.
Also when resizing I would like them not to move.
.left1 {
padding: 9px;
border: 1px solid #e7e7e7;
float: left;
margin-right: 40px;
text-align: center;
}
.left2 {
padding: 9px;
border: 1px solid #e7e7e7;
float: left;
margin-right: 40px;
}
.right1 {
padding: 9px;
border: 1px solid #e7e7e7;
float: left;
margin-right: 40px;
}
Rest of the code
http://jsfiddle.net/EWuR8/
the boxes are too wide for the container. i recreated here using only the 3 blocks and it works fine. just reduce the container width.
http://jsfiddle.net/zy4cN/
.block1,.block2,.block3{
float:left;
padding: 9px;
border: 1px solid #e7e7e7;
float: left;
margin-right: 40px;
}
.nomarg{margin-right:0!important;}
Provide some percentage widths. There is a catch here, in that you have to calculate other things into your widths. For example if you have padding, borders or margin, the width or thickness of those have to be considered as well.
For instance consider the following situation:
You have one containing box which is 200PX wide. You have two smaller boxes that you want to distribute evenly inside that 200 px, which means each of the two smaller boxes should be 100PX wide since 100PX + 100PX = 200PX the situation works fine.
Now let's assume you want a 1PX border around those boxes and a 10PX margin space between them. If you use 100PX for your box width they fail to sit next to each other. Why? If you consider 1PX of border on the left and 1PX of border on the right, of both boxes, thats 4PX of total border width. Then 10PX of margin space. If you use 100PX for the width of the boxes then you have 100+100+4+10 = 214PX Since 214PX is more than 200PX the floats break.
To make the above work, you must adjust the width of your boxes to be 93PX each. Re-calculating it per box... 93PX + 2PX + 5PX = 100PX per box at 2 boxes 100PX * 2 = 200PX.
Conceptual proof aside...
Each of your 3 boxes have an image inside them which is set to 500PX wide. In order to fit all 3 you would need at least 1500PX worth of space not including paddings, margins or borders.
By simply changing the width="500px" to width="100PX" makes them small enough that they stack next to each other fine. See this fiddle: http://jsfiddle.net/EWuR8/2/
Note however that if you shrink the jsfiddle window to be narrow enough, the boxes will break again.
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.
im having problem adjusting the width of the toolbar, when I increase the 100px it all goes wrong, also how can I round the margin corners?
heres a demo - http://jsfiddle.net/bArx5/
thanks a lot
When you increase the width of each a element it will wrap the list (if that is what you mean with "it all goes wrong"). You can prevent this by setting a minimum width of your ul element (fiddle here):
ul#list-nav {
margin: 20px;
min-width: 700px;
}
This has to be adjusted according to the width of your a elements.
I don't really know what you mean by "how can I round the margin corners", but if what you want is a rounding of your anchor elements, you can add a border radius to them:
ul#list-nav li a:hover {
background-color:black;
color:white;
border-radius: 5px;
}
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;
}