Ok I have edited this question as the issue has changed slightly. Basically margin: 0 auto; is not working for me on 2 elements. They just will not centre in the middle of the page. I guess this jsfiddle shows a good example http://jsfiddle.net/Hr4uK/1/ Imagine the red box across the top is centred, every other div floats slightly to the right.
CSS:
#sliderFrame {margin: 0 auto; width:990px;} /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/
.two-step {
width:990px;
background-color: #CADDC0;
margin: 0 auto;
border-bottom:5px solid #CADDC0;
}
.var {
width: 990px;
}
.topimage {
margin: 0 auto;
width:990px;
}
HTML:
<div id="topimage">
<img src="http://www.paycoservices.co.uk/images/test1.jpg" />
</div>
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<a href="http://www.menucool.com/jquery-slider" target="_blank">
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-1.jpg" alt="Welcome to Menucool.com" />
</a>
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-2.jpg" alt="" />
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-5.jpg" width="968" />
</div>
<div id="htmlcaption" style="display: none;">
<em>HTML</em> caption. Link to Google.
</div>
</div>
<div class="two-step">
<img src="http://www.paycoservices.co.uk/images/2-step-sfinder.png" width="968" height="100" class="show_hide" alt="3 steps" />
</div>
You need to set width on the img element.
Without doing this, the img will take up it's natural width. (That's why it was jutting out beforehand)
FIDDLE
#sliderFrame, .two-step, img
{
margin: 0 auto;
width:968px;
}
I am not sure what you want. So I assume you want the div.two-step be aligned with the other divs.
you have a class in your CSS .slidingDiv but it is not used in your HTML...
#sliderFrame {margin: 0 auto; width: 990px}
.two-step {
width: 968px;
margin: 0 auto;
}
I also forced the width of the 990px wide image to be 968...
does what I think you want.
look at the fiddle
http://jsfiddle.net/Hr4uK/
This was resolved by hacking with the top menu as it was that that was slightly not centred.
Related
I have a 3 column grid, which is sitting inside a 100% container div. But as of now it is just being pulled all the way to the left side of the page. I want the three columns to be div to be centered inside the container. Here is a screenshot of the design that I'm trying to code: To fix the margin issue between each grid box, I used the technique found here (Scroll down to the last section "Roll your own...")
HTML:
<div class="featured-properties">
<div class="properties">
<div class="property">
<img src="img/sample-prop-1.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-2.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-3.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-4.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-5.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-6.jpg" alt="Sample Property" />
</div>
</div><!-- end .properties -->
</div><!-- end .featured-properties -->
CSS:
.featured-properties {
width: 100%;
}
.properties {
margin: -79px;
overflow: hidden;
clear: both;
width: 1047px;
}
.property {
float: left;
margin-left: 79px;
}
No need explanation, see the CSS below and demo (responsive!).
DEMO: http://jsfiddle.net/0m5p2818/
.properties {
text-align: center;
max-width: 720px; /* (200+(20x2))x3 */
font-size: 0; /* fix for white space bug */
margin-left: auto;
margin-right: auto;
}
.property {
display: inline-block;
margin: 20px;
font-size: 16px;
}
I'm not really sure if I understood your question, but I think CSS 3 Flexbox can help you to achieve what I think you need.
Take a look at it here and see if it works for you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I want to do the following:
The biggest Box is a div containing two imgs separated by a small space and with two small block of texts exactly beneath each one.
The problem is that I have been trying (not kidding) for at least 5 hours.
Here is my code:
CSS:
#divPictures {
width: 960px;
position: relative;
float: left;
top: 520px;
left: 200px;
background: url("../imgs/bg-body.jpg");
margin: 0 0 0 -5px;
}
#divPictures img {
margin: 0 0 0 10px;
}
HTML:
<div id="divPictures">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE</p>
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
EDIT:
I can't post images but is a block containing two images one next to the other and text beneath.
Something like this? Quick example, you can obviously add in extra CSS, or float both left and pad/margin etc...
#divPictures{
width: 100%;
background: url("../imgs/bg-body.jpg");
}
.left{
width: 45%;
float:left;
}
.right{
width: 45%;
float:right;
}
.left img, .right img{
margin: 0 0 0 10px;
}
HTML:
<div id="divPictures">
<div class="left">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE</p>
</div>
<div class="right">
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
</div>
Make new divs for images and use css atribute display: inline-block to tell interpreter that you want your divs in a line.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
div#pic
{
display: inline-block;
width: 200px;
background: url("../imgs/bg-body.jpg");
margin: 5px 0 0 -5px;
}
div#pic img
{
margin: 0 0 0 10px;
}
</style>
</head>
<!-- HTML -->
<body>
<div id="divPictures">
<div id="pic">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE"</p>
</div>
<div id="pic">
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
</div>
</body>
</html>
This is the simplest way... When i get stuck I delete it and start over. I think you would have benefitted from starting over...
CSS
<style>
.caption{
text-align: center;
}
li{
background: #ccd2cd;
float: left;
margin:5px;
list-style: none;
padding:5px;
}
</style>
HTML
<ul>
<li>
<img src="http://omarhabash.com/img/feature1.jpg" alt="">
<div class="caption">caption2</div>
</li>
<li>
<img src="http://omarhabash.com/img/feature1.jpg" alt="">
<div class="caption">caption2</div>
</li>
</ul>
if you dont want to use (li) list then just replace those with div classes and rename the style also to the same.
the way i have it here is a good start to a grid if thats what you are aiming for.
http://jsfiddle.net/Mz6aF/
I'm trying to center 4 divs inside a bigger div with equal margin between them, and it doesn't seem to work.
I've looked at other answers and tried margin: 0 auto but it didn't work for me.
here's the HTML:
<div id="footer_frame">
mail#gmail.com
<span id="phone">044-1234567</span>
<div id="footer_icons">
<div class="icon_div">
<img src="images/youtube.png" alt="Watch our work at our YouTube page" class="icon" />
<p>YouTube</p>
</div>
<div class="icon_div">
<img src="images/email.png" alt="Contact us" class="icon" />
<p>Email</p>
</div>
<div class="icon_div">
<img src="images/googleplus.png" alt="Join our circle # Google+" class="icon" />
<p>Google+</p>
</div>
<div class="icon_div">
<img src="images/facebook.png" alt="Join our Facebook page" class="icon" />
<p>Facebook</p>
</div>
</div>
And the CSS:
#footer_frame {
position: absolute;
background-color: rgba(0,0,0,0.8);
width: 25%;
height: 16%;
top: 83%;
left: 37.5%;
}
#footer_icons {
width: 90%;
clear:both;
margin-top:12%;
}
#footer_icons .icon_div {
display: inline-block;
text-align: center;
font-size: 0.9em;
color: white;
}
#footer_icons .icon_div p {
margin: 0.2em;
}
Now it looks like this, but what I want is that the 4 icons will be centered inside the black div.
Thanks.
Wrap all four inner divs with a single DIV and then set a fixed width and use margin: 0 auto on that one.
When I do things like this I try to use flexboxes as often as possible. The above answer works perfectly but I just thought you might want to try these two options out.
#footerIcons{ display: inline-flex;} .iconDiv{ display: -webkit-flexbox;
-webkit-flex-pack: center;
-webkit-flex-align: center;
}
This should work. For more info visit this link. Before you try to use flexbox in your code make sure you have a ll the right vendor prefixes.
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}
I have two divs with two images:
<div id="div1">
<div id="div2">
<img src="img1" />
</div>
<img src="img2" />
</div>
Second one is some smaller than first. How can I put second image on first image without using
#div2{
position: absolute;
}
I need to get similar result but without using position absolute property;
The main issue is that there are a lot of other elements, in parent div, not only div2.
Negative margins
You can do lots with negative margins. I've created an example with just two images without any divs.
img {
display: block;
}
.small {
margin: -202px 0 0 0;
border: 1px solid #fff;
}
.small.top {
position: relative;
margin: 0 0 -202px 0;
}
<img src="http://www.lorempixel.com/300/300">
<img class="small" src="http://www.lorempixel.com/200/200">
And some text
<img class="small top" src="http://www.lorempixel.com/200/200">
<img src="http://www.lorempixel.com/300/300">
And some more text
My question to you is why must you do this WITHOUT
#div2 {
position: absolute;
}
If the problem you are encountering is because it's absolute to the page and not the div then make sure #div1 has the following:
#div1 {
position:relative;
}
Its not a good approach to use negative margins. Especially when email templating, gmail reject negative margin and positions. So another way is
<div class='wrapDiv' style='width: 255px;'>
<div class='divToComeUp' style='
float: left;
margin-top: 149px; width:100%;'>This text comes above the .innerDiv
according to the amount of margin-top that you give</div>
<div class='innerDiv' style='width:100%; height:600px'>
Inner div Content
</div>
</div>
You could nest div2 inside div1:
<div id="div1">
<img src="\img1.png" />
<div id="div2">
<img src="\img1.png" />
</div>
</div>