I have the following css class:
.CtractLabel
{
font-weight:bold;
padding: 2px;
text-align:left;
/* width:120px; */
width:150px;
float:left;
border-bottom:solid 1px #aaaaaa;
border-right:solid 1px #aaaaaa;
background: white url('../Images/GridHeaderBg.gif') repeat-x bottom;
}
On my page, I have a a div with text that is less than 150px. However, the div does not expand to 150px, but contracts around the text.
Is there a way to force the div to be precisely 150px regardless of the length of the text in the div?
The default value for the width of a div element is auto, which causes it to take up all available space horisontally.
If you don't get this behaviour, there are some possible causes:
You have made it a floating element.
You have specified a width for it somehow, perhaps indirectly.
You have some other element taking up space.
To see exactly what CSS applies to an element, and exactly where elements are, you can use the FireBug plugin in Firefox.
Related
HTML:
<body>
<div>
Div
</div>
</body>
CSS:
body{
width: 600px;
height: 600px;
background: red;
}
div{
width:200px;
background:blue;
margin-right:400px;
}
What really happens when giving margin-right to div? does it have effect at all? what about giving more margin-right, like 600px. then what happens?
OR That would be nice if you consider a div that exactly fits in its parent. like:
div{
width:400px;
background:blue;
padding: 98px;
border: 2px solid black;
}
Now what happens with giving margin-right to div?
There is nothing wrong with the margin-right itself. You cannot see the effect of margin-right because the 'width' property of div causes the margin of div to have more than 10px distance from the right wall of the body. Consequently, it causes the margin-right property not to have any visual effect.
In order to see the effect of margin-right, remove width property or increase it to a value which causes the div right border to come close to the body wall (or to attach it to the body wall). Then, set the margin-right to a larger value (to make the change more clear). Here is the modified code (the only change in the following code is that I have removed the width property in order to increase the width of div to occupy the whole width of the body):
fiddle link
css change :
body{
border: 5px dashed blue;
}
div {
height: 50px;
border: 2px solid red;
border-radius: 5px;
background-color: #308014;
margin-right:100px;
/*margin-left:50px;*/
/*margin-top:10px;*/
margin-bottom:10px;
}
The as it is this property will have no effect at both examples!
Try to play with this one fiddle !
`Margin-right` will have effect when you use along with `float:right`
property and will come 400px from right the whole div!
I want a border on the right hand side of a div.
I do:
<div class="span6" style="border-right: 2px solid #727272;">
the things is I'd like my border not to run to the top and bottom of the div. Maybe 5px from the top and 5px from the bottom. Or 90% of the height of the div. How do I do this?
Thanks
You can use a pseudo element to hold the border. The following would make the "border" be 90% of the height of the parent element:
http://cssdeck.com/labs/kyrvt8hf
div {
position: relative;
}
div:after {
display: block;
content: '';
position: absolute;
top: 5%;
bottom: 5%;
right: 0;
border-right: 2px solid red;
}
I could be wrong, but I don't believe there is any way to really make this happen that you would probably want to roll with. In fact, I thought of three "hacky" ways that might work, but all three can't get you to the desired state, assuming a variable height.
Assuming a fixed height, you could create a 2px wide by 90% div height image of the color you want, then set it as the background image of the div. Something like:
.span6 { background: #fff url(bgBorder.png) no-repeat right center; }
Update
A variation based on what Tyblitz said in the comments. This allows for dynamic height. I am still inclined to go with the :after option, as it keeps your DOM cleaner, but in case that is not possible:
http://jsfiddle.net/designingsean/bsbgX/1/
HTML:
<div class="span6">The content div<div class="border"></div></div>
CSS:
.span6 {
width:50%;
height:400px;
background-color:#ddd;
position:relative;
padding:10px;
}
.border {
width:2px;
background-color:#222;
position:absolute;
top:5%;
bottom:5%;
right:0;
}
Note that to make it a fixed distance (say, in pixels), just change the top and bottom from a percentage to the px you want. See http://jsfiddle.net/designingsean/bsbgX/2/ for the example.
This picture show's how border's work
You can either set margin to curtail the border or set padding to extend the border. Currently there is no option in CSS to target the border and make it bigger or smaller(not talking about width obviously). You can however use padding, margin, another div or pseudo element's to reach the desired effect.
I have a div tag in which i have other controls. I have given a border to the div through css. I want the div tag to wrap itself around the controls and auto adjust its own size.
.divwrap
{
width: 60%;
height: 60%;
border: 1px solid #66CCFF;
vertical-align:middle;
margin-left:150px;
margin-right:300px;
}
Now in the above code I have fixed margins. So if I were to use the same style for a div tag on another page, it would be problem because the controls (inside the div) on another page may be more or less in no. I want the div tag to be like a rubber band that can auto adjust the size when wrapped around something (in this case, an html table with controls).
is this achievable? if yes, how??
if you want to make a wrapper keep these things in mind
try not to give it a static dimension.
don't give any width and height, as it is going to be a little larger than the content over which it is applied
give percentage value margin and padding:
try this:
.divwrap
{
padding:3%;
display:inline-block;
margin:3%;
border: 1px solid #66CCFF;
vertical-align:middle;
width:auto;
position:relative;
box-shadow: 10px 10px 5px #888888;
}
see this fiddle.
so now, no matter what the width and height of the child div is, this div will always wrap around it.
I have 3 divs all floated left. I want to set the second div and third div to specific sizes (based on pixels or percentages) and the first div to simply take up the rest of the space.
Additionally at runtime depending on the user's privileges one of the specific sized divs might not be displayed. I need the first div to take up the space left over.
How can I do this?
You can use display:table property for like :
.parent{
width:100%;
display:table;
}
.fill{
border: 3px solid green;
display:table-cell;
}
.fixed{
width: 100px;
border: 3px solid blue;
display:table-cell;
}
http://jsfiddle.net/WVDNe/8/
It's not work in IE7 & below.
But check this it's work in all browsers:
http://jsfiddle.net/LJGWY/3/
When using margin on the child element (h2) why does it give margin to the parent(#box) instead? If I change margin to padding it works as expected.
Did something change or am I missing something? here is my sample code
<html>
<head>
<style>
#box{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
height:200px;
width:500px;
background:red;
box-shadow: 15px 15px 12px grey;
-moz-box-shadow: 15px 15px 12px grey;
-webkit-box-shadow: 15px 15px 12px grey;
text-align:center;
margin-top:0;
}
#box h2{
color:#fff;
text-shadow: 2px 2px 2px #000;
margin-top:75px;/*making this padding gives the effect I thought I could achieve with margin*/
height:50px;
width:200px;
}
</style>
</head>
<body>
<div id="box">
<h2>Fun with CSS3</h2>
</div>
</body>
</html>
also if anyone or everyone could share their experience with margin quirks. THx
It's because of collapsing margins. I hate this "feature", but that's the cause of the rendering "issues" you're having. An excerpt from the specs (emphasis is mine):
If the top and bottom margins of a box are adjoining, then it is possible
for margins to collapse through it. In
this case, the position of the element
depends on its relationship with the
other elements whose margins are being
collapsed.
If the element's margins are collapsed with its parent's top
margin, the top border edge of the box
is defined to be the same as the
parent's.
Here's a couple of articles on this subject:
http://reference.sitepoint.com/css/collapsingmargins
http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php
My guess is that you've misunderstood the box model. Margin is the space outside, i.e. around a widget, while padding is space inside, i.e. betweeen the widget's outer border and its content.
You may want to look at this diagram: http://www.w3.org/TR/CSS2/box.html of the box model for reference.
I think it's working OK. Padding does just that: it pads the element its applied to. Margin separates elements from each other. So the margin is working as it should. The position of the h2 tag is where it should be. Giving it a margin would push it away from the root element, which in this case is the body. In order for it to move around in the parent element (the #box div), either you would have to position it relative to the #box element, or give it padding (just one method, but not optimal).