I have a navbar:
HTML:
<div id="navbar">
</div>
CSS:
#navbar{
width: 100%;
height: 50px;
background-color: #F0F0F0;
border-color: #B2B2B2;
border-style: solid;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
For some reason, the border makes it offcenter, there is always some space to the left of the div but not on the right. How do I fix this problem???
Remove width: 100% from your CSS. The div is block-level, so will take up all available horizontal space. Adding an explicit 100% just introduces problems when you then give it padding or, in this case, border
Add border-width and CSS3 box sizing to fix the issue.
border-width:2px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
http://jsfiddle.net/ADwwP/1/
Related
I'm using this method to get my footer at the bottom of the page properly.
However, when I add a border to my footer, I end up with a scroll bar regardless of the content on the screen. My confusion is that:
I thought borders functioned outside padding but inside margins, such that like padding they do not effect any layout external to the div.
Is this wrong?
Here is my skeleton html:
<body>
<div class="wrapper">
<div id="top"></div>
<div id="body">
<div id="box1"></div>
<div id="box2"></div>
</div>
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
And here is the relevant CSS:
#top
{
height: 105px;
border-bottom-style: solid;
border-bottom-color: #044E97;
border-bottom-width: 7px;
}
#body
{
margin-top: 25px;
width: 100%;
background-color: white;
color: #282828;
font-size: 85%;
}
#box1
{
width: 460px;
float: left;
margin-left: 25px;
margin-right:75px;
}
#box2
{
margin-left: 25px;
margin-top: 15px;
padding-top: 0%;
padding-bottom:0%;
margin-bottom:45px;
width: 350px;
height: 320px;
float:left;
border-top-style: solid;
border-top-color: #FFFFFF;
border-top-width: 10px;
}
html
{
height: 100%;
}
body
{
min-height: 100%;
background-color: white;
margin: 0;
}
html, body
{
min-height:100%;
position:relative;
}
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -3em;
}
.footer, .push
{
height: 3em;
clear: both;
}
.footer
{
width:100%;
background-color: #0563A1;
border-top-style: solid;
border-top-color: #044E91;
border-top-width: 8px;
color: white;
font-size: 77%;
padding-top:.3em;
padding-bottom:.3em;
}
If I change the footer div to not have padding, the scroll bar clears.
This assumption is incorrect:
I thought borders functioned outside padding but inside margins, such that like margins they do not effect any layout
Margins and borders do affect layout—it is just that they are positioned outside the padding. The hierarchy of spacing starts from explicitly defined dimensions (width and height), followed by paddings, then borders, then margins.
If borders and margins did not affect layout, it would then be impossible to create spacing between elements (no margins) or that borders of adjacent elements will overlap (borders taking up no additional space).
The issue you are facing is that borders are computed not as part of the width or height—when you leave a 3em space at the bottom of your body, the footer that is 3em high will fill the space. But when you add borders and/or padding to it, it will add an additional vertical height (sum of top padding of 8px, and top and bottom borders of 0.3em each) to the defined height, causing it to exceed 3em and hence trigger an overflow.
To force your footer to stick to 3em, you can either use box-sizing: border-box to force the height attribute to take into account border widths and padding, or height: calc(3em - 0.6em - 8px) to manually reduce the height of the footer so the sum of height, top padding and top+bottom border widths remains at 3em total.
Change your box-model to border-box, like this:
html{box-sizing: border-box;}
Let me know if it helps.
To make it easier, I created a jsFiddle for this here: http://jsfiddle.net/ond1ju6p/
I am trying to get three divs to align besides each other on top of another div. I thought that giving the first two the width of 33.33% and the third one a width of 33.34%, it would equal the 100% width but that's not working.
What am I doing wrong?
Here is the HTML
<div class="box-top">
<div class="box-top-left">Pig One</div>
<div class="box-top-center">Pig Two</div>
<div class="box-top-right">Pig Three</div>
</div>
<div class="box-bottom">Three little piggies had an awesome day.</div>
And the CSS
.box-top-left {
background-color: #FFF;
padding: 0px;
border-width: 1px 1px 1px 0px;
border: 1px solid #C4C4C4;
border-radius: 5px 5px 0px 0px;
display: inline-block;
width: 33.33%;
}
.box-top-center {
background-color: #CCC;
padding: 0px;
border-width: 1px 1px 1px 0px;
border: 1px solid #C4C4C4;
border-radius: 5px 5px 0px 0px;
display: inline-block;
width: 33.33%;
}
.box-top-right {
background-color: #CCC;
padding: 0px;
border-width: 1px 1px 1px 0px;
border: 1px solid #C4C4C4;
border-radius: 5px 5px 0px 0px;
display: inline-block;
width: 33.34%;
}
.box-bottom {
background-color: #FFF;
padding: 10px 30px;
border-width:0px 1px 1px 1px;
border-radius: 0px 0px 5px 5px;
border: 1px solid #C4C4C4;
}
The issue is because Inline-block divs respect whitespace. Thus your divs have tiny gaps between them from the return key.
Change:
<div class="box-top">
<div class="box-top-left">Pig One</div>
<div class="box-top-center">Pig Two</div>
<div class="box-top-right">Pig Three</div>
</div>
to this:
<div class="box-top">
<div class="box-top-left">Pig One</div><div class="box-top-center">Pig Two</div><div class="box-top-right">Pig Three</div>
</div>
and then add the following css rule to your divs:
box-sizing: border-box;
and it works for me.
Border-box makes the border included in the width size. It has good cross browser support.
js fiddle: http://jsfiddle.net/ond1ju6p/2/
edit: you could also try adding display:flex to the parent instead of removing whitespace.
.box-top {
display:flex;
}
.box-top > div {
box-sizing: border-box;
}
Flex solution fiddle: http://jsfiddle.net/ond1ju6p/3/
You can use display table and table-cell like so:
.box-top {
display: table;
width: 100%;
}
.box-top-left,
.box-top-center,
.box-top-right {
display: table-cell;
width: 33%;
}
The problem is, that you add 1px of border to each side, and thus the boxes become larger than 33.33%. (The border is added by your browser after it has already set the width). The easiest way to fix it would be using calc(33.33% - 2px) as the width.
There are two issues hanging this up.
First is that inline blocks have implicit spacing, so they don't automatically bump right up against one another. That extra spacing is variable by browser and font size, so to get rid of it you can set font-size: 0 on the container element (in this case, .box-top). Of course you then need to reset the font-size on your child elements.
The next issue is that width doesn't include padding or border by default. So your boxes are 33.33%, plus another 2px (the border on both sides). The easiest fix for that is box-sizing: border-box on each child box, which will then include the border inside the width calculation. That would work on most newer browsers, but if your target browser doesn't support box-sizing (most do now, but check http://caniuse.com/#feat=css3-boxsizing) then you would need to fix it so that your boxes are even narrower to make sure the 1px border fits, and that can become a mess.
I would add "float:left;" and "box-sizing:border-box;" (without quotes) to .box-top-left, -middle, and -right and then "clear:both;" to .box-bottom. If that doesn't work I would also make all the widths for those 3 boxes 33.33%.
I did a quick search on stackoverflow and found some ways to solve it but none works.
I have my HTML code like below:
<div id="product_box">
<div id="pro_img"><img src="images.jpg'" width="140px"/></div>
<div id="pro_text">
</div>
</div>
and my CSS:
<style>
#product_box {
border: 1px solid;
border-color: #8dd5f6;
margin-top: 8px;
margin-left: 4px;
margin-right: 4px;
width: 330px;
height: 196px;
float:left;
}
#pro_text{
float:left;
width:189px;
height: 196px;
background-color: #CCC;
}
#pro_img {
float:left;
border-right:1px solid #8dd5f6;
width:140px;
height: 196px;
}
</style>
The #pro_img is to the left and #pro_text is to the right, it works fine at default zoom and large zoom in but the problem is that when I zoom out the pro_text (right div) falls off the container box.
I found someone says that I need box-sizing: border-box; inside of my CSS. I tried it and put it like this:
<style>
#pro_img {
float:left;
border-right:1px solid #8dd5f6;
box-sizing: border-box;
width:140px;
height: 196px;
}
</style>
It won't fall off anymore but the border is invisible as it border the image from inside.
I disable the border-right from #pro_img, the problem's gone but I want a border-right that would separate the image and the text.
Total width needed: 140(img)+1(border)+189(text) = 330px just fit the container box. I tried increase box width to 332px but it won't help.
Thank you.
That is because you are using float:left I cleared that used margin instead see this http://jsfiddle.net/3pmmjLx8/
UPDATED CSS CODE
#pro_text{
margin-left:141px;
width:189px;
height: 196px;
background-color: #CCC;
}
I'm trying to create an HTML element that looks like this:-
Basically, a <div> or other element with a border, and the internal (possibly multi-line) text centred within the div, but extending into the border area.
So far, the only scheme I have that works is to use three(!) divs : One for the border, a second one as a container for the third one, to ensure the vertical centring is right.
<div class="BORDER" style = "left: 190px; top: 50px;">
</div>
<div class = "WRAPPER" style = "left: 190px; top: 50px;">
<div>TEST THREE</div>
</div>
This feels awkward: Is there a way of achieving the same look using fewer elements?
Restrictions (clarified)
The text can have one or more lines
The border will be an image, and will eventually be stretched via the border-image mechanism.
JSFiddle with CSS and some other (failed) attempts is here. http://jsfiddle.net/6wB3k/
I'm not sure if it's adaptable to your real use case but I can achieve your display with only one div :
HTML :
<div class=dystroy>TEST FOUR</div>
CSS :
.dystroy {
position: fixed;
left: 50px; top: 50px;
margin: 0px;
padding: 16px;
height : 48px;
width : 50px;
display : table-cell;
vertical-align : middle;
text-align : center;
color: #000000;
font-size : 16px;
font-family : Calibri;
}
.dystroy:after {
position: relative;
display : table-cell;
top: -48px; left:0px;
border: solid;
border-width: 16px 16px;
border-color: #e0e0e0;
height: 32px;
width: 50px;
content:" ";
z-index:-1;
font-size : 16px;
}
Demonstration
EDIT : in fact there's no real dynamic vertical centering here, which would need an additional div.
If you are open to use CSS3 shadows, then you can try this:
Fiddle: http://jsfiddle.net/6wB3k/2/
div {
width: 50px;
height: 50px;
text-align: center;
border: 1px solid #ccc;
-webkit-box-shadow: 0 0 0px 11px #ccc inset;
}
Syntax: box-shadow: x-offset y-offset blur spread #color inset
You can experiment with blur and size to adjust according to your requirements.
Update:
As per your comment regarding the need to use border-image, here is one try using background-image instead of a 9-grid border-image. I think, this can suit your purpose of using images?
Updated Fiddle: http://jsfiddle.net/6wB3k/3/
div {
width: 50px;
height: 50px;
display: table-cell;
vertical-align: middle;
text-align: center;
background-image: url(http://placehold.it/11x11), url(http://placehold.it/11x11), url(http://placehold.it/11x11), url(http://placehold.it/11x11);
background-position: left top, left bottom, top right, bottom right;
background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;
}
The following works:
<div style="border: 9px solid #ccc; width: 40px;">
<p style="margin: 0 -.5em;">Test text</p>
</div>
However, if you're spilling over your border, it's not strictly a border in the literal sense so much as it is a background image; perhaps there's another way of looking at your layout?
How do you make a div so that its border corners are rounded?
Here it is:
<style type="text/css">
div.test
{
width: 115px;
padding: 10px;
border: 2px solid #000;
border-radius: 15px;
-moz-border-radius: 15px;
}
</style>
<div class="test">This is some text!</div>
Use the border-radius property. The higher the specified amount (typically in px), the more rounded your shape. Example:
myDiv { border-radius:30px;}
Hope that helps.
add this css:
border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
With CSS add the code: border-radius: 10px.
I use 10px for example, but you can experiment with however amount of pixels you like.
If you don't want to rely on pixels, you can always use %
border-radius: 50%;