I want to put padding on a css border. Pull it inside a div, away from the edge. Is this possible using css (css3 is fine, webkit).
Here is the design.
I did this by placing a div inside a div, then give a border to the inner div. I want to make the markup slim as posible so I want to use only one div if posible.
Thank you.
You should be able to do this with the CSS outline property:
<style>
.outer {
outline: 2px solid #CCC;
border: 1px solid #999;
background-color: #999;
}
</style>
<div class="outer">
example
</div>
Instead of borders, you may use outline property:
div{
height:300px;
width:500px;
background-color:lightblue;
outline:dashed;
outline-offset:-10px;
}
<div></div>
http://jsfiddle.net/H7KdA/
Padding around the border (which would separate it from the edge) is called the 'margin': for further details, see Box model.
Unfortunately, without adding another div, I don't think you can do this with just CSS.
The more complicated your design gets, the more likely you will need extraneous html tags.
Your other (also not great) option is an image background, or if it somehow makes you feel better, you can add elements client side with JQuery, thereby maintaining the "purity" of your server side files.
Best of luck.
You could do that by creating a inner div with the borders you want and a outer div with a display: table. Something like this:
<style>
.outer {
background: #ccc;
display: table;
width: 400px;
}
.inner {
border: 2px dashed #999;
height: 50px;
margin: 5px;
}
</style>
<div class="outer">
<div class="inner">
</div>
</div>
you can define a margin for the first child element based on the parent element selector. e.g.
.outer:first-child {
margin : 10px;
}
This way any element put inside the .outer will automatically have 10px margin.
If you want this to be applied to any direct child of the outer element use "> *" instead. e.g.
.outer > * {
margin : 10px;
}
No, that's not possible. Padding, margin and border are all parts of elements, you can't give a border padding or a margin a border.
Maybe if you post an example of what you're trying to do we can come up with alternate solutions?
-update-
Looking at your example I'm afraid it's still not possible, at least not with just one div. Im not a fan of divitis either, but the extra div probably is the best option in this case.
Related
I have a problem with simple Images in DIV containers in IE7.
I have it a few times on my homepage, here is an example:
<div id="divSearchBottomLinks" class="divSearchBottomLinks">
Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
<div id="divSearchButtomLinksEffect" class="divSearchButtomLinksEffect">
<img src="Images/Design/DefaultPage/searchButtonEffect.png" alt=""
style="border: 1px red solid;" />
</div>
</div>
CSS is:
.divSearchButtomLinksEffect
{
float:right;
padding-right:8px;
}
.divSearchBottomLinks
{
border: 1px solid red;
width: 99%;
height: 15px;
text-align: left;
font-size: 10px;
word-spacing: 8px;
color: Gray;
}
Here is how it looks like:
http://s3.imgimg.de/uploads/2204cc79eJPG.jpg
As you can see: No reason, why the image should be more in Bottom then the other, you see left FF4 (same in IE8/IE9/Opera9/Opera10) and right only IE7 who seems to have a problem with this.
I can't see how to fix it, I can only see from where it somes... any ideas?
For some reason the element floating to the right will float beneath the text on the line in IE7, The text takes up the full width of the container, just as a div elements does by default, and pushes the floating element down.
Put the text before the image in a div element also, and float that to the left, that way the element floating to the right will not be pushed down.
Browsers have different default CSS for various HTML elements. The first thing I would do is add a good reset so that all elements start out with the same basic settings. This will take some of the guess work out of the debugging process. Add this BEFORE the rest of your CSS -
http://meyerweb.com/eric/tools/css/reset/
Next, you should always specify the width in a floated container. IE in particular has issues if you don't specify widths properly.
I would try go with something like this instead:
<div id="bottomLinks">
<p>Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
</p>
<img src=".." />
</div>
<style>
div#bottomLinks {
overflow: hidden;
}
div#bottomLinks p {
float: left;
}
div#bottomLinks img {
float: right;
}
</style>
You're problem right now is probably because of the width of 99% and that the first element doesn't float.
I have JS generated content and want a div EXACTLY around it.
I don't know why, but the div parent is always 100% wide.
I thought I have div width: 100% somewhere, but surprisingly it looks almost the same in jsfiddle:
http://jsfiddle.net/f2BXx/2/
So why the outer div is always 100% wide? And how to fix that? I was trying with display: inline, but it sets width to 0px ;/
CSS:
.outer {
border: solid 1px red;
}
.item {
height: 300px;
width: 400px;
border: solid 1px blue;
}
.allright {
height: 300px;
width: 400px;
border: solid 1px blue;
outline: solid 1px red;
}
HTML:
<p>I don't know where "outer" div 100% width comes from?</p>
<div class="outer">
<div class="item">
<p>Something big!</p>
</div>
</div>
I always thought it'd look like that:
<div class="allright"></div>
I can't set outer div width (width: xxxpx) because all the content is dynamically created.
It sounds like you need to read the Visual Formatting Model.
display: block; causes block-level items to automatically fill their parent container.
CSS is designed in a way that lends itself to the child elements filling their parents, rather than the parents conforming to the children.
div is block element.
Block elements are 100% width of parent element, if width is not specified.
it's taking up all the available space based on it's parent container, exactly what it's supposed to do. If you want it to be a specific width set the width:; of the element.
If you find the w3.org documentation a little bit dry or too technical, here is a more accessible explanation of the CSS box model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
I didn't want to resort to asking here but after hours of frustration I feel I have to!
I have two (could be more) divs that I want side by side. Their parent div has a fixed width and overflow:hidden so we can see at most one div at a time. The problem being is that they will not stack side by side! I've tried float:left and display:inline to no avail.
there is a JSFiddle example I made here
Any help would be much appreciated!
Each of them divs needs display:inline-block and the parent needs: white-space:nowrap so they stay all on one line.
Example:
http://jsfiddle.net/QBhmF/15/
You needed to have div
#tab_container{
width:2000px;
}
Which then gives your floats enough space to float side by side, currently they don't have enough room and so default float behaviour forces them to the next line.
http://jsfiddle.net/QBhmF/10/
Try display:inline-block
try
position:relative
float:left
Have you had a look e.g. here:
How to float 3 divs side by side using CSS
A boilerplate solution for this Ioff the top of my head) could be as follows:
<div class = 'container'>
<div class = 'floater'>Some text</div>
<div class = 'floater'>Some other text</div>
<div class = 'clearout'></div>
</div>
div.container {
width: 400px;
border: 1px solid blue;
}
div.floater {
float: left;
width: 48%;
border: 1px solid red;
margin: 2px;
}
div.clearout {
clear: both;
height: 0px;
visibility: hidden;
width: 100%;
}
Any margins applied to floaters could mess up the layout. Floaters could also have absolute dimensions rather than percentages, if you can predict their size.
HTH,
G
I've got some problems while trying to lay out my site. I'm using Blueprint Framework and it happens when I apply borders to my div. Since their width are controlled by span-XX (or grid-xx as I noticed in 960gs), the moment I apply borders to any div element I have it goes out of the grid as seen in these images Click to zoom
Click to zoom
The only way I know to fix it is to change element's width, but then the framework's grid purpose finishes 'cause I won't have the span-XX classes anymore. Is there any other way to fix it?
If I understand it right, you have a span-24 or something similar and want to add a border to it, right? My preferred way of doing it is
<div class="span-24">
<div class="box">here</div>
</div>
and add the border to the box class for above snippet.
If you don't want to nest divs, you can create a few additional classes for bordered columns. I'm using 1px borders, so I created classes like:
.with-border-first {
border: 1px solid red;
margin-right: 8px;
}
.with-border {
border: 1px solid red;
margin-left: -1px;
margin-right: 9px;
}
.with-border-last {
border: 1px solid red;
margin-left: -2px;
}
There should be one more if you want borders around divs spanning all columns (eg. 24 in blueprint).
I then use those classes together with the spans, for example:
<div class="span-8 with-border-first">
...
</div>
<div class="span-8 with-border">
...
</div>
<div class="span-8 last with-border-last">
...
</div>
I have the following HTML:
<div class="selfClear" style="float: left; border: 1px solid black;">
...floated stuff in here...
</div>
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>
I'd like there to be a 10px gap between the div and span, per the margin-top. But, since the div above is floated, it won't render that way. The fix to make sure something clear's the DIV. To do that via pure CSS, it appears one should use the '::after' method of inserting content that is then set to clear:
.selfClear::after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.selfClear {
display: inline-block;
}
However, this doesn't quite do what I think it should be doing. If I don't include the height/visibility styles so that I can actually see the period as it is inserted, I see that it's actually rendering inside the div (the black border encloses it), rather than after the div (so it's between the div and span). Am I misunderstanding how this should be working?
EDIT:
Here's a simpler example:
CSS:
#theDiv {
border: 1px solid green;
}
#theDiv::after {
content: ".";
}
#theOtherDiv {
border: 1px solid orange;
}
HTML:
<div id="theDiv">
Hello
</div>
<div id="theOtherDiv">
World
</div>
That ends up placing a period after 'Hello' rather than after the div.
It appears that ::after and ::before are actually appended to the CONTENTS of the element, not the element itself. Is that correct?
Yes, it appends to the content of the selected element. You could try wrapping the div then appending after the wrapper div, but that defeats the whole purpose of using :after in the first place.
You could also try setting the enclosing div to 'overflow: auto'. That works everywhere.
I would suggest using clearfix - it's a lot simpler, you just set up a surronding with a class of clearfix.
See this example.