I have 2 divs that are float:left and show side by side like this :
The CSS for them is :
.movie-activity-feed{
background:#f87777;
float:left;
padding:1%;
margin:1% 2.5%;
width:46%;
}
And they occupy the whole row properly. But when I add a border like this :
border:2px solid #000;
The divs spill over like this :
I know thats because of the extra 8px of borders that is not available in the row.
But is there a way to declare my margins as 2.5% - 2px or something?
In short, is there a way to have fixed width borders on my fluid divs (using %), without the design breaking?
EDIT:
I resolved this using Passerby's comment and this question about box-sizing : Fluid CSS layout and Borders
This allows me to happily add any padding/border to a fluid div without worrying.
Yes you can. You just need to change your margin-left and margin-right from 2.5% to 0.5%
Here is the Working Fiddle
The HTML:
<div class="movie-activity-feed"></div>
<div class="movie-activity-feed"></div>
The CSS:
.movie-activity-feed{
background:#f87777;
float:left;
padding:1%;
margin:1% 0.5%;
width:46%;
border:2px solid #000;
}
Hope this Helps.
try some css calculations
margin: 1px calc(2% - 10px);
it will not work in mozilla
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 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.
Everything is wrapped in a div with an id="main_wrap"
the main wrap has this style:
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
}
Since everything is wrapped inside of this div, I don't understand why a horizontal scroll bar would appear at the bottom.
If any of the children have borders, padding (or sometimes margins) applied to them, that adds to the width and height. Using overflow: hidden; would avoid the scroll bars. But, if something has too much width, you probably want to find where it is coming from to avoid possible problems in the future.
Note that you may be able to use box-sizing: border-box to prevent borders and padding from adding additional width (or height). This is particularly useful when you are using something like width: 100%, but width: 100% also isn't necessary in most cases - elements with display: block applied will fill the width by default AND keep padding and borders from adding additional width.
For example:
html, body { margin: 0; padding: 0; }
div {
background: #111;
color: #eee;
padding: 1em; /* This doesn't add to width - still at 100% width */
border: 2px solid #5e5; /* This also doesn't add to width - still at 100% width */
}
<div>Test</div>
Try add overflow hidden:
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
overflow: hidden;
}
That should work (but is hacky).
If the elements are side by side and have a combined width or , as BDawg says margins or paddings, that cause it to exceed 960px a scroll bar could appear. Post your entire code and we can figure it out very quickly. Hiding the overflow should work but it would not really explain why the scroll bar is appearing. Giving us your entire markup will help find the root of the problem.
Somewhere you've left any DOM elements unseen which occupies the extra width. it's better to find and fix the children than to use overflow:hidden . overflow:hidden will hide the scroll bar if user zooms in the page.
Working 100%
if you are using bootstrap it takes
margin-left & right 15px (or) -15px
you need to change 15px to 0px
Example
.main_wrap .row{
margin-left:0px;
margin-right:0px;
}
If you change width to 100% it helped you, but if you don't want, just try add external <div style="width:100%"></div> like this:
<div style="width:100%">
<div class="main_wrap">
%your content%
</div>
</div>
I have a CSS Question I want this div to automatically expand vertically as more and more content fills it. I thought that omitting it's height setting in the style would do so but it hasn't seemed to fix it. My CSS
.box{
-moz-border-radius: 15px 15px 15px 15px;
background-color:#433B39;
background-image:none;
color:white;
display:block;
margin-top:20px;
padding-left:16px;
padding-right:16px;
width:925px;
}
Are you floating the content inside of that div? If so, then it won't expand to fit them, you need to put a clearing div after the floating content for this.
use auto:height .You may also mention min-height to some value to maintain a minimum height
ex :
.box{
width:925px;
min-height:10px;
height:auto;
}
Did you try with setting float:left for the external container?
First of all here the work in progress website link http://jacobnlsn.com/wordpress/. I want the bars to be the same height. Here is what i have in CSS for both:
#bodybinblog {
width:546px;
float:left;
background:#400000;
border-left:solid 9px #cdba70;
border-right:solid 9px #cdba70;
margin:0 15px 0 30px;
padding:0;
}
#sidebarbinblog {
width:229px;
height:inherit;
float:left;
background:#400000;
border-left:solid 10px #cdba70;
border-right:solid 10px #cdba70;
margin:0 0 0 11px;
padding:0;
}
Any idea how to fix this?
I think one of the tricks designers use in webdesigns is the laying of background images. In this case, you want the sidebarbinblog to assume the same height as the bodybinblog because you want the background to fit nicely. If the sidebar's height is higher than the body, same problem will occur but this time on the body side.
The solution is to create a background image of maybe 1px horizontally capturing both for the body and the sidebar. Apply that background on the container div of both the body and the sidebar Repeat-y it so it spans the full height.
You want to use "faux columns". Here is a useful link - http://dustinbrewer.com/tutorials/fauxcolumns/
It should work like magic.