I have the following HTML code:
<div id="inner">
<div id="wrap">
<img src="images/thumb/3.jpeg"/>
</div>
</div>
And the following style applied to it:
body{
background:url(pattern/pattern1.png);
}
#inner{
margin:0 auto;
position:relative;
height:400px;
width:400px;
background:#669;
text-align:center;
}
#wrap{
width:50%;
margin:0 auto;
}
The problem is that the image it always stay top-centered in inner div but i want it to be in center of wrap
!--------------------------------------------------------------------------
Still same problem and heres the code in jsfiddle: http://jsfiddle.net/RNhvz/
You should apply the margin to the image element directly: JSFiddle example1
Your margin: 0 auto is part of your problem.
Do you know the height of your image? I presume it is under 400px. Change the 0 in your margin style to half the difference between 400 and the height of your image.
For example, if your image is 200px in height, change your margin style to:
margin: 100px auto
(400 - 200) / 2 = 100
If your #inner is always going to have 400px height then just use this code:
#inner{
/* Your code: */
margin:0 auto;
position:relative;
height:400px;
width:400px;
background:#669;
text-align:center;
/* Solution part I. */
line-height: 400px;
}
/* Solution part II. */
img {
margin: 0 auto;
vertical-align: middle;
}
That way an image will be centred both vertically and horizontally and - what's more important - this solution doesn't require you to know the image size. And you don't need the #wrap div. You can keep in in your HTML syntax but there's no need for width and margin rules of this element.
Here's the working code: http://tinkerbin.com/YOjVvnVZ.
Related
I've been enjoying and having success mocking up webpages with CSS. But then I decided to play with a "fixed menu" and my understanding is now not so clear.
So my brief knowledge make a blank HTML doc and then create a "container" div and place all your further elements within the "parent" container. No problem with this and all has been well with floating elements and such.
But when placing a "fixed" element within my parent div I'm lost as to why the fixed element observes the parent's left margin and ignores it's right margin.
html, body{margin: 0; padding: 0;}
#container
{
margin:0px auto;
width:90%;
height:500px;
background:#A8A8A8;
}
.fixed-menu
{
position: fixed;
height: 50px;
width:100%;
background-color: #00a087;
}
<body>
<div id="container">
<div class="fixed-menu"></div>
</div>
</body>
So with the above the "fixed" block does align with the left margin of the parent container but runs completely to the right edge of the browser page. I have figured out that I can make the fixed block 90% and resolve the issue but I don't understand why. Why would the block not be 90% of the parent "container" block.
I look forward to you knowledge.
Thanks
Update your css like below to achieve your desired result. Inherit your width from the parent instead of using 100%.
.fixed-menu
{
position: fixed;
height: 50px;
width:inherit;
left:auto;
right:auto;
background-color: #00a087;
}
DEMO
as stated by #freestock.tk, a fixed element is "fixed" to the screen viewport.
the width (and height of set in %) is computed relative to the screen viewport.
it looks like it's aligned to left margin of the parent container because you did not positioned it with left or right css properties, it's not constrained by the parent container, it is just at the same horizontal position in this peculiar case.
if you set
left:0;
it will align to the left margin of the viewport and ignore the parent container, this should help you better understand his fixed positioning.
html, body{margin: 0; padding: 0;}
#container
{
margin:0px auto;
width:90%;
height:500px;
background:#A8A8A8;
}
.fixed-menu
{
position: fixed;
left:0;
height: 50px;
width:100%;
background-color: #00a087;
}
<body>
<div id="container">
<div class="fixed-menu"></div>
</div>
</body>
You where almost there, just add to .fixed-menu few css rules more :
.fixed-menu {
left:0;
right:0;
margin:0 auto;
width: 95% // now you can change width and fixed element will be centered always
}
I know it's a super-basic question, but I'm not able to find a solution. I have 2 div and I would like to display them as blocks (one below the other) without having 100% width. Here's my code.
HTML
<div id="container">
<div class="test">one</div>
<div class="test">two</div>
</div>
CSS
.test {
display:inline-block;
clear: both;
border:1px solid;
}
#container {
clear:both;
text-align:center;
}
Unfortunately this answer doesn't fit to me, since I need to center blocks horizontally (so float cannot be applied in my case). Here's the fiddle. Thanks in advance.
to center them on top of each other without taking 100% width and still use margin:auto; use : display:table;
.test {
display:table;
margin:auto;
border:solid;/* to see it */
}
You can specify the width of the divs, change display to block, and use margin: 0 auto to center them.
JSFiddle
You can also center the div by adding 50% left offset, and then negative margin in amount to half width of the div. I do not know how much is this applicable to your case, but here is an example:
.test {
position: relative;
border:1px solid;
width: 300px;
left: 50%;
margin-left: -150px;
}
You can see it in action here: http://jsfiddle.net/b8LuQ/7/
display:inline-block; is not allow the second line. Therefore I removed it and define width for both div test one two you can resize it and margin:auto is align center the both div in container here is an example
I am trying to align two divs horizontally and I got it to work using display:inline-block
however when I put overlfow-x:scroll to the main container it doesn't work. If the screen is smaller, one of the div goes to the bottom. How can I achieve this? I don't want the second Div to go to the bottom if the screen is small.
Here's fiddle
<div class="container">
<div class="test1">test1</div>
<div class="test2">test2</div>
</div>
.container{
display:table;
margin: 0 auto;
overflow-x:scroll;
}
.test1{
background-color:red;
width:500px;
margin-left:16px;
display:inline-block;
}
.test2{
margin-left:40px;
display:inline-block;
background-color:gray;
width:80px;
vertical-align:top;
}
give parameters to width and height, so container can overflow.
http://jsfiddle.net/f5HWD/3
.container{
width: 900px;
height: 700px;
display:table;
margin: 0 auto;
overflow:scroll;
}
I altered your code slightly and made the contents float left.
In order you get it to work, you just had to create a wrapper class. You need the outside container to be large enough to just fit your test divs, while the wrapper is large enough to hold both combined. This should be fairly easy to figure out and edit according to the heights/widths that you want the divs to be.
Fiddle
Hope it helps.
Sorry if this has already been asked, but I wasn't sure of the correct wording, so I couldn't search it up. I have an image that is very large width-wise, and I want it to go off of the browser window when using a smaller resolution, and if you have a bigger resolution, it will show more of the image (width wise ONLY, height needs to remain the same), this way it won't matter what resolution you're browsing at, the image will still be the same height, so the page content will stay mostly the same. Just putting it in with img tags adjusts the whole picture to fit the browser window, changing the height in the process. Below is a very crude diagram of what I want to happen.
The simple option is to add overflow: hidden; to the image container. E.g. http://codepen.io/pageaffairs/pen/Etikh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.wrap {width: 60%; margin: 0 auto; background: ##e7e7e7; padding: 20px;}
.container {overflow: hidden;}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<img src="http://placehold.it/1024X600" alt="">
</div>
</div>
</body>
</html>
Use this code:
CSS:
.container {
width:100%;
height:100%;
position:fixed !important;
top:0;
left:0;
background-color:red;
right:0;
bottom:0;
}
.container img {
height:inherit;
width:100%;
}
The container is fixed and it is 100% width and height with its top, left, right, bottom values all set to zero pixels. The img in the container inherits the height set in the container block but the width is 100%.
HTML:
<div class="container">
<img src="http://placehold.it/1024X768">
</div>
JsFiddle:
http://jsfiddle.net/CVNf9/
I think this is what you're looking for:
.image-mask {
margin: 10px;
border: dotted 2px red;
overflow: hidden;
}
.image-mask img {
display: block;
width:1024px;
height:768px;
}
<div class="image-mask">
<img src="http://yourdomain.com/images/yourimage.png">
</div>
If necessary set a max-width on .image-mask (say if it has an actual border you want to display or something) to prevent it getting larger than the image width, or set margin: 0 auto to center it, etc.
Fiddle: http://jsfiddle.net/Aj59Z/2/
As simple as that:
img {
width: 1000px; /* Width of your img */
height: 600px; /* Height of your img */
}
And to avoid horizontal scroll bar, wrap your image with some element and set its overflow attribute to hidden, width to 100%
JSFiddle
http://jsfiddle.net/SVxJ4/1/
Usually I would do this by either setting the margin to auto, using position:absolute, or via padding but unfortunately these will not work in this case. I need a div to be about 15 pixels off-center horizontally from the page. The tricky bit is it needs to scale correctly as the page widens. It seems to me that I would need to do this horizontal adjustment based on the center point, rather than the left hand side. How could I achieve this? Thanks.
Use a container div, which is centered, then its content you can give margin-left:npx - like so:
HTML
<div id="container">
<span id="green"> </span><br />
<span id="blue"> </span>
</div>
CSS
#container{width:100px; margin:auto auto; background-color:red;}
#container span{display:block; width:100%; }
#green{background-color:green; margin-left:10px;}
#blue{background-color:blue; margin-left:-10px;}
See the example coded up here - http://jsfiddle.net/Xpk8A/1/
give a wrapper with:
margin: auto;
position: absolute;
inside wrapper, put div:
position:relative;
left: -15px; (or whatever you want)
example page would help.
You can absolutely position your div and set the left attribute to 50%. Then, set the margin-left to 50% + 5px (whatever that is). This would only work if you have a fixed width on the box, however. For example, if the box is 200px wide, the margin-left would be -115px.
The key is to set width:100% and a fixed margin, as you can see in my example below
<style>
div {
background-color:red;
height:100px;
margin:0 auto;
width:100%;
margin-left:15px;
}
</style>
<div></div>
<html>
<body>
<div class="centered">
<div class="offcenter">
</div>
</div>
</body>
</html>
The css will be:
.centered
{
margin: 0 auto;
width:300px;
height:200px;
background-color:red;
}
.offcenter
{
background-color:blue;
width:285px;
height:inherit;
float:right;
}
http://jsfiddle.net/evbbq/
You can use display:inline-block for center the DIV then give your margin to it .
Like this:
.Parent{text-align:center;}
.Child{
display:inline-block;
text-align:left;
width:200px;
height:150px;
background:red;
margin-left:15px;
}
Check this fiddle http://jsfiddle.net/Xpk8A/2/
Remove margin-left:15px then click on Run button in the fiddle to see the different.