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!
Related
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 want to wrap an image into an html DIV and, since I want this to be fully scalable with the size of the window, I want to set the width of the DIV in percentage as follows:
html
<div id="wrapper">
<img src="http://openclipart.org/people/netalloy/rally-car.svg" />
</div>
css
#wrapper {
position: absolute;
width: 50%;
}
#wrapper img {
width: 100%;
}
The image should determine the height of its container. This is because the image width is set to 100% and the image height is calculated accordingly maintaining the correct aspect ratio.
The result is visible on jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/
My questions are:
Why do all modern browsers render the wrapper DIV 5px taller than the inner image?
How can I get rid of this 5px gap, while still setting all the sizes in percentage and without using javascript?
Surprisingly, this happens in Chrome (21.0.1180.89), Firefox (15.0.1) and IE8, while IE7 renders it correctly, matching the height of the DIV with the height of the image.
Check this out :
http://jsfiddle.net/5BN4g/29/
It's a line-height issue :-)
You need :
#wrapper {
width: 60%;
background-color: #aaa;
margin: 50px auto;
line-height:0;
}
#wrapper img {
width:100%;
border: 1px dashed red;
box-sizing:border-box;
}
I used box-sizing to make sure the width of the image doesn't overflow the container
................
Hi now add vertical-align:top in your img tag throw css
as like this
#wrapper img {
width: 100%;
border: 1px dashed red;
vertical-align:top; // add this line
}
live demo
OK, fiddling about, I found a good possible solution:
#wrapper img {
display: block;
width: 100%;
border: 1px dashed red;
}
Changing from the default inline display to a block display eliminates the line-height problem straight away.
This approach is also semantically correct because in this case what we really want is a single image wrapped in a DIV without any other elements in it, so the concept of line-height needs to be completely wiped off by displaying the image as a block.
It works on all major browsers: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/
I think you shuold set align property to force browser show correctly img tag.
<div id="wrapper">
<img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
</div>
DEMO
I think is because it doesn't see as a Table
i added the display:table in your code
And it looks fine now, check the link
Example Display Table
Your issue is that an image -- the <img> tag, to be exact -- is an inline element. All you need to do is set display: block on the image and the extra padding goes away. Demo.
I have such Layout structure:
1) First lays SimpleLayoutPanel main (green border)
2) I'd like to add DockLayoutPanel child to main (red border; 25px margins)
I have implemented this, but result, shown in attachment (.jpg), is strange for me.
So, all red (top, left, right, bottom) borders of child should be inside main, but child panel shifts. How can I implement this logic in a right way? I have more complex ui structure with 3-4 level. And I also dont work without margins.
And here it is code and css:
SimpleLayoutPanel panel = new SimpleLayoutPanel();
panel.setStyleName("mainModulePanel");
SimpleLayoutPanel p = new SimpleLayoutPanel();
p.setStyleName("moduleBody");
panel.setWidget(p);
initWidget(panel);
//CSS
.moduleBody {
/*width: 100%;
height: 100%;*/
margin: 0px;
width: 100%;
height: 100%;
border: 3px solid red;
}
.mainModulePanel {
/*margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;*/
border: 3px solid green;
}
This has to do with the html definition for the border!
Let me explain it with an example.
Your DockLayoutPanel is 500x500px. You put a child element with 100x100% into it, where the margin, padding and border are 0px. Your element will have a size of 500x500px. No you give it border of 3px. This means that to the height and width 3px are added. So your element has a size of 506x506px.
The overflow is ignored.
The result is your second picture.
This is correct html behavior and has nothing to do with GWT!
I've solved the problem by removing 100% height and width .moduleBody CSS.
So, to avoid such situation u shouldn't size child element by 100% height and width.
Thanks guys!
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.