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?
Related
i want make a footer with relative position but when the page have not content its show on the bottom of page. a property like this:
position:relative absolute; [i know this isnt correct]
relative is good but when the page is not empty.
fixed covering some of content and show always
absolute not good when the page have content
this is my code:
color:#444;
background:#222;
bottom:0px;
width:100%;
position:relative;
min-height:80px;
padding:10px 0 10px 10px;
border-top:1px solid #444;
use min-height for content (middle content).
for example:
min-height: 500px;
your question is unclear,but as I undrestand you want to have a footer on bottom of the page even if there is no content,do so :
#footer{
position:fixed;
bottom:0;
z-index:999
}
DEMO
but this way you have sticky footer to bottom of your browser window, another way to achieve what you want is tu use min-height css property for your content,bud this is not a fully solution,couse different browser have different height and you have problem, I suggest that you use jQuery
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
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>
How can I make my website look more like the second image presented below? (Notice the left margin in the second image, versus no margin in the first one.)
http://fotografcim-2.hosting.parking.ru/ (This is a demo site.)
No margin:
Margin:
div#outer {
background-color:#FFFFFF;
border:1px solid #D0D4C9;
margin:0 auto 5px;
padding:0;
width:80%;
}
The above one is your style
I remove the auto in the margin:
Put margin as you want
margin:0 5px;
Use FF Firebug addon for better understanding
Refer these
http://www.webreference.com/authoring/style/sheets/layout/advanced/
http://www.yourhtmlsource.com/examples/positioning2.html
I would surround that all in a wrapper and set the width of that wrapper to the current width of the internal div.