.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?
Related
I want to simply center 2 divs horizontally regardless of the screen width and without using a wrapper. I have the following simple code:
#div1 {
display: inline-block;
width: 100px;
border: 1px solid #000000;
}
#div2 {
display: inline-block;
width: 200px;
border: 1px solid #000000;
}
I created the following fiddle for illustration:
http://jsfiddle.net/axe89/
The reason I don't want to use a wrapper is that I want to make a cross platform website and if I define a width for the wrapper it will break mobile screen.
#setek has the solution above, just wanted to add this quick rule of thumb:
To horizontally center display:inline and display:inline-block items, use text-align:center;.
To horizontally center display:block items, use margin: 0 auto;.
as alluded to by setek, you can define a container for your divs, with a width of 100% so that it scales with the screen/device width. Also set its text align to center to achieve your desired effect.
#container{text-align:center;width:100%;}
here is your updated fiddle
and for slightly modified markup and css - http://jsfiddle.net/axe89/5/
Use css margin properties.
margin-left:40%
to the first div.
You can add
text-align: center;
to the body tag or to whatever you are planning to wrap the divs with.
fiddle link
I'm trying to center images in a container but it is not working. Til sofar the css looks like this;
#wrap{
min-height: 100%;
}
#imagebar{
position:fixed;
margin:0 auto;
top:60%;
width: 100%;
height: 200px;
background: yellow;
}
#albums{
margin:8px;
display: inline-block;
}
My website is http://www.robcnossen.nl/
I thought that margin-left:auto;margin-right:auto; would be good but thinks are not working how I thought it would be.
Can anybody help me with this?
Thanks...
#imagebar {text-align:center;}
Your images aren't block-level elements, so simply applying text-align:center; to their parent will do the trick.
Since #imagebar has a width of 100%, its automaticly centered. You can center the images by using text-align: center within #imagebar.
I however think you want a specific 'content box' within #imagebar that is centered.
You can fix that by making a div inside #imagebar with a fix width (in px or %) and add margin: 0 auto to that inner div.
The problem is simple:
http://jsfiddle.net/boblauer/wfLGG/
In the left example, I have the whole thing scrolling, which works fine because I can set the scrolling div's height to 100%. In the right example, it doesn't work, because I don't know what my scrolling div's height should be, because it's sharing that space with another element. If I set it to 100%, it overflows from its container, causing the 2nd scrollbar that you see in the example.
I know I can use javascript to set the .scroll-container's height to (container height - height of the header), but is there a pure css solution to this problem? I hate having to use javascript for this, especially because when the window resizes, I have to recalculate the size of the scrolling div.
Edit: Sorry, I wasn't very clear. What I want is for the header to remain static at the top, while the list itself is scrollable.
I think this is maybe helpful
.scroll-container {
overflow: auto;
padding-top:20px;
}
#ex2 span{
position:absolute;
background:white;
}
jsFiddle
Set overflow: y-scroll; on #ex2 and it will behave as #ex1.
#ex1, #ex2 {
float: left;
height: 100%;
width: 45%;
border: 1px solid black;
overflow: auto;
}
#ex2 { overflow: y-scroll; }
Demo
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?
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.