I have a DIV that will be containing a product's information. This DIV is within a PHP for argument, so for each product this DIV will be created containing it's information.
The problem I encounter is that the DIV shows very small. However, all items inside the div are showing, but the DIV's height is minimal.
How must I force the DIV to inherit the total height of all the products inside it?
Here is my DIV:
.cartItem {
border-top: 1px solid #dddddd;
display: block;
padding-bottom: 0.5em;
}
Thanks!
I think
Overflow: hidden;
does the trick...
Related
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;
}
.mainCoverWrapper {
position: relative;
min-width:312px;
background:red
}
I'm trying to center a div with min-width of 312px and make it expand according to its dynamic content while keeping it centered.
Right now the min-with doesn't work at all because it needs a float. I can't use a float because I need the div centered on the page.
In other words, div starts out with margin auto with a width of 312px and expands with its added content while being centered. Is this possible?
Any help would be greatly appreciated.
http://jsfiddle.net/FVmvA/
Here's a working example of the parent to follow the width of the child, and the child will expand according to the text given in it.
.myCoverWrapper {
border: 1px solid Peru;
margin:auto;
min-width: 200px;
max-width: 100%;
display: inline-block;
background: red;
}
.test {
height: 100px;
margin: 10px;
background: cyan;
}
This makes the parent div follow the width of the kid.
This however, will disallow you to "center" it. There's no way you can have both. This is because you cant center an image without knowing the width of the element.
The solution is to use jQuery, to add CSS in when necessary.
Here's an example. There's some bugs, but well, you have the general idea.
If you want the width to be fluid, your best bet is to set display: inline-block; on the to-be-centered element, and text-align: center; to the parent element.
See: CSS center display inline block?
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 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!
I'm hoping for a solution, but worst case scenario, an explanation of why my div isn't resizing, and it may be because I'm using a nav tag.
I have the following html. When the content within my 'section' tag grows, so does the div with the class of page-content. However, when my nav menu items increases, the div doesn't resize.
<div class="page-content">
<nav>
<ul>{menu items here}</ul>
</nav>
<section id="main">
{bunch of text here}
</section>
</div>
Here is my css.
.page-content
{
display: block;
position:relative;
width: 100%;
margin-left: auto;
margin-right: auto;
background-image: url(images/bg-home-main.jpg);
background-repeat: no-repeat;
background-position: center;
}
nav {
display: block;
float: left;
padding: 15px;
position: relative;
margin: 0px 0px 0px -45px;
}
#main {
padding: 5px 25px 5px 25px;
margin-left: 175px;
}
The problem I have then is that the div has a background image that should cover the background of the both the nav and section areas. However, this only happens if my section area is larger (top to bottom) than my nav, as the div will stretch to accommodate the section size. However, if my nav area is bigger, it actually expands outside of the div and there for the image.
When you float an element, you take it out of the flow, and it won't
expand it's containing element. One workaround to this is to add
overflow: hidden; to the containing element.
Using overflow: hidden; is a form of clearfix - a fix to cause the containing element to expand to show any floated, contained elements. Actually any value of overflow works, but overflow: auto causes scrollbars in Explorer on Mac (not sure if anyone still actually uses that) and overflow: scroll causes scrollbars which is the same issue. For some versions of IE, you also need to include a width value to cause this to work. There are other clear fixes, usually involving inserting some kind of element after the floated element that clears that floated element, also causing the containing element to expand to contain it - a div with no height but clear applied to it, or using the :after pseudo element, but I usually use overflow as it doesn't add any presentational markup.