I have an image with float:left, and I’d like it to overflow its parent, but cut off the overflow. Here’s what it looks like without any overflow rules:
Here’s what I want:
Here’s a fiddle: http://jsfiddle.net/ZA5Lm/
For some reason, it was decided that overflow:hidden without an explicit height results in the element growing.
Can I somehow achieve the effect I’m after without setting an explicit height? An explicit height doesn’t work because I want this div to size automatically based on content length and browser width.
In my opinion using overflow: hidden without setting dimensions doesn't make sense. If you don't want to specify the height of the container and if your images have a fixed width you could use this solution: http://jsfiddle.net/ZA5Lm/11/
The image is positioned with absolute, taking it out of the text-flow. However - and I'm aware that this may be ugly - you need to specify a padding-left to move the text away from the image.
It's a bit tricky (I use relative + absolute positioning and a specific padding to position text) but it does the effect you asked without changing markup or setting height:
body {
padding: 10px;
}
img {
float: left;
position: absolute;
left : 10px;
}
div {
border: 1px solid black;
padding: 10px 10px 10px 280px;
position : relative;
overflow: hidden;
}
I just inserted style (even if float:left would be no longer necessary)
I seen a post over at CSS-Tricks and it talked about this. Go check it out at -
http://css-tricks.com/minimum-paragraph-widths/
It might be useful :) Good luck
Also just looked at your code and I added float: right to your div so it looks like this -
div {
border: 1px solid black;
padding: 10px;
float: right
/*overflow: hidden;*/
}
Not sure if that's what you want?
Related
I have here a code in Dabblet: http://dabblet.com/gist/5705036
I wanted to have these segment to stick at their position even if the browser is re-sized without using absolute positioning. Like for example, The main content container breaks a new line when the browser is re-sized [I use CSS Floats in most of my containers].
Is there something wrong with my coding?
Do floats proper for layouts ? or I need to use anything else?..
I just can't fix it by myself and by doing a lot of research , still, haven't got a good idea to use it as a way to fix this. [Also, I use HTML5 tags such as: section, article, nav, etc.. ]
Just remove the float:left; from maincontent id and apply a display:table-cell;. Your issue will be resolved.
Here is the code.
#maincontent {
border: 1px solid #BBBBBB;
border-radius: 5px 5px 5px 5px;
display: table-cell;
margin-top: 15px;
min-height: 400px;
padding: 2px 6px;
width: 700px;
}
Hope this helps.
First of all You should always clear parent element if You use floats inside the parent element. Your right element go down because You don't have minimal width of container, ther is sample of code:
#contentWrapper {
width: 1000px;
overflow: hidden; /*scroll / auto it's depends on You */
}
I noticed that in your code you had a space in <div id="contentWrapper "> which stopped your CSS for that element from appearing. Also, you needed 2 more pixels of width on your #contentWrapper.
#contentWrapper {
width: 992px;
}
Removing the space and changing the width of #contentWrapper worked for me. I had a quick look at the maths but haven't worked out why it needs to be 992px. Anyone?
So, in answer to your question, I'd say floats are fine and your approach is good, there were just those two minor errors.
.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 portfolio page with a image display with zoom.
I have this code: http://codepen.io/Mpleandro/pen/LvrqJ
The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.
The image width will be flexible, so I what I want is to make the containing div inherit the width of image.
I tried the css property auto, inherit and min-with, but nothing works!
Could someone help me?
P.S.: I need a responsive solution.
Thanks
since 1 year has passed you may not be interested in the solution, but hope that helps someone else.
I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.
In my case, I set a fixed width for the div
.some-div{
width: 250px;
}
I also had responsive image:
img{
display: block;
max-width: 100%;
height; auto;
}
and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:
#media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
For my project the threshold was 917px when the fixed width started to affect.
I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.
I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.
auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.
Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.
My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.
I'm not sure if this is what you mean, but if it is, I hope it will help!
If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.
The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.
Put together, it would look like this: http://codepen.io/anon/pen/IluBt
JS line 17:
$(".display").css("display","inline-block");
CSS for .display
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
And to align everything nicely:
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}
I need to create a dialog box using custom images created by a designer. For purposes of this discussion, this the correct answer for my application. The dialog box must be able to withstand changes in width and height. This is easy to do with a table, but I want to maintain a table-less design, so I figured that I could do this using 3 rows of DIV's. For example, float an image to the left, float an image to the right, and put a DIV in between then with the image set to the background so that text can be entered over it.
Here is demo of my failed attempt to do this: (just one row shown)
http://www.seaburydesign.com/rounded/demo.html
As you can see, this almost working. But the DIV in the middle is only the size of the content inside of it, even though I have set the height and width. I need to keep the width flexible.
Any ideas on how to fix this?
Remove the following line:
display:inline;
Besides being useless in this case (the inline behavior is already working because of the floats) "inline" property doesn't allow you to set the element's width or height. For a clearer understanding, read w3c's article.
If you make the rounded corners of your images white instead of transparent, you can apply the background-image to the header-tag instead of the middle div. This will create the impression that the middle div has the same height as both images.
Update
If possible (depending on what browsers you need to support), you could do rounded corners with CSS3's border-radius property, instead of using images. That would be something like:
header {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
You could also try this border-radius CSS-generator to find the properties that suit you best.
The css display: inline in your container div's voids any setting for width. Use display: block; float: left; margin: 0 XXpx; for your div (with XX being the width of the images on the sides).
Edit:
Concretely this would be:
div#yourdiv {
background-image: url("images/module_header_bg.jpg");
color: white;
display: block;
float: left;
font-weight: bold;
height: 42px;
width: auto;
}
and both img tags
img {
float: left;
}
This creates a dynamic sized box for your content, or you set width of the div to a specific value like width: 300px instead of width: auto.
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.