Instead of defining a fixed width of a div, I want to specify a minimum width (if the content is very less), and a maximum width (if the content is more, hide the extra content).
For example, my html is:
<div class="container">
<div class="test">x</div>
</div>
CSS:
.container{
padding:10px;
border:1px solid red;
width:200px;
text-align:center;
}
.test{
border:1px solid green;
}
As you can see, the container has the fixed width of 200px. I want to place the test div in the center of container. Since there is only a single letter in the test class, so I want that the test class should be minimum 50px, but maximum 100px.
I've tried min-width and max-width, but couldn't make it work. Here is the jsfiddle link.
Thanks for any help.
The issue is that <div> are block level elements which do not auto-resize to fit their content. What you can do is, make your div behave like table-cell which do have resizing ability and set min-width and max-width to it.
.test {
min-width: 200px;
max-width:1000px;
display: table-cell;
word-wrap: break-word;
word-break: break-all;
}
Here you go!
By using the margin:0 auto; you can get it centralised :) (Just remove it if you dont want it centered)
http://jsfiddle.net/SnhhK/4/
Using min and max-width on the ,test element worked for me.
http://jsfiddle.net/Kyle_Sevenoaks/SnhhK/1/
Related
I've got the following problem:
I want to have a relative container element that contains some child elements each with margin.
If i dont set the height of the container, it resizes height / width by its containing children.
Problem is that it seems to ignore the margin on them.
here some code:
css:
.container{
position:relative;
}
.child {
position:relative;
float:left;
width:200px;
height:50px;
margin-bottom:20px;
}
html:
<div class="container">
<div class="child">hello world</div>
</div>
The container should now resize height to 50+20 = 70px,
so if i put another element below it should be ok but it isn't.
Margin seems not to resize containers height, how to change this?
Not getting your question quiet well but you are probably missing to clear your floats...
Demo
.container{
position:relative;
border: 1px solid #f00;
overflow: hidden;
}
Alternatively you can also use clear: both;
Demo
Depending on the effect you are trying to achieve, either:
1) Add 'overflow:hidden' to the .container div
or
2) Use padding-bottom instead of margin-bottom on the .child div
i use this code
<div class="main">
<div class="babyOne">
</div>
<div class="babyTwo">
</div>
</div>
.main{
width:100%;
position:relative;
}
.babyOne,.badyTwo{
width:50%;
float:left;
}
with this CSS above everything works fine.
but as soon as i give padding to inner divs all the ui breaks,
.babyOne,.badyTwo{
width:50%;
float:left;
padding:5px;
}
and fire bug shows the increase in the width of divs equal to padding.
According to padding property this should not happen.
any idea how to prevent this?
First of all you need to learn CSS box-model
This states that whatever padding, border, margin you add to you element does count outside it, so for example the element is of 200px width and 100px height, if you add padding say 5px than the width and height will be 205px and 105px respectively, so inorder to workaround with this you need to use CSS3 box-sizing property, but as still it is CSS3 property and if IE is the main thing you want to supprt, I suggest you to resize the elements according to your needs
So for example a div with these styles
div {
height: 100px;
width: 200px;
padding: 5px;
}
You can re-size the above as
div {
height: 95px;
width: 195px;
padding: 5px;
}
CSS3 box-sizing Reference
The WRAPPER must have fixed size: http://jsfiddle.net/esVgH/1 example:
.main{
width:200px;
position:relative;
}
Another solution is display the .baby as a table cell:
.babyOne, .badyTwo {
display: table-cell;
}
Your problem is the expected behaviour.You set a width and then you say give it some padding.So the width plus the padding is going to be greater than the original width.
You can try CSS3s box-sizing attribute: http://www.quirksmode.org/css/box.html
I'm not sure how widely supported it is though.
There's also a host of SO answers here: How apply padding in HTML without increasing the div size?
.babyOne,.badyTwo{
width:45%; /* As you have like based on padding */
float:left;
padding:5px;
}
I'd like a table created with DIV, this table has 2 fixed columns (that it's ok) but the both columns must have all the time the same height.
The code can be find here : Code on Fiddle
The code :
<style type="text/css">
#container
{
position:relative;
width:100%;
margin:0 auto;
}
#header {
background-color:#5a7fa9;
}
#center {
overflow:hidden;
width:100%;
}
#left {
float:left;
width:200px;
background-color:Gray;
}
#content {
margin-left:200px;
background-color:#a9bbd1;
}
#footer {
background-color:#95adc9;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="center">
<div id="left">left</div>
<div id="content">content<br/><br/></div>
</div>
<div id="footer">footer</div>
</div>
ther is an example
http://jsfiddle.net/amkrtchyan/dLeWA/9/
Hi i would like to explain the answer given by Howdy_McGee ..
Add min-height: 100px to #center
Add height: 100% to #left
Add height: 100% to content
he explained the above change which is completely correct.
Seeing your code in jiddle you havent wrote height anywhere in your css style. Therefore all your containers will take height:auto as per the content into it.
you have a div with id='center' this div should have some min-height:100px; and both the inner container should have height:100% by this your elements inside the center div will take height of their parent.
I had preferred you to give the min-height:100px because incase you are putting in dynamic content inside your inner boxes height should increase automatically, therefore if you do not have any content into your div height will stick to 100px.
Hope my explanation makes sense because i am in a bit hurry to type.
You can use this dirty hack (only adding this css):
#center > div {
margin-bottom: -2000px;
padding-bottom: 2000px;
}
Also see your updated example.
=== UPDATE ===
I'll try to explain it:
The padding-bottom uses the background-color. It has to be a heigh value (the minimum different height between the lowest and heighest column). So each column in the center-div add the background-color at the bottom. The negative margin-bottom sets the height back to it's real height. (The entire content is also be visible, even if the minimum height isn't large enough.)
I have two <div> elements, one next to the other. Both have the CSS attribute display: inline-block;. Now the second <div> element has a fixed width of 100 px, whereas the first <div> element doesn't have a fixed width: it depends on the size of the window.
My problem is that the first <div> element will spread over 100% vertically if the window is narrow. I would like to restrict its width to 100% minus 100px, so that both <div> elements can align one next to the other at all times.
I've looked at posts with similar questions, but none really dealt with the case of inline-block.
EDIT: Here is a jsfiddle: http://jsfiddle.net/y3sXu/ I want the first <div> to provide some room for the second <div> on the same line.
There's no particular reason to use display: inline-block to do this.
Here's a clean implementation using floats instead: http://jsfiddle.net/y3sXu/14/
<div id="container">
<div id="DivB">b</div>
<div id="DivA">a</div>
</div>
#container {
overflow: hidden;
}
#DivA {
overflow: hidden;
}
#DivB {
float: right;
width: 100px;
}
This is an old question but has some weight in Google so I thought I'd update it with a new answer. A more modern way to accomplish this is to stick with display:inline-block; and use calc for the width of the variable element.
So long as you have one fixed width inline element width: 150px, you can offset the variable width element by the fixed width calc(100% - 150px).
Your code should look like this:
.fixed-width-element {
display: inline-block;
width: 150px;
}
.variable-width-element {
display: inline-block;
width: calc(100% - 150px);
}
I think I understand what you are asking for. http://jsfiddle.net/y3sXu/6/
I have gone for a traditional two column layout, as it seems like the best way to solve your problem.
float has been used to ensure that the right hand div always sits on the right, and margin-left to keep the left div away. overflow:hidden is used a cheap and cheerful clearfix.
best way I can figure doing it is with absolute positioning:
div#TextB{
position:absolute;
right:10px;
top:10px;
}
div#master{
margin-right:120px;
}
http://jsfiddle.net/Vnxr7/1
There is one very ugly solution:
Set the overflow of the outer div to hidden, take the div out of the dom using position:relative, setting the left to -100px and the width to 100%.
You have to play around with the display, position and left/top etc. or get back with some more details so one could know what you want to achieve.
what about this ?
div {
background:green;
margin-right:100px;
}
#TextB{
width:100px;
background:red;
float:right;
margin:0px;
}
Updated version
Just give the outer div a padding of 50px on both left and right side
EDIT
Place this where u want to put the gap:
<div width="100px" height="1em"> <div>
This is what I am trying to do :
HTML
<div class="container">
<div id="one" class="child">One</div>
<div id="two" class="child">Two</div>
<div id="three" class="child">Three</div>
<div id="four" class="child">Four</div>
</div>
CSS
<style type="text/css">
.container{
height:40px;
width:500px;
}
.class{
float:left;
/*...*/
}
</style>
The child divs should fill the container div how big or small it has its width. They can get big according to the container automatically.
|<---One----><---Two---><-Three-><--Four-->|
How can I do it with css?
Thanks in advance.
I've set up a test site to make sure this works:
First, you'll need to keep float to "left" to keep everything on the same row. Next, set width to "25%", to space out the elements. Finally, set text-align to "center" to center the elements, as in your diagram. Remember, if you change the number of elements, you'll need to modify the "25%" to a value that evenly spaces out the elements. (Use 100 / numElements).
.child {
float: left;
width: 25%;
text-align: center;
}
Does anyone know a way to do this without using width percentages, so that it will auto-spread the elements if they are removed or added?
You can set the .child width to 25%, like this:
.child { width 25%; }
You can test it out/play with it here.
Total width is 500 so each child div should be 125px wide. You got the right idea using the float:left;
The solutions that have been given to you are correct. Just be careful if you have margins/borders/paddings in the inner divs, because in that case the 25% would break the layout (margin, borders and paddings are not included in the percentage).