I have a main div which contains a table :
<div id="main_container"><table>
you can see the full code in:
http://jsfiddle.net/tF62u/
As you can see, the child table is wider than the div but it (the div) doesn't adjust accordingly.
Which definition am I missing here?
Add display:inline-block to your div's CSS rules:
#main_container {
font-size: 9px;
border: solid 3px #faa;
background-color: rgba(245, 255, 10, 0.12);
display: inline-block;
}
jsFiddle example
Add display:table; to your #main_container
http://jsfiddle.net/tF62u/4/
One possibility is to make the div float left. Floating elements are as wide as their contents, rather than as wide as the window.
#main_container {
font-size: 9px;
border: solid 3px gray;
background-color: rgba(245, 255, 10, 0.12);
float:left;
}
Updated fiddle.
Also make sure to clear this float afterwards, or other content that follows will be displayed to the right of the div if the window is wider than the table.
By the way, this also goes for display:inline-block; if you do that you will need to make sure that the div is followed by a block element.
Another solution, for this particular fiddle, would be to remove the div entirely and apply all the styles to the table. Of course that would only work if the table were all the content of the div...
Just make your #main_container have a display of table-cell:
#main_container {
display: table-cell;
}
DEMO
Related
I am working on a design with twitter bootstrap 2 (responsive). In this design, I have a header, left sidebar, content and footer.
Basically, I have the following code structure - have a look at http://jsfiddle.net/w4yh9/3/
The important section is the:
<div id="inner" class="span10">
...
</div>
Please have a look at the attached screenshot, especially the yellow marked area:
I have the following question / problem:
How can I add some padding to the right for all content elements (success message, content, table) - it should work on smaller screens as well?
I would give the parent container a padding and also apply box-sizing: border-box to it.
Check out my JSFiddle: http://jsfiddle.net/w4yh9/4/
#main {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
background: #FFF;
border-radius: 4px;
}
.span10 {
padding-right: 10px;
box-sizing: border-box;
}
You could try using
#main {padding-right:5px}
But maybe that makes #main wider than you'd like.
In that case, you could use
#main > div { width:98%; }
#main > .navbar {width:100%; }
to set all children divs of main to 98% width, and then over-ride this for the (hopefully limited number of) specific children that you want to be full-width.
I have a question about the scrollbar that appears when it does not fit.
For example here I have one news item. Below a screenshot of the layout:
And when you add more items the scrollbar will appear over the date.
It's default behauviour for a scrollbar to appear inside a div, but is it possible to
apply css when the scrollbar appears inside. For example I could use a padding-right: 16px;
to the container. The only problem then, is another container is floated to it and these are inside a big container then the layout would collapse because of the extra padding.
Is there another way to keep the layout without breaking apart?
Here is the link: http://jsfiddle.net/EANbh/
and the css to the container:
.container {
width: 200px;
height:200px;
border: 1px solid grey;
overflow-y:auto;
overflow-x: hidden;
/*padding-right:16px;*/
}
Regards, Chris.
Another option without using the padding is:
.item {
display:inline-block;
width:184px;
height: auto;
border-bottom: 1px solid grey;
}
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'm trying to display an image centered on a page with a border that should have different paddings and margins on it's side. The images will be of different widhts and heights. So I need it to stretch accordingly.
I put this in the body to remove all margins:
body {
margin:0px 0px;
padding: 0px;
}
Then I used this to put the border around the image.
#imgcontainer {
position:relative;
text-align: center;
border-color: red;
border-width: 1px;
border-style: solid;
padding: 5px;
}
But then the border stretches all across the with of the page. Is there any way to prevent his? If I put:
position:relative;
The border snaps into place but then the image is not centered anymore.
If I put a container box around #imgcontainer it also snaps to the edge of the page.
I think it can be solved simply with some combo of position:relative/absolute?
This is what I'm talking about: http://kareldc.com/dislexicon/1-motion.html
Thx!
Hi now define according to #Fabrizo Calderan
css as like this
#imgcontainer {
display:inline-block;
vertical-align:top;
}
than your result is
If I well understood the problem you could assign display: inline-block to #imgcontainer, otherwise post a fiddle showing the issue
you can just apply the border effect to the img tag alone.
for example, just put
#imgcontainer img {
border-color: red;
border-width: 1px;
border-style: solid;
}
Here is an answer for you: fiddle example
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.